Easy to Install Colorful Popular Post Widget for Blogspot

Posted On / 2 comments

If you are bored with your default popular post widget, then I have here an easy to install colorful popular post widget for blogger/ blogspot that currently I am using (you can see it on the right side). 

This widget is converted from wordpress to blogger.

Features for this widget are as shown in the image. It is also has an effect, when you point your mouse on your popular post.

Instructions for these widget is very easy just follow these 4 simple steps.


1. Go to your Blogger.com account> click dashboard > go to layout > add gadget and choose popular post widget. Display up to 5 posts only.

2. Then click on template Edit html > Proceed > look for this code  ]]></b:skin>
 using crtl+F.

Note: Make sure you back up your template in case you made some mistakes putting the codes. Go to your blog dashboard, on the right side you will see a button backup/ restore and click on it, then click download full template.

3. Copy and paste the code below above ]]></b:skin> . 

.sidebar .PopularPosts .widget-content ul li{
height: 100%;
line-height: 22px;
float: left;
clear: left;
list-style-type: none;
overflow: hidden;
color: gray;
.sidebar .PopularPosts .widget-content ul{margin:0;padding:5px 0;list-style-type:none;}
.sidebar .PopularPosts .widget-content ul li{position:relative;margin:5px 0;border:0;padding:10px;opacity:0.8;
-webkit-transition:all 0.4s;
-moz-transition:all 0.4s;
-ms-transition:all 0.4s;
-o-transition:all 0.4s;}
.sidebar .PopularPosts .widget-content ul li:hover {border-radius:30px 0px 0px 0px;margin-left:10px;opacity:1.0}
.sidebar .PopularPosts .widget-content ul li:first-child {background:#ff4c54;width:90%}
.sidebar .PopularPosts .widget-content ul li:first-child:after{content:"1"}
.sidebar .PopularPosts .widget-content ul li:first-child + li{background:#ff764c;width:80%}
.sidebar .PopularPosts .widget-content ul li:first-child + li:after{content:"2"}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li{background:#ffde4c;width:70%}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li:after{content:"3"}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li{background:#c7f25f;width:60%}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li:after{content:"4"}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li{background:#33c9f7;width:40%;padding-right:20px;}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li:after{content:"5"}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:30%}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li:after{content:"6"}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:20%}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li:after{content:"7"}
.sidebar .PopularPosts .widget-content ul li:first-child:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li + li:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li:after{position:absolute;top:15px;right:-5px;border-radius:9%;background:#353535;width:30px;height:40px;line-height:1em;text-align:center;font-size:22px;color:#fff;}
.sidebar .PopularPosts .widget-content ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:30px;height:90px}
.sidebar .PopularPosts .widget-content ul li a{font-size:12px;font-weight:bold;color:white;text-decoration:none;text-shadow:0px 0px 6px white;
-webkit-transition:all 0.4s;
-moz-transition:all 0.4s;
-ms-transition:all 0.4s;
-o-transition:all 0.4s;
.sidebar .PopularPosts .widget-content ul li a:hover{color:black;text-decoration:none;text-shadow:1px 1px 1px white;}

4. Save template and you are done!

That's it hope you like it!


Receive News From The Blog In Your E-mail

Sign up and receive directly in your email. Its free!! Enter your email address and then confirm to begin receiving exclusive news from Blog!


  1. When you're down, and the world seems dark and empty, your forever friend lifts you up in spirits and makes that dark and empty world suddenly seem bright and full Diablo iii Gold Sale, this is Forever Friendship Diablo III Gold, someone who convinces you that there really is an unlocked door just waiting for you to open it Diablo 3 Gold.

  2. Don't forget the things you once you owned. Treasure the things you can't get. Don't give up the things that belong to you and keep those lost things in memory titan online gold, if you leave me, please don't comfort me because each sewing has to meet stinging pain titan gold, one may fall in love with many people during the lifetime titan money.


Please read first before commenting:

1.) No spamming please

2.) Do not flood the comment box with links.

3.) To get free updates, kindly subscribe.

4.) Have fun visiting my blog.

emailSubscribe to our mailing list to get the updates to your email inbox...
Delivered by FeedBurner | powered by blogtipsntricks