Attractive Popular Posts Widget for Blogger

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

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 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;}