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.