How to Add Multi Colored Popular post With Hover Effect to Blogger:Digital Tech Inspiration

Popular post is a widget provided by blogger which shows a list of most viewed posts from your blog. Now using a hack we will customize popular posts widget with awesome style. The

main part of this hack is; you don't need to add any heavy JavaScript or any other scripts we will apply this hack with using only CSS. Also you can customize this widget with using blogger template designer.

Well, in this post I will show you on how to add a Multi Colored Popular Post with hover effect widget. This Multi Colored Popular Post with hover effect widget not only attracts readers but also looks beautiful in sidebar. Before moving to the tutorial you can see the demo by clicking the below button.

LIVE DEMO

Let's go to the tutorial.

Login to Blogger.
Go To Blogger Dashboard > Template > Edit HTML > tick the Expand Widget Templates.
Click (Ctrl and F) Search for

/* Variable definitions

====================

Just below/after it paste the code below,

Note: if this code is not working in your template, use the Code 2

</Group>

Note: If the code given above is not working then use this one.

6. Click (Ctrl and F) Search for ]]></b:skin>

7. Just before/above ]]></b:skin> paste the code below,

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}

#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}

#PopularPosts1 ul li:first-child{background:$(PopularPosts.background.color1);width:90%}

#PopularPosts1 ul li:first-child:after{content:"1"}

#PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%}

#PopularPosts1 ul li:first-child + li:after{content:"2"}

#PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%}

#PopularPosts1 ul li:first-child + li + li:after{content:"3"}

#PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%}

#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}

#PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%}

#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}

#PopularPosts1 ul li:first-child + li + li + li + li +li{background:$(PopularPosts.background.color6);width:65%}

#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}

#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:$(PopularPosts.background.color7);width:60%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}

#PopularPosts1 ul li:first-child:after,

#PopularPosts1 ul li:first-child + li:after,

#PopularPosts1 ul li:first-child + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}

#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px}

#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}

#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}

#PopularPosts1 img{-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transition:all 0.5s ease;padding:4px;background: #eee;background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);box-shadow: 0 0 3px rgba(0,0,0,.7);}

#PopularPosts1 img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}

.WIKITECHNOL-moresubs {

background: none repeat scroll 0 0 #EBEBEB;

border-style: solid;

border-width: 1px;

border-color: #fff #ccc #ccc;

padding: 3px 8px 3px 3px;

text-align: right;

font-size: 7px;

letter-spacing: 1px;

}

.WIKITECHNOL-moresubs a {

display: inline-block;

font-weight: bold;

color: #1E598E;

text-decoration: none;

text-shadow: 1px 1px 1px #fff;

}

8. Click (Ctrl and F) Search for code below like this:

<b:widget id='PopularPosts1' locked='false'

Search till

</b:widget>

Replace above search code with the code below( Be Careful while doing):

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>

<b:includable id='main'>

<b:if cond='data:title'>

</b:if>

<ul>

<b:loop values='data:posts' var='post'>

<li>

<b:if cond='data:showThumbnails == "false"'>

<b:if cond='data:showSnippets == "false"'>

<b:else/>

</b:if>

<b:else/>

<b:if cond='data:showSnippets == "false"'>

<b:if cond='data:post.thumbnail'>

<b:else/>

</b:if>

<b:else/>

<b:if cond='data:post.thumbnail'>

<b:else/>

</b:if>

</b:if>

</li>

</b:loop>

</ul>

</div>

<a href="http://wikitechnol.blogspot.com/">Get this Gadget</a>

</div>

</b:includable>

</b:widget>

10. Save Template and then your DONE!

Customization:

Go to Blogger Dashboard> Design> Page Elements
Click on the edit link of Popular Posts Widget
Select “display upto 7 posts”.
Now Save the widget.

So execute steps correctly and you are done. Head to your blog and check the trick executed. So don't forget us. We will only survive with your generosity. Like, Share, Follow and Subscribe. If you are facing any problem with implementing these codes just comment below for help. Stay tuned for more posts.