Customize Popular Posts Widget in Blogger with CSS3

This trick is something that I was looking for not only for my own blog; but also for all the blogs hosted on Blogger.com. In blogger, we can customize or fully change any widget according to our needs. Here is a  very common widget called "Popular Posts" in blogger that shows your mostly viewed posts in a vertical row, this can also be customized with CSS styles. This widget was included in blogger default templates in 2011 and till now it is a great widget. Today we will learn how to change or customize this widget in blogger with some smashing CSS effects. This code will work for both default blogger templates and custom blogger templates and further customization is also possible for this widget. Now just follow given steps below in order to customize your popular posts widget in Blogger.

How to add popular posts widget to blog?

In order to customize your blog's popular posts you should first add the widget into your blog's side bar or somewhere on your blog. To add the popular posts widget in Blogger just follow given steps below:

1. Go to Dashboard 
2. Layout >> Add a Widget >> Add the Popular posts widget from the list and setting can be like below image as you want. 

• The title is by default "Popular Posts" but you can change it with any other name you want. 
• The Most Viewed tells the period of time for posts, you can either select all time, last 30 days or last 7 days. 
• Show means what you want to show in a popular post, check image thumbnail if you want to she the post image with it, also check snippet if you want to include the first line of your popular post. 
• Display up to: is the number of posts you want to show in this widget, you can maximally select 10 posts.

How to customize blogger popular posts? 

Now the actual part is here, by default when you add this widget, it looks pretty simple; so you can customize it with css codes. Just follow my steps to change the popular posts widget in blogger:

1. Blogger Dashboard
2. Template >> HTML >> Proceed 
3. Search for this code </b:skin> by using CTRL+F
4. Now copy below code and paste it right before/above </b:skin>

.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdaIHCeHAv7fv2jWN_7mYa9Mk2gc9OpZyayn-swk11ZTFf66xi9lHoVJLd3tN9PzRLPdTzy2Na9qDiTy-VXIo3TNhjeDIFffc0M62pm7QfVgOo1bYlVRyLBcNnkzkDDvkguKH_tJPOkxg/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:2px solid #6BB5FF;
background:#000000;
}
.popular-posts ul
  li a:hover {
  text-decoration:none;
color:#FFF8DC;
}
.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);
}

Now save your template and you've done it. View your blog and feel the great difference in the popular posts widget. After adding above code to your template your popular posts widget will be looking like below image: