Stylify your popular post widget in blogger

Hi readers !! In our previous article, we have shared and awesome "Related post widget for blogger" and now we bring's you another cool  Blogger widget which will help you to reduce your blog's bounce rate. As we know that the "Popular post widget" is the most common but compulsory widget to have in your blog. It display's some of the most viewed articles of your blog. The default popular post widget provided by blogger, works perfect but it looks little old fashioned and dull. So in today's tutorial, we will learn how could you give a professional touch into the widget by adding some simple CSS coding in your template. if you want to see the demo, then take a look on our popular post widget.

How to install popular post widget in blogger:-

These  steps are so simple and easy that any new blogger will not face any kind of problem to install it in their blog.

Go To Blogger.com >> Your Blog >> Layout
Then select >> Edit (Popular Widget)
Make the changes as shown in the picture and hit the save button.

1. Go To Blogger.com >> Your Blog >> Template
2. Now Backup your template.
3. Then select Edit HTML >> Proceed
4. Search for ]]></b:skin> and just before/above it paste the following code.

.popular-posts ul li {
margin-top:0;
border-bottom:1px dashed #d2d2d2;
}
.PopularPosts .item-title {
font-weight:700;
font-style:italic;
font-size:14px;
text-align:justify;
}
.PopularPosts .widget-content ul li {
background:#fff;
padding:0;
}
.PopularPosts img {
width:110px;
padding:.4em;
}

All Done : Now everything is completed just  Save your Template by pressing Save template button.