Popular Posts Widget with Simple Hover Effect for Blogger

Popular Posts Widget with Simple Hover Effect for Blogger

Blogging Tips & Tweaks Coding & Programming Tips & Tweaks

I am basically focusing on the popular posts widget this week because of the tremendous effect it has had on my blog. As a blog owner, I have always watched my blog’s bounce rate increasing and decreasing without being steady at all. Some days it goes very high and sometimes very low but I never really gave it much attention until I realized it was really affecting my traffic. This really pissed me off because all I usually do was add links inside my post which points to other posts in the blog without paying any attention to the effects sidebar and footer widgets have on a blog.

When speaking of sidebar and footer widgets, it important for you to know that 60% of the drop in a blog’s bounce rate comes as a result of the presence of good and eye catching widgets in the sidebar and footer sections of the blog. The other 40% comes from the You Might Also Like feature that is found on most pro blogs this days and the visitor’s curiosity.

Well the focus today is on adding popular posts widget to a Blogger blog page. The popular posts widget am going to show you guys how to add today will display the post’s title and thumbnail with a lovely slide-out post summary effect on mouse hover. To add it to your Blogger blog, first of all add the default Blogger popular posts widget which can be added by following the procedure below. Simply jump to the step for adding the CSS code if you already have the default Blogger popular posts widget added to your blog.

Adding the Default Blogger Popular Posts Widget:

  • Login to your Blogger Dashboard.
  • Navigate to Layout >>> Add a Gadget.
  • On the pop-up page, locate and select Popular Posts.
  • Now make sure you tick the Image Thumbnail and Snippet box and then click on Save.

With that done, you should have appearing on your blog, the default Blogger popular posts widget which carries nothing but the post title, a thumbnail from the post and the post’s summary. To add the effect as I have mentioned above, you need to add a CSS to your blog’s template by following the steps below

Adding the CSS Code:

  • Once logged into your Blogger Dashboard.
  • Go to Template >>> Edit HTML.
  • Click anywhere inside the Edit HTML box and search for ]]></b:skin> using Ctrl + F.
  • Now copy the CSS code below and paste above/before the ]]></b:skin>
.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%}
  • Finally click on Save Template and you are done.

Enjoy!

Leave a Reply

Your email address will not be published. Required fields are marked *