Popular Posts Widget With Hover Effect For Blogger

Popular Posts Widget With Hover Effect For Blogger: This is a Popular Posts widget with simple hover effect.

Blogger comes with a popular post widget which can be installed in the Layout section of your blog.

While this is helpful in displaying your popular posts, this widget has no animated, hover or sliding effect and will require some customizations with CSS and JavaScript before this effect can be implemented.

On the other hand,

This means that the widget if used, will be placed at a static corner of your blog, and if not placed at the visible part, a lesser number of your blog visitors will see it.


Why Use a Popular Post Widget on Blogger

  • The purpose of using a popular post widget on blogger is to interlink internal posts on your blog as well as get more clicks on posts on this widget.

Interlinking of blog posts is helpful in SEO, as it makes your site have an interface that is easy to navigate since visitors can easily locate posts on the blog.

The posts displayed are constantly refreshed on a daily, weekly, monthly, or yearly basis depending on which settings you apply, allowing for newer content to be displayed on the widget.

In terms of increasing the pageviews on your blog,

You will agree with me that people tend to click on posts that are trending on the Google webpages, Blogs, Websites, Twitter, and Facebook because it'll most likely interest them and be informative.

It is also a fact that a Post won't go viral if its content is meaningless or searches for it are not currently trending on Google, Bing, Yahoo, Yandex, and other search engines.

Why You Should Use Popular Post with Hover Effect on Blogger


How can you make more visitors on your site click on the most trending posts on your blog?

By using this customized popular post blogger widget that has an animated effect to capture the users' attention once they visit your blog.

Irrespective of the location this widget is placed on your blog, whether by the side layout or below pages, the slight movement of the widget easily gets their attention compared to a static blogger widget.


The number of clicks to be gotten on posts shown on this widget is not limited to the location it is placed on your blog because of the widget's eye-catching hover effect.

Also Read:  Numbered Page Navigation Widget For Blogger Blogs
                   Most Commented Posts Widget For Blogger With Thumbnails
                    Stylish Popular Post Widget For Blogger

Popular Post Widget with Simple Hover Effect

Here's one of blogger widget you should try out because you'll love the result.

This popular post widget shows the Thumbnail and Post title when the page is fully loaded.

When hovered over, a bouncing snippet effect takes place.

1. To Add this popular post gadget to your blog,

  • Goto your blogger dashboard, 
  • Click on 'Layout'
  • Select 'Add A Gadget'.
  • Choose the popular Post widget
  • Before saving, tick the 'Snippet' and 'Image Thumbnail' options.

2. Goto your blogger template,

  • click on 'edit html'
  • using ctrl+f search for ]]></b:skin> 
  • copy this code below  and paste just 'above' ]]></b:skin>

/* Popular Post Customization by techlass.com */
.PopularPosts .widget-content ul li{padding:0;position:relative}
.item-snippet {font-size: 90%;line-height: 1.2em;position: absolute;width: 230px;background-color: whiteSmoke;padding: 7px;border-top: 2px solid #FF0202;z-index: 2;left: 300px;top: 60%;height: 4.5em!important;visibility: hidden;opacity: 0;transition: all 0.6s cubic-bezier(1,2,0,0) 0s;-moz-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;-webkit-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;-o-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;}
.PopularPosts .widget-content ul li:hover .item-snippet{left:60px;opacity:1;visibility:visible}
.PopularPosts img{width:50px;height:50px}
.PopularPosts .item-title{font-family:'Open Sans Condensed',"Arial Narrow",Arial,sans-serif;font-size:125%}
/* Popular Post Customization by techlass.com */


Note that you will not see the effect of this popular post widget if you already have a customized popular post widget on your blog.

Some custom blogger templates already feature a popular post widget, hence it might not work on them.

Only blogs using the default gadget will see a change with the hover effect.

Did you encounter problems while installing this widget on blogger?


Did it work for you?

Let's us know by leaving a comment.

Also Read:   Sliding Recent Posts Blogger Widget 2016
                    Social Media Follow Buttons Widget For Blogger
                    Email Subscription Widget For Blogger
                  10+ Best Blogger Tips and Tricks
                  Link to This Post Widget For Blogger


Tech blogger, SEO expert, cryptocurrency enthusiast, and freelancer are the terms that describe me. I'll rather write a thousand words than speak hundred words, and that describes my passion as a content creator.