How to add a custom popular posts widget in blogger

Hello Readers, in this article we will see how you can add a customized popular posts widget in your blogger blog. Popular posts widget is an important sidebar content for your blog and an important tool in blogging. It allows your online readers to see what is in trends on your blog these days and your visitors may find some cool articles to read. Blogger has given built-in popular posts widget for every blogger blog. We will be customizing its CSS styles to make it more attractive. This post features the complete tutorial to add this customized popular posts widget in your blog.

Popular posts widget will increase the internal linking of your blog. Internal linking has its own importance in blogging and SEO optimizations. We had shared an article for the benefits of using internal linking a few days ago; you should checkout that one as well. Apart from social networking sites widget you must place the widgets like this, to ensure better a better user experience. Now let us see how you can add this widget to your blog:

Recommended widgets:

How to add a custom popular posts widget in blogger

Part-I

Add default popular posts widget:

Login in to your Blogger account.
Navigate to the layout section and click on add a gadget from sidebar.
Choose popular posts widget from the gadgets list.
You will be asked to make some adjustments for your popular posts widget, as shown below:

You can choose what to display and how. Like if you don't want to display the post snippet, you can simply uncheck that.
After making the important adjustments, click on add and save the arrangement.
This will add a default blogger popular posts widget in your blog.
Click on view blog to check the default blogger popular posts widget.
You have just added built-in popular posts widget in your blog. Now we will customize its CSS styles to make it more attractive.

Part-II

Customize popular posts widget

Navigate to the template section and take backup of your blogger blog.
After taking backup click on edit HTML and find the code ]]></b:skin> using CTRL+F.
Now carefully paste the following code just before the code.

/*UT Popular posts Widget Style Rules*/
.popular-posts ul{padding-left:0px;}
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #ddd;
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;
}
.popular-posts .item-thumbnail img {
webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

Click on save template and then view blog.

You have customized the default popular posts widget in your blogger blog and given it a new look. You can make more adjustments in the CSS style rules according to your blog. If you need any help or have any doubt you can comment here. You can also suggest improvements so that we can create more user friendly widgets.

You should check our Blogger tips and tricks for more cool blogger widgets, plug-ins, blogging and seo tips. I am sure it will improve your blogging experience.

If you like my work; you can show your regards by hitting Facebook like button, following us on Google+ or Twitter, stumbling our posts on stumbleupon or giving us a link back via the links below. Stay tuned for more updates.

Do you like this post? Please link back to this article by copying one of the codes below.

URL:

http://unziptech.blogspot.com/2013/05/how-to-add-custom-popular-posts-widget.html

HTML link code:

<a href="http://unziptech.blogspot.com/2013/05/how-to-add-custom-popular-posts-widget.html">How to add a custom popular posts widget in blogger</a>

BB link code:

[url=http://unziptech.blogspot.com/2013/05/how-to-add-custom-popular-posts-widget.html]How to add a custom popular posts widget in blogger[/url]

Author: Mohammad Zafar Ahmad

Zafar Ahmad is PHP/Java Developer and a Passionate Blogger. He likes to write about Blogging tips, SEO tips, Blogger Widgets, Smart phones, Tablets and Online Earnings. You can find him on Facebook, Twitter or Google+