How To Add Together Colorful Pop Transportation Service Widget Amongst Hover Effect

Hello Folks,Today nosotros are going to explore roughly other pop post service widget which definitely suits your weblog or website niche.In previous post service nosotros convey talked well-nigh How to Add Five Star  Rating Popular Post Widget together with today nosotros are hither amongst awesome colorful gadget.However it took roughly fourth dimension to made but finally nosotros are hither amongst this beautiful pop post service widget.You tin dismiss Look below for instance together with demo how this pop post service tool looks:

After watching the higher upward instance i'm damn certain you lot guys are actually curious to know ;).Colorful Popular widget comes amongst ii features.First features is that you lot tin dismiss come across color amongst post service when you lot hover on the post service color alter together with it alter to white.And Second characteristic is without the hover colors that agency without the color lawsuit ,if volition hold back unproblematic if in that location is no color effect.i'm certain you lot volition definitely add together color amongst this gadget.Adding pop post service widget inwards blogger template is a best way to pop off along engage your visitors amongst your website or blogs other content.and you lot tin dismiss come across inwards this widget in that location nosotros convey provided a set out organization agency the post service is most pop larn ranked 1st adjacent together with thus on.We convey used CSS together with Java script for this widget.below i volition exhibit you lot how to add together this colorful pop post service widget inwards blogspot template.To catch this gadget follow the steps mentioned below.

How To Add Colorful Popular post service gadget amongst set out organization together with hover effect

installation steps:

Step .1 Go to https://www.blogger.com and Sign inwards 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 together with glue it but higher upward 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 together with glue the below Java Script code but higher upward 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 lawsuit delete the highlighted code from the higher upward CSS.

Step .6  Now Save Your Template..Done !

How To Add Popular Post Widget Inside The Template

Go to your Dashboard together with click on -> Layout and Now click on Add a Gadget together with Select Popular Post Widget. Now Click on last seven days post service together with icon thumbnail , post service snippet together with later on that click on relieve button.look below for example.