Sexy Popular Posts Widget For Blogger

How to add a sexy popular post widget into blogger blog - As you guys already know that, every blogger loves to show their popular articles with the help of a popular post widget. And at this present time, there is so many stylish and dynamic popular post widgets are available on the web. But the actual problem is that every widget is old and you can see the same widget on too many blogs. 

So if you are not the same blogger like others (e.g who don't like to display the same widget on his blog) and you want to make your blog unique and sexy by adding some new widgets on your blog, then here is a good news for you. Yes, today with the help of this post I'm going to show you how you can easily setup a colored popular post widget with mouse hover effect for your blog without having any problems.

Before adding this widget to your blog, make sure to take a look of this widget by clicking on the below demo button.

Live Demo

If you like this widget and you want to install into your own blog then follow the below simple steps.

First of all, go to your blogger dashboard, then go to Layout section. And add a popular post gadget to your blog. Then go to "Template" section and then click on the "Edit HTML" button.

After that, find the below code by pressing "Ctrl + F" key together from your keyboard.

]]></b:skin>

Now copy the below CSS code and paste it just before ]]></b:skin>

/* Sexy Popular Posts */
.PopularPosts .item-thumbnail{float:none;margin:0 0 10px}
.PopularPosts .item-title{background:rgba(0,0,0,0.5);position:absolute;display:block;clear:both;z-index:50;top:0;left:0;right:0;bottom:0;padding:15px;transition:all .4s;}
.PopularPosts .item-title:hover{background:rgba(0,0,0,.2)}
.PopularPosts .item-title a{color:rgba(255,255,255,0);font-weight:700;font-size:120%;text-shadow:0 0 5px rgba(0,0,0,0)}
.PopularPosts .item-title:hover a,.PopularPosts .item-title a:hover{color:rgba(255,255,255,1);text-shadow:0 0 5px rgba(0,0,0,.3)}
.PopularPosts .widget-content ul li img{translate(0,0) scale(1.0);transition:all .8s linear}
.PopularPosts .widget-content ul li:hover img{transform:translate(0,-20px) scale(1.05);transition:all 3.6s linear;}
.PopularPosts img{display:block;height:auto;width:100%;padding:0;backface-visibility:hidden;}
.PopularPosts .item-snippet{display:none;}
.PopularPosts ul li .item-content{position:relative;overflow:hidden;}
.PopularPosts ul{padding:0;line-height:normal;}
.PopularPosts .widget-content ul li{position:relative;padding:10px 0;overflow:hidden;max-height:70px;transition:all .4s;}
.PopularPosts .widget-content ul li:hover:before{right:-55px;}
.PopularPosts ul li:nth-child(1) .item-title {background:rgba(221,25,29,0.5);}
.PopularPosts ul li:nth-child(2) .item-title {background:rgba(141,187,144,0.5);}
.PopularPosts ul li:nth-child(3) .item-title {background:rgba(39,169,255,0.5);}
.PopularPosts ul li:nth-child(4) .item-title {background:rgba(192,202,51,0.5);}
.PopularPosts ul li:nth-child(5) .item-title {background:rgba(26,35,126,0.5);}
.PopularPosts ul li:nth-child(6) .item-title {background:rgba(0,188,212,0.5);}
.PopularPosts ul li:nth-child(1) .item-title:hover,.PopularPosts ul li:nth-child(2) .item-title:hover,.PopularPosts ul li:nth-child(3) .item-title:hover,.PopularPosts ul li:nth-child(4) .item-title:hover,.PopularPosts ul li:nth-child(5) .item-title:hover,.PopularPosts ul li:nth-child(6) .item-title:hover{background:rgba(0,0,0,0.2);}

Once again find the below code.

</body>

After that, copy the below JavaScript code and paste it just before </body>

<script type='text/javascript'>
// Popular Post Thumb
$(document).ready(function() {$(&#39;.PopularPosts img&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s72-c&#39;, &#39;s400&#39; );});});
//<![CDATA[
// Custom Popular Post
$(".popular-posts ul li .item-snippet").each(function(){var t=$(this).text().substr(0,120),s=t.lastIndexOf(" ");s>10&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))});
//]]>
</script>

Now click on the orange save template button to apply the changes.

That's it! I hope you like this widget! Stay tuned for more dynamic widgets! Thanks for reading!