How To Add Popular Posts Widget To Blogger Blog

First we need to add default popular posts widget into our blog. Perform the following simple steps to add it.

1. Go to Blogger > Layout.


2. Click on Add a gadget link and choose popular posts gadget from the gadgets list.


3. Now make following settings

• Set most viewed to Last 7 days
• Check image thumbnail and snippet to show thumbnail along with post summary. It will make our gadget spicier.
• Select no. of posts you want to show. In this example I am selecting 5. You can show at most 10 posts.

4. Save the widget.
5. Now go to Blogger > Template
6. Backup your template to prevent it from any crash.
7. Edit HTML > Proceed
8. Search ]]></b:skin>
9. Now replace it with the following code:


/*--- BloggerTipsTricks --- */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCLYxZ13dAvQlTwkA4wyKQRsJa93fiYXhvWx67XMZSnsM3tMJ2eYQS_ocdh2KhTquZYlUQzbBd4FHUr_xpWuQ7jzMGiSAj2MMr49TNhGbkzjue-sewV0tcEm2IK2r8YsOTdcluMKcpmEk/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);
}
]]></b:skin>
10. Save your template.
11. Done!

Now visit your blog and check this fancy popular posts plugin in your blog sidebar.