HOW to customize a nice POPULARE POSTS widget

Hello and wellcome to Blogger Tricks , today i will show you how to costumez a nice populare poste widget with your prefered colors

*So first you have to backup your template  in case you mist up with something , for that go to template and  download  your template backup in your PC.

And then :

1) Go to template >edit html

2) Click  in the code area and    CTRL  +   F    to apear the search button

3) Search for this word   ]]></b :skin>    or </style >   and than copy and past this code just above it :

<!-- populare poste --> /* 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;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);} <!-- /populare poste -->

If you don’t want the colures to be showing you can delit the codes in BLUE

4)After that  Search for this code  </body> and then copy and past this code just above that :

<!-- populare poste --> <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>     <!-- /populare poste -->

5) Save the template and enjoy !