How to Customize Popular Posts widget in Blogger with CSS?

How to Customize Popular Posts widget in Blogger with CSS?

How to Customize Popular Posts widget in Blogger with CSS?

Blogger's blogs each element is customize-able with CSS and JavaScript. There's lots of widgets in Blogger that you may need to personalize or make them looking more stunning. And 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 simple and has no attraction. But, by using today's trick you can make it more stunning 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:

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

Then after pasting above CSS code then Save your template and you are 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 e.g:

If you require to show the first line of your popular posts then tick the Snippet check box and also the picture thumbnail will show the picture of the post, select number of posts you require to show in the widget and also you can select the timeframe 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 weblog, but in the event you keep it on side bar, it would be looking pretty.
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.