Stylish Popular Posts Widget With Round Thumbnails for Blogger

In this post we are discussing about the most used widget and we found it on at most blog i.e. Popular Posts widget. We know that the popular post widget by default has ugly looks that can give bad effect to your visitors. We need this widget to show our visitors the most popular posts of our blog so that they also can visit them and this widget is very important for us. So by adding chunk of coding to our blogger template we can make our popular posts widget more professional that looks the post's short description with our blog default font along with a round post thumbnails. Here we are making our popular posts widget a masterpiece so that it can attracts the attention of all visitors. So if you wants this professional looking widget go ahead and start rolling your fingers on the tutorial.

How to Add this Widget:

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 All time or what you wants.
  • 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. You can choose at most 10 posts.
  1. Save the widget.
  2. Now go to Blogger > Template
  3. Backup your template to prevent it from any crash.
  4. Edit HTML > Proceed
  5. Search ]]></b:skin>
  6. Now just above ]]></b:skin> paste the following code:

  7. /*--- MyBloggerBuzz.Com --- */
    .popular-posts ul{padding-left:0px;}
    .popular-posts ul li {background: #FFF url(  no-repeat scroll 5px 10px;
      list-style-type: none;
      margin:0 0 5px 0px;
      padding:5px 5px 5px 20px !important;
      border: 1px solid #ddd;
    .popular-posts ul
      li:hover {
      border:1px solid #6BB5FF;
    .popular-posts ul
      li a:hover {
    .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);

  8. Save your template.
  9. Done!
Now visit your blog and check this stylish and fancy popular posts plugin in your blog sidebar.

Final Words: 

I hope you successfully added this widget in your blog. If you face any difficulty regarding this or wants to share your views use the comment box. Keep sharing this post with your friends till then Peace, Blessings and Happy Blogging! 

No comments:

Post a Comment