Customize Your Blogger Popular Posts Widget with CSS

Blogger's blogs each element cav be customized with CSS and JavaScript. There are many widgets in Blogger that you might want to customize or make them looking more beautiful. One Of them is Popular Posts Widget.

So In This Trick we will learn about customizing Popular posts widget in blogger.

Trick is very simple and about blogger popular widget customization. This widget comes in all default and custom blogger templates. Initially it is just simple and has no attraction. But, by using today's trick you can make it more attractive and eye catching.

So Come To The Point!!

How to Change Popular Posts widget in Blogger?

lets start the things to do in this tutorial. Follow simple steps below in order to change your popular posts widget in Blogger:

1. Log-in to your blogger dashboard
2. Go to the blog's Template page 
3. Click HTML >> Proceed
4. Now search for this code: ]]></b:skin> by using CTRL+F
5. Just above/before ]]></b:skin> paste the below codes

.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFAWy_PzdB4829zxjgGKL6dMxj8smLYsSPnTw834bjs6YZ_vo7zorLysTb-XQvb4Agejqxr9f2w31H3Xzi36H5erPRqpcX29-Ciw6N0vNwLXVQfyNEr0dLPPupAeFovmryW7bXVm6JUlM/s1600/1.gif) no-repeat scroll 5px 10px;
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);
}

 Save your blog's template and you're done!

If you have questions let me know by commenting below this post. 
Thanks