Saturday, June 2, 2012

Customize Blogger's Official Popular Posts Widget

Author: Gagan Masoun
Customize Blogger's Official Popular Posts WidgetYou & your readers want to know that which posts are popular in your blog. You can use blogger's official Popular Post widget. This widget could show a snippet of your most viewed posts along with a thumbnail. You can add this widget easily from "Add a Gadget" option. But I want to tell you that you can customize blogger's official popular posts widget with your own color & fonts.

The most powerful benefit of this widget is that you don't need to install any heavy Javascript because you are using a widget stored on Blogger's servers. Must share your experience about this tutorial at the end of the post.

Recommend For You: Customize Blogger's Official Follow By Email Widget

Adding Popular Posts Widget To Blogger

  1. Go To Blogger Dashboard > Click On Design
  2. Click on Add a Gadget and Select The "Popular Posts" Gadget
  3. Now Make These Changes : Most Viewed - All Time, Show - Un-check image thumbnail and snippet
Customize Blogger's Official Popular Posts Widget
4. Click On Save Button
5. Now Go To Blogger Dashboard > Design Tab > Edit HTML
6. Always Backup Your Template Before Any Changes
7. Search For The Code Give Below 
8. Just Above It Paste The Following CSS Code (Copy Given Code)
/*--- BD Popular Posts --- */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url( ) no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #dddddd;
.popular-posts ul li:hover {
border:1px solid #389CFF;
.popular-posts ul li a:hover {

Customize The Default Look Of The Widget:

  • To change the bullet image replace the image URL in bolded black in the code above with your bullet URL.
  • To change the border color in active mode edit #dddddd
  • To change the border color on mouse hover edit  #389CFF
9. Its All Done, Save Your Template and Enjoy :)


Post a Comment