Customize Popular Posts Widget in Blogger | Style #2

If you're a regular reader of our blog then you could have already seen the popular posts widget style #1. Today I am back with the next style, i.e. Style #2. Entirely different from style #1, style #2 is simple as well as have a classic look. The customization is purely a CSS based one and no complex steps are evolved.

Actually there is nothing big with this customization. A simple hover effect is added as well as the default list marker is replaced with an arrow. Anyway lets start...

Screen Shot:

Adding Popular Posts Widget To Your Blogger Blog

Before we move further, it's important to add the popular posts widget from the list of widgets. You can add the widget as per your wish, i.e. with/without snippet, with/without thumbnail,etc. After you make the selections, click the orange save button.

Customize Popular Posts Widget in Blogger

On the blogger dashboard >> Template >> Edit HTML, now using Ctrl+F search for ]]></b:skin> and paste the below code above it.

.popular-posts ul{padding-left:0px;}
.popular-posts ul li {list-style-type: none;
text-align:justify;
margin:0 0 5px 0px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYKDMMDPhW1a4rO1pfnlAjjeTNhUTbVtEoaQLDfKMzhQVaglxgt6X67zPNfl86v_P-J1aWBjbS7A1kIb4CfsvTg48bYFeu5z5wBcXIEpwgN-TVbkTTCRcds3jcAEP3LkVedN7JoW0MWLf_/s1600/cat_bullet.gif) no-repeat scroll 5px 10px;
padding:5px 5px 5px 20px !important;
border-bottom:1px solid #e7e7e7;
}

.popular-posts ul li:hover{background:#E8F5FC;
border-left:3px solid #00b9ed;
}
.popular-posts ul li:last-child{border-bottom:none;
}

After that, click the orange 'Save template' button.

Customization

• To change the default background color on hover, replace #E8F5FC.
• To change the default border color on hover, replace #00b9ed.
• To change the arrow image with some other image, replace https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYKDMMDPhW1a4rO1pfnlAjjeTNhUTbVtEoaQLDfKMzhQVaglxgt6X67zPNfl86v_P-J1aWBjbS7A1kIb4CfsvTg48bYFeu5z5wBcXIEpwgN-TVbkTTCRcds3jcAEP3LkVedN7JoW0MWLf_/s1600/cat_bullet.gif with URL of any other image.

That's it! Hope this customization will help you in your blogging journey. Please let me know if you need any further help for making the widget more beautiful.