Customize Popular Posts Widget in Blogger with CSS

Blogger's blogs each element is customize-able with CSS and JavaScript. There are many widgets in Blogger that you might want to customize or make them looking more beautiful. And one of theme is Popular posts widget in Blogger. So our today's 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.

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: ]]> by using CTRL+F
5. Just above/before ]]> paste the below codes

.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_1VKWtbldQS5kGg9x3nIpfD6xNtTUSHpGiEM17KmXdDbfNbwHzaCCa2KSlJoH3Kx4kp4Ul2sM5RxczaRcNkYGPSWUvvlY-BX3b2cVGYlQHkmp3VXI_o4MdBOFcAxqt_-Z-rqT86fgVpk/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!

How to add a popular widget in Blogger?

To add the popular posts widget in blogger just go  Layout >> Add a Widget and add the popular posts widget from the widget list and make any setting as you want. See below picture for example:

If you want to show the first line of your popular posts then tick the Snippet check box and also the image thumbnail will show the image of the post, select number of posts you want to show in the widget and also you can select the period of time for the popular posts as showing like: all time, last 30 days and last 7 days. After adding the widget you can drag it any where on your blog, but if you keep it on side bar, it would be looking attractive.

Your Thoughts: 
The widget is just simple to add, and can also be more customized. If you have questions about this widget do let me know by commenting below this post.