New Stylish Popular Post Widget for Blogger

Popular post widgets are terribly very helpful for blogging. As a result, it attracts the reader to check those popular article easily. Recently, I added up New Numbered Popular Post device for blogger.  By attracting the users the blog traffic are accrued. Today I’m here to share one awesome widget for blogger. It’s just like the the old Numbered Popular Post widget. But, here in this widget you can’t able to see the Numbers. Only Images, Titles and snippets. This Widget is makeup-ed with CSS3. Lets add this impact to blogger by following my straightforward instruction given below.

New Stylish Popular Post Widget for Blogger

You can take a live demo on my Popular Post widget place at the right sidebar. Like this you can make your ugly popular post widget into an Stylish one. And, I have named this widget as “Stylish Popular Post Widget“. This widget is totally free to use. While not the assistance of JavaScript this popular post widget was created. I already mentioned that popular posts plugins is a good tool to extend your blog’s traffic further as page views. With the assistance of popular post widget you’ll be able to get a lot of internal traffic for your blog. Let’s see how to install this awesome and stylish Popular post widget to your blog.

Live Demo at Right Sidebar  →

Adding Popular Posts Widget

  • Go to Blogger >> Layout
  • Click “Add a Gadget” >> And Choose “Popular Posts” 
  • In that pop up page you need to un-check the “image thumbnail” and also “snippet”.
  • Then Choose your number of post to be published and Save it!

Adding Style to Popular Post Widget

  • Go To Blogger >> Template and Backup your Template.
  • Now, click “Edit HTML”
  • Now search for </b:skin> by pressing Ctrl +F.
  • Then paste the following code given bellow just Above/ Before </b:skin>

/*— Stylish Popular Posts Widget — */

.PopularPosts img {
margin-top: -20px;
-webkit-transition: .4s;
-moz-transition: .4s;
-o-transition: .4s;
}
.PopularPosts .item-thumbnail {
height: 80px;
overflow: hidden;
margin-right:0;
}
.PopularPosts .widget-content ul li {
padding: 0;
background: #eee;
margin: 10px 0px;
border:0;
-webkit-transition: .4s;
-moz-transition: .4s;
-o-transition: .4s;
}
.PopularPosts .item-snippet {
padding: 0 5px 5px;
}
.PopularPosts .item-title {
padding: 0 5px;
}
.PopularPosts .widget-content ul li:hover {
background: #3E85F0;
}
.PopularPosts .widget-content ul li:hover .item-snippet {
color: #fff;
}
.PopularPosts .widget-content ul li:hover .item-title a {
color: #fff;
}
.PopularPosts ul li:hover .item-thumbnail img {
margin-top: -120px;
}

  • Then add the following code just Above/ Before </body> in your template.

<!– Stylish Popular Post Widget –>
<script type=’text/javascript’>
    //<![CDATA[
    var newSize = 290;
    $(“.popular-posts .item-thumbnail img”).each(function() {
        var oldSize = $(this).attr(“width”);
        $(this).attr(“width”, newSize); $(this).attr(“height”, newSize);
        $(this).attr(“src”, $(this).attr(“src”).replace(“/s”+oldSize+”-c/”, “/s”+newSize+”-c/”));
    });
    //]]>
</script>

  • If you don’t have jQuery then add the following code just Above/ Before </head>

<script src=’http://code.jquery.com/jquery-latest.js’ type=’text/javascript’></script>

  • After doing all the steps, just hit the Save Template button and check your blog.
  • Enjoy dudes!


I hope your popular post widget is so Awesome than the previous one. I hope you have like this widget. Kindly share this article with your friends and share your previous views in comments. If you have got any problems then make us to know it in comments below.

About Harshit Jain

Harshit Jain is a tech-savvy blogger. He is graduated from Mumbai University. He likes to share his knowledge through his own blog at TripoSoft, Best Beard Trimmer, Best Electric Toothbrush & TechHug as well as by writing guest articles on other blogging sites. Follow him on Facebook, Google+, Twitter.

Leave a Reply

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

CommentLuv badge

This site uses Akismet to reduce spam. Learn how your comment data is processed.