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.
good one. you created?
ReplyDeleteCan you tell me how to make popular post widget but with one picture only.. and the other posts without picture.
ReplyDeleteYah it can be done easily by adding simple CSS given below and adding your required style.
Delete[pre]
.popular-posts ul li:first-child a {
Add Style Here
}[/pre]
Good blog, Keep blogging.
ReplyDeleteReally Good.
ReplyDeleteHello admin,
ReplyDeleteThanks 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
Great post. I was checking constantly this blog and I’m inspired! Extremely
ReplyDeleteuseful 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.
Grate Post with New Idea.
ReplyDeletethank you! could you please tell me how to center the text underneath the image on the popular posts?
ReplyDeletewww.lucydesignsonline.com
hi,
ReplyDeletegreat 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?
Hey, Thanks for sharing this useful article and this wonderful widget code, Successfully implemented and looking cool, keep sharing stuff like this
ReplyDeletethanks Admin for sharing very Excellent work
ReplyDeleteNyc Thanks http://pclabe.blogspot.com/
ReplyDeleteWow. 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.
ReplyDeleteWill use it on my blog for sure.
ReplyDeleteI think this code is essential for blogging. I am taking help from here.Thanks a lot.
ReplyDeletevery helpful post brother. i like it
ReplyDeleterelated pos not worked ..just a link :)
ReplyDeleteDon't know, if you can help me, but I'm gonna try to explain my problem:
ReplyDeleteI'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! :-(
Just add the following code in your blog -
Delete[pre]
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {$('.PopularPosts img').attr('src', function(i, src) {return src.replace( 's300-c', 's400' );});});
</script>
[/pre]
Hello, this is just an amazing techy article, thanks I was looking for such blog which shares technical blog posts
ReplyDeleteThese popular posts widgets are really awesome and is helpful for increasing pages views on our site with more time spend by the visitor also.
ReplyDeleteThis 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?
ReplyDeleteHello Dear,
ReplyDeleteThank You very much for this nice post. This is a great help for me. And it worked well for me.
THANKS
Bro can we convert any wp theme to blogger template ? Any solution, this wp theme>http://satside.com/
ReplyDeleteThanks for your amazing blog posts, thanks I will definitely try your widget
ReplyDeleteThank sir, i am gonna try on my site, is there any email support sir?
ReplyDeletehttps://servershosting.cloud
thnks for share. keep up bro.
ReplyDelete