Customize Popular Post Widget in Blogger With CSS

Blogger elements is fully customizable with CSS and JavaScript. There are many widgets in blogger which you want customize and give some attractive look. So today's trick is simple about Popular Post Widget in Blogger. You can use this trick in all default and customs blogger templates. By using this you can your blog more attractive and eve catching.

How to Customize Popular Post Widget in Blogger With CSS ?

• Goto blogger.
• Template >> Edit HTML
• Search this code in blog template]]>< by using Ctrl+F
• Paste the below codes just above or before ]]><

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

• Click on the save button and you done it.

How to Popular Post Widget in Blogger ?

• Goto Layout >> Add a Widget
• Click on Popular Post.

If you want to add just the title of post then tick on the snippet box and also want to add the image with post title also tick on image thumbnail. You can also select of time of popular post like all time , 30 days , last 7 days. After doing all these thing you can place it any where on your blog. But keep this widget on sidebar because it will be looking more attractive.