Customize Blogger's Official Popular Posts Widget

I rarely use a tool unless I know I can design it according to my preferences. Blogger Team introduced their official Popular Post widget which could display a snippet of your most viewed posts along with a thumbnail image based on your Analytics stats. But wait! the widget today is a step ahead of it. We will override the stylesheet for this widget completely with our custom fonts and colours. You can view this popular gadget right on our sidebar.

The biggest advantage of this widget is that we don't need to install any heavy Javascript because we are using a widget stored on Blogger's servers and we will just alter its look to make it blend perfectly with your blogspot blogs.

I hope you will find today's tutorial pretty interesting. So lets go playing!

Adding Popular Posts Widget To Blogger

1. Go To Blogger > Design
2. Click on add a gadget and select the "Popular Posts" gadget from the list provided by blogger
3. Now make these settings

• Set Most viewed to all time
• Uncheck image Thumbnail and snippet. We only need to display popular links so we don't need that bulky image and unnecessary intro text.
• You can display between 1 to 10 posts. So choose at least 7 posts.

       4.   Save your widget
       5.    Now go to Blogger > Design > Edit HTML
       6.   Backup your template
       7.   Search for this

]]></b:skin>

       8.    Just above it paste the following CSS code,

/*--- MBT Popular Posts --- */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(http://1.bp.blogspot.com/_7wsQzULWIwo/ SmodosCuJCI/AAAAAAAABh4/ZSXbVW9Qpa8/s400/261.gif) no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #dddddd;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.popular-posts ul li:hover {
border:1px solid #6BB5FF;
}
.popular-posts ul li a:hover {
text-decoration:none;
}

Make these changes to customize the default look:

• To change the bullet image replace the image link 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  #6BB5FF

You can use our color Chart for changing the colors.
   9.    Finally save your widget and say bingo!

Visit your blogs to see it hanging just fine on your sidebar. Do let me know if you needed any further help in changing the font type or color. The widget will automatically apply to it default colors of your blog but in case you wish to change them to something different then feel free to let me know by posting your comments below.

Credits

This widget model is brought to you by MBT therefore if you liked this widget and wish to share it with your readers then kindly link back to this tutorial. Peace buddies. :)