Popular Posts Widget with Hover Effect for Blogger

Posted On // 28 comments

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.


Parallel Blog Author
2 May 2013 at 09:20

good one. you created?

Daniel Author
3 July 2013 at 14:54

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

Dhiraj Author
3 July 2013 at 17:14

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

.popular-posts ul li:first-child a {
Add Style Here

Ujjwal Sen Author
20 July 2013 at 22:01

Good blog, Keep blogging.

Anonymous Author
22 August 2013 at 08:23

Really Good.

ataur Author
27 August 2013 at 08:33

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,

16 September 2013 at 22:33

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

Rohit Mewada Author
20 October 2013 at 02:30

Grate Post with New Idea.

21 October 2013 at 00:12

thank you! could you please tell me how to center the text underneath the image on the popular posts?

admin Author
6 November 2013 at 07:53

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?

17 December 2013 at 14:19

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

Rajasthan Author
22 January 2014 at 12:50

thanks Admin for sharing very Excellent work

Unknown Author
3 February 2014 at 13:24

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

Jobs Author
19 February 2014 at 16:18

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.

Rahul Author
22 March 2014 at 15:12

Will use it on my blog for sure.

16 April 2014 at 22:44

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

ictw9 Author
1 October 2014 at 23:13

very helpful post brother. i like it

saifulfaizan Author
23 October 2014 at 21:23

related pos not worked ..just a link :)

Anonymous Author
24 October 2014 at 14:08

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! :-(

Dhiraj Author
25 October 2014 at 21:09

Just add the following code in your blog -

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


14 December 2014 at 22:12

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

Gautam Author
15 April 2015 at 17:28

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.

Chris Charles Author
19 July 2015 at 23:03

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?

sujon007bd Author
15 September 2015 at 16:27

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

Unknown Author
17 October 2015 at 08:41

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

24 October 2015 at 08:42

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

Unknown Author
16 January 2017 at 17:33

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


Akash Author
10 April 2017 at 12:48

thnks for share. keep up bro.


Post a comment

Please do not spam here. All comments will be moderated.
Don't You Think this Awesome Post should be shared ??
| Popular Posts Widget with Hover Effect for Blogger |