Styling Popular Post Widget With CSS

There are some usefull and must have widgets which can help you to increase traffic to your blog and keep your visitors engaged on your blog. Facebook Like Box, Twitter Follow Button  and Popular post widget are some of those widget. I had previously posted on Adding Popular Post widget to your blog, but the default style of this widget that blogger provides is very boring and not so attractive. So in this tutorial i will teach you to add and style popular post widget using CSS. After styling the widget it will look more stylish and more attractice as you can see on the left. You can even customize this further to match your blog template. So lets get started customizing blogger popular post widget.

Adding Popular Post Widget To Blog

1. Go to Blogger Dashboard > Layout > Add Gadget and choose Popular Post Widget.

2. Now set this setting as shown below.

3. You may change number of post to show upto 10 but dont make it below 6. Check below article for detail information.

•  Add Popular Post Widget To Your Blog

Styling Popular Post Widget With CSS

1. After Adding Popular Post widget to your blog. Go to Blogger Dashboard and choose Template.

2. Now Backup your Template to be safe if you mess something up. Check below tutorial if you dont know how to do that.

• How To Backup Blogger Template ?

3. After Template been selected click on Edit HTML and search for below code.

]]></b:skin>

4. Now paste below code just above the code you search in Step 3.

/*--- Mybloggersworld.com Popular Posts --- */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #6BB5FF;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;}.popular-posts ul li:hover {
border:1px solid #009900;
}.popular-posts ul li a:hover {
text-decoration:none;
}

 5. Now save this template and you are done.

Further Customizing The Widget

If you follow above steps correctly then you have install and style popular post widget on your blog.This part is completely optional. So if the border of the widget does not match your blog template or you want some different color then change the setting shown below. 

• 6BB5FF - Change this to change the border color at static mode.
• 009900 - Change this to change border color on hover effect.

If you have any question or suggestion or come across a problem while implementing this widget then leave a comment below i will be glad to help you out.