Due to some circumstances, this blog is now up for sale, for more enquires contact: Plushista@gmail.com
Pin It

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(http://1.bp.blogspot.com/-PCZ1mg2a0Bk/UHpxmZVBI3I/AAAAAAAAB9Q/JdPm54-yLkI/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(http://4.bp.blogspot.com/-dAl1D7VgX_g/UHpycJXoLoI/AAAAAAAAB9Y/dPoMTxQ1bfU/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 {
  • 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!".

4 comments : Post Yours! Read Comment Policy ▼
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. after reinstall its not working??

    1. If probably you restore your template backup that is not containing the CSS code, the customiztion will not work. Add the default popular post widget and add the CSS code shared in the tutorial again.


About Me

My Photo
Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

Recent Posts

Let's Connect

Site Links

Copyright © 2014 RealcomBiz. All Rights Reserved.
Powered by Blogger