Inactive blog. If you need anything, contact me : lloydalemania@gmail.com Hire me

Stylish Popular Posts Widget For Blogger

Introduction

Popular Posts widget displays the most viewed or popular posts in your blog, however the default style isn't aesthetic enough to attract clicks or visits from your audience that's why I design a Stylish Popular Posts Widget that is without a doubt - stunning. With the use of some CSS I made the default style of popular posts a lot more beautiful.

External Scripts

Jquery Library v1.11.0 or higher (?)

HTML

Go to Blogger » Template » Backup your Template » and Edit HTML
 Now Search and Look for <!-- (4) Show snippets and thumbnails -->
 You will find similar to this

 Change the highlighted code with this code
<div class='item-st'>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
<div id='popularbutton'><div class='mbabuttons2 mbabutton mbabuttonred'>Read More</div></div>
</div>
 And should look like this

CSS

 Now copy the following code and paste it before ]]></b:skin>
.PopularPosts .widget-content{background:#222}.PopularPosts .widget-content ul li .item-thumbnail img{position:relative;background:#fff;padding:10px;width:310px;height:100%}.PopularPosts .widget-content ul li .item-st{-webkit-box-sizing:border-box;-moz-box-sizing: border-box;box-sizing: border-box;position:absolute;background:#222;border:10px solid #fff;padding:20px;width:250px;bottom:1px;left:30px}.PopularPosts .widget-content ul li{position:relative;height:350px;font-family:'Maven Pro',sans-serif}.PopularPosts .widget-content ul li .item-title a{color:#fff;text-align:center;font-size:20px;text-decoration:none;text-transform:capitalize}.PopularPosts .widget-content ul li .item-title{text-align:center}.PopularPosts .widget-content ul li .item-snippet{text-align:justify;font-size:14px}#popularbutton{width:120px;margin:0 auto}.mbabuttons2{width:120px;height:38px;line-height:38px}.mbabutton{position:relative;font-size:17px;color:#fff;text-align:center;text-shadow:1px 1px 1px #99353e}.mbabuttonred{border:0;background:#ed5564;border-bottom:1px solid #bf424d;border-radius:3px;cursor:pointer;-webkit-box-shadow:inset 0 -1px #bf424d;-moz-box-shadow:inset 0 -1px #bf424d;box-shadow:inset 0 -1px #bf424d}

JScript

 Search and Look for </body> and paste the following code before it
<script type='text/javascript'>
//<![CDATA[
var newSize = 400;  // this is the new thumbnail size, you can change this
$(".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>
 Save your Template

Final Words

 We have set the maximum width of the image to 310px and maximum width of the post title and snippet to 250px, just adjust them to fit your need.

So that's it for today, hope you find this Stylish Popular posts widget helpful.

24 comments

  1. These widget are very good. I used it on Electrical Objective Question blog.

    Thanks admin.

    ReplyDelete
  2. Really Awsome turorial! im using it, for sure!

    ReplyDelete
  3. Hi i like this but not working correctly please see at http://megotit.blogspot.com/
    what should i do ?

    ReplyDelete
    Replies
    1. Hi friend! Go to Blogger > Layout > then click Edit on the POPULAR POST widget > check image thumbnail and uncheck snippet then SAVE. Hope this works :)

      Delete
  4. Thanks for this tip!! love learning more about blogger!
    Take look at Blogger Tips and Tricks

    ReplyDelete
  5. Hello! This doesn't really have anything to do with your code, but I was hoping you could take a look at my blog and help me figure out why there's a space in between the TITLE of the post and SNIPPET of the post on the Trending Posts widget.

    http://cheersisabelle.blogspot.kr/

    Thank you in advance~!

    ReplyDelete
    Replies
    1. i dont mind even if it doesnt have anything to do with my post, just leaving your comment is enough :) ok so here's what i found in your blog :

      https://www.blogger.com/static/v1/widgets/2674880080-widget_css_2_bundle.css

      the URL above contains a CSS that adds a padding to .item-title, so to solve this just add :

      .item-title{padding-bottom:0}

      before ]]></b:skin> , that's it! i hope it solved your problem :)

      Delete
    2. Unfortunately that didn't work :( For some reason, the space only occurs when I edit the code to make the title bold and p=align left, and the snippet to p=align justify. When I remove those codes, the space disappears! How odd!

      Do you know what could be the problem here? If not, thanks for trying and for being such a great resource! :)

      Delete
  6. And one more thing On mobile view this doesnt seem to be compact, so any code to make that possible? Please!!

    ReplyDelete
    Replies
    1. Hi Nihal Latheef! For it to happen you need to add some code to adjust it's width/s and height/s when viewing on mobile or you can set the width/s and height/s to %. Send me the link of your blog so I can help you further. :)

      Delete
  7. You're welcome! Please keep on visiting, THANK YOU :)

    ReplyDelete
  8. :) Awesome Article
    ..
    http://theviralbytes.com

    ReplyDelete
  9. Thanks alot.you really helped my blog http://www.gigsk.com/

    ReplyDelete
  10. where i can see the final result of this tutorial?

    ReplyDelete
  11. You share nice tutorial related blog, which give me some good ideas in creating my own blog, For More Popular Posts widgets you can
    Visit my blog here

    ReplyDelete

[default]

mba-1

[enabled]

521946774841758

Mailing List

Sign up with your email address to receive news and updates straight in your inbox.