Popular Posts Widget with Hover Effect for Blogger



A Popular Posts widget shows the list of most popular posts on your blog along with an image thumbnail and a snippet of the post. One can add Blogger's official Popular posts widget by Clicking on Blog Title → Layout → Add a Gadget → Popular Posts. For making this widget more attractive make sure that you have checked image thumbnail and snippet box. Blogger provides CSS for this widget in their default CSS file. We will overwrite these CSS rules and add new rules to make it even more attractive.

The widget we will add shows the Thumbnail and Post Title when page is fully loaded. When hovered over, a bouncing snippet effect takes place. You can see the demo of this widget by clicking on the below link. The popular post widget is on the right sidebar, just scroll a bit.




Procedure of adding this widget to Blogger


First of all go to Blog Title → Template → Edit HTML. Search for the tag ]]></b:skin> by pressing Ctrl + F. Add the below given code just above ]]></b:skin>

/* Popular Post Customization by AllBloggerTricks.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 AllBloggerTricks.com */

After adding the code click on Save Template. You are done. Your visitors can now see attractive Popular posts list on the sidebar of your blog.

28 comments:

  1. Can you tell me how to make popular post widget but with one picture only.. and the other posts without picture.

    ReplyDelete
    Replies
    1. Yah it can be done easily by adding simple CSS given below and adding your required style.

      [pre]
      .popular-posts ul li:first-child a {
      Add Style Here
      }[/pre]

      Delete
  2. Hello admin,
    Thanks for this valuable post. Nice code for me. This post is equally important & very wonderful resource.
    I will follow all the steps on my blog.

    Best Regards,
    ataur

    ReplyDelete
  3. Great post. I was checking constantly this blog and I’m inspired! Extremely
    useful info specifically the ultimate phase I deal with such information a
    lot. I was looking for this particular information for a long time. Thank you and best
    of
    luck.

    ReplyDelete
  4. thank you! could you please tell me how to center the text underneath the image on the popular posts?
    www.lucydesignsonline.com

    ReplyDelete
  5. hi,
    great post and very cool hover effect.

    i've add it to my blog, but somehow the hover effect is not appearing. have idea on what i have to check? is it related to the template i'm using?

    ReplyDelete
  6. Hey, Thanks for sharing this useful article and this wonderful widget code, Successfully implemented and looking cool, keep sharing stuff like this

    ReplyDelete
  7. thanks Admin for sharing very Excellent work

    ReplyDelete
  8. Nyc Thanks http://pclabe.blogspot.com/

    ReplyDelete
  9. Wow. this is a really awesome blogger widget. I would love to use it on my blog. You are really doing a great job of providing blogger tricks. I really enjoy your posts. Keep posting.

    ReplyDelete
  10. Will use it on my blog for sure.

    ReplyDelete
  11. I think this code is essential for blogging. I am taking help from here.Thanks a lot.

    ReplyDelete
  12. very helpful post brother. i like it

    ReplyDelete
  13. related pos not worked ..just a link :)

    ReplyDelete
  14. Don't know, if you can help me, but I'm gonna try to explain my problem:
    I've had my perfect popular posts widget with 5 pics to click, vertically on the right sidebar and then delete it because didn't like it anymore, so stupid, I know!
    And now try to get the same popular posts back easily created by the standard gadget of blogger.
    It worked out but the pics look now now terrible, a kind of pixilated and a little bit bigger than before... Do you know whst I mean?

    Please help! :-(

    ReplyDelete
    Replies
    1. Just add the following code in your blog -
      [pre]

      <script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
      <script type='text/javascript'>
      $(document).ready(function() {$(&#39;.PopularPosts img&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s300-c&#39;, &#39;s400&#39; );});});
      </script>

      [/pre]

      Delete
  15. Hello, this is just an amazing techy article, thanks I was looking for such blog which shares technical blog posts

    ReplyDelete
  16. These popular posts widgets are really awesome and is helpful for increasing pages views on our site with more time spend by the visitor also.

    ReplyDelete
  17. This has worked great at my site for several month, but lately it is only displaying 7 posts. I have not changed anything and it is still set to display 10 posts. Any idea why this is?

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

    ReplyDelete
  19. Bro can we convert any wp theme to blogger template ? Any solution, this wp theme>http://satside.com/

    ReplyDelete
  20. Thanks for your amazing blog posts, thanks I will definitely try your widget

    ReplyDelete
  21. Thank sir, i am gonna try on my site, is there any email support sir?

    https://servershosting.cloud

    ReplyDelete
  22. thnks for share. keep up bro.

    ReplyDelete