Customize Popular Posts Widget in Blogger with CSS3

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/AVvXsEgdr3kMyUu8QDWxP1rp4dH3ESof7ELn-LKXJmuQk52Eb1BUE3ZpX2CumIabGs3ErcI-NlhhN5x_7AzJwLu6M0N1VOnzTPH7KogpNjQZbaZCaOVUvbMrdbPlHKeMIE7QhBJ5RzcY9B1DNIo/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.