Popular Posts Widget
The Popular Posts Widget is one of the most useful widgets that Google Blogger provides. It contains the list of the most viewed posts on our blog within a specific time range. So Popular Posts Widget is suitable in providing our visitors the list of all posts that are exceptional in getting page views this week, months or in all time history. It is something like we are feeding our visitors (especially new visitors) the nutritious contents that our blog had.

The most important reason why we should put this Popular Posts Widget is to minimize the bounce rate of our blog. Visitors might leave our blog when they are already got the information they need. So by providing this kind of widget we are offering more articles that are useful to them and through that visitors will stay longer on our blog.

Adding the Popular Posts Widget to Blogger Blog

  • Go to your Blogger dashboard
  • Navigate to Layout
  • Add a Gadget
  • Select the Popular Posts Widget from the list
You may also read: Adding Simple Related Post Widget on Blogger Blog

By default, Blogger allows you to choose whether you put a snippet and thumbnail on this widget which is good at blending a design for a specific blog. In adding the Popular Posts Widget, it is important to configure the right settings available on it to make it work the way it should be. Refer to the image below.

Popular Posts's Setting

Popular Posts Widget with Hover Effect

After adding the Popular Posts Widget on your blog, now it’s time to customize and add some effects to it. In this case we used hover effect and we add shadow around it which makes the Popular Posts Widget attractive to our readers.
  • Go back to Blogger dashboard
  • Edit HTML
  • Using the CTRL+F, find this code]]></b:skin>.
  • Then just above the code, copy and paste the following codes provided below. After that Save your blogger template.

Note: Their might be already a CSS codes of your Popular Posts Widget inside your template. The main CSS class id of Popular Post Widget is something like this: .PopularPosts. To avoid some possible errors try to delete all codes having this kind of class id before pasting the codes provided below.
.PopularPosts .item-title{font-weight:bold;padding-bottom:0.2em;text-shadow:0px 1px 0px #fff;}
.PopularPosts .widget-content ul li{padding:0.7em 0;background:none}
.PopularPosts img{border: 2px solid #FFF;border-radius: 10px;-webkit-border-radius: 10px;-moz-border-radius: 10px;-o-border-radius: 10px;padding-right: 0em;height: 5.4em;width: 5.6em;box-shadow: 0px 0px 6px rgba(14, 21, 34, 1);-webkit-transition: all 0.5s ease;}
.PopularPosts img:hover {-webkit-transform: rotate(360deg);}
.PopularPosts .item-thumbnail {margin: 0 5px 0px 5px;}


  1. Aires, can it be implemented in wordpress blog?

    1. Good day Charles;
      Thanks for asking this one. The following widget is for a Blogger blog only and it can't be use on wordpress blog. Sorry for that.

  2. Hello Dear,
    Thank You very much for this nice post. This is a great help for me. And it worked well for me.

  3. Popular Post Widget is really attractive. Nice one.

  4. Really like this. However it quit working for me so I have started over & now I cannot get the images to appear at all. Any ideas as to what the issue may be? Thanks!!!


NOTE - Every input is always appreciated. However, comments are always reviewed and it may take some time to appear. Always keep in mind URL without nofollow tag will consider a spam.