Home / Start a Website / Free Popular Posts Widget For Blogger 2018
Popular posts widget for blogger 2018

Free Popular Posts Widget For Blogger 2018

Free Popular Posts Widget for Blogger

Free Popular Posts Widget is one of the most used and an important widget for every blog. You should must have popular posts widget for your blog or website to give your blog an awesome look. 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.

So let’s start how to install best free popular post widget in your blogger

How to Install Free Popular Posts Widget

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
Install Popular post widget in blogger 2018
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

Installing popular posts widget free for blogger

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.

You can search and download more popular posts widgets online but i provided you this one as this is the best free Popular posts widgets for blogger or websites that will change the look of your website completely.

Many of people use paid widgets but i would recommend you that don’t waste your money by buying it online as you can easily search and find all the best free widgets for your blog online with google search engines.

 

 

About Qayyum