Customize Blogger Official Popular Posts Widget With CSS

Customizing blogger official widgets is not that easy, but with this tutorial, you will be able to customize the blogger official popular posts widget using CSS. The idea i use in customizing this widget is derived from the CSS code i use to customize feedburner buzzboost widgets. I have apply hover effect to the widget to increase the beauty of the widget.
The small red cancel icon appear on normal view with dashed round corner, while the small green mark icon show up on mouse hover with a solid round red corner.

How To Add Popular Posts To Your Blog

Before you can customize the blogger official popular posts widget, you will need to add it from your page layout, if you don't have it already.

• Go to your blogger dashboard
• Click on Design > Page elements > Add a Gadget (Old blogger Interface)
• Click on Layout > Add a Gadget (New blogger interface)
• Now choose Popular Posts New! from the options that appear in the pop-up window.
• Set it as shown below, but you can change the number of posts to be displayed from 10.

• Now click on the Save button

How To Customize The Popular Posts Widget

• Go to Design > Edit HTML (Old blogger interface)
• Go to Template > Edit HTML > Proceed (New blogger interface)
• Use ctrl F to find the ]]></b:skin> and paste the following code above/before ]]></b:skin>

/*--- Customize Popular Posts Widget Design By www.realcombiz.com --- */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo8n586HbE7O1LSrSxfOCIBCmNGv057eWPgbJYW0EtroqEe8yztH1UHs2EPy6mXaMEptZ3CpaH5f2cDOaMjsHFwFcTvWsjPK4qoHwo49DAOMiHA-ZtOG6L8-Fx-ZKuJyg8Ec6guVFGBtc/s1600/rb+cancel+icon...jpg) no-repeat scroll 5px 10px;
list-style-type: none;
margin: 0 0 5px 0px;
padding: 5px 5px 5px 33px !important;
border: 1px dashed #dddddd;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.popular-posts ul li:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiizxZH1vnIzFm5a2uF47wOQ4E9zefrfFzDkOyJcjhI5modhWIP5HJskcrHmicoXYTYY6HuGtXL33WxVn7dmiecPWrwZZFG3XWnhAjpHtVF3jkqfPmevF6RiXZ0TeiGyVYPssKmuPyMyXg/s1600/rb+mark+icon...jpg) no-repeat 2px;
border: 2px solid #b60000;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}
.popular-posts ul li a:hover {
text-decoration:none;
}

• Now save your template and you are done.

What do you think about this customization, does it worth trying?
We would like to hear your feedback and share this post with friends/followers.

Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

Follow @realcombiz