How To Add Colorful Popular Post Widget With Hover Effect

Hello Folks,Today we are going to explore another popular post widget which definitely suits your blog or website niche.In previous post we have talked about How to Add Five Star  Rating Popular Post Widget and today we are here with awesome colorful gadget.However it took some time to made but finally we are here with this beautiful popular post widget.You can Look below for example and demo how this popular post tool looks:

After watching the above example i'm damn sure you guys are really curious to know ;).Colorful Popular widget comes with 2 features.First features is that you can see color with post when you hover on the post color change and it change to white.And Second feature is without the hover colors that means without the color effect ,if will look simple if there is no color effect.i'm sure you will definitely add color with this gadget.Adding popular post widget in blogger template is a best way to keep engage your visitors with your website or blogs other content.and you can see in this widget there we have provided a number system means the post is most popular get ranked 1st next so on.We have used CSS and Java script for this widget.below i will show you how to add this colorful popular post widget in blogspot template.To grab this gadget follow the steps mentioned below.

How To Add Colorful Popular post gadget with number system and hover effect

installation steps:

Step .1 Go to https://www.blogger.com and Sign in to your account.

Step .2 Now From Blogger Dashboard click on ->Template ->Edit HTML.
Step .3 Now Search For ]]></b:skin> or </style> tag In Your Template By Using CTRL+F or CMD+F Keys.
Step .4 Now Copy the below CSS code and paste it just above of ]]></b:skin> or </style> tag.

/* Colorful Popular Posts Widget By www.BloggersStanD.com */
.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;counter-reset:count;}
.PopularPosts .widget-content ul li{position:relative;padding:10px 0;overflow:hidden;max-height:100px;transition:all .4s;}
.PopularPosts .widget-content ul li:before{color:#fff;counter-increment:count;content:counter(count);position:absolute;right:-15px;top:-5px;font:bold 80px/1 Sans-Serif;z-index:51;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);}

Step .5 Now Search For Closing </body> tag and paste the below Java Script code just above the </body> tag.

<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>

Customization: 

• To Remove the Background color effect delete the highlighted code from the above CSS.

Step .6  Now Save Your Template..Done !

How To Add Popular Post Widget Inside The Template

Go to your Dashboard and click on -> Layout and Now click on Add a Gadget and Select Popular Post Widget. Now Click on last 7 days post and image thumbnail , post snippet and after that click on save button.look below for example.