How To Make Popular Posts Look Awesome

Popular post widget is the most important part of Blog. Because popular posts widget shows most popular posts of your blog to your visitors.

Follow the steps to install elegant popular posts widget for your blogger blog.

Step 1

Login to your blogger account, Go to your blogger dashboard and click on layout tab at the left side panel. Now click on add a gadget link like below picture...

Step 2

After click on add a gadget link a popup window will be open with all available gadgets. Select popular posts widget from gadget list. See below picture for more help.

Step 3

Now go to Template and click on Edit HTML button as shown in below picture.

Step 4

Now search below code with the help of CTRL + F

]]></b:skin>

Step 5

Now paste the below code just above ]]></b:skin> 

/* Popular Posts Widget customized by funisonline.blogspot.com */
.PopularPosts .item-thumbnail { display: block; height: 190px; margin: 0; overflow: hidden; position: relative; width: 100%; }
.PopularPosts .item-title { position: relative; }
.PopularPosts img { display: block; height: auto; position: absolute; width:auto; transition: all 1s ease 0s; }
.item-title a { background:rgba(0, 0, 0, 0.35); color: #FFFFFF; font-family: Impact; font-size: 17px; font-weight: 100; padding: 10px 0; position: absolute; right: 0; text-align: center; top: 30px; width: 100%; }
.item-snippet { background:rgba(0, 0, 0, 0.35); color: #FFFFFF; font-weight: 900; left: 12%; padding: 10px; position: absolute; text-align: center; top: 95px; width: 70%; }
.item-content:hover img {transform: rotate(10deg) scale(1.2);}
.item-content { position: relative; }

Step 6

Now search </body> and paste the below code just above it

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<script type='text/javascript'>
 $(document).ready(function() {$(&#39;.PopularPosts img&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s72-c&#39;, &#39;s400&#39; );});});
</script>
    <script type='text/javascript'>
    //<![CDATA[
    // Popular Posts customization by haakblog.com
    // Trim Code by MS-potilas 2012
    $('.popular-posts ul li .item-snippet').each(function(){
     var txt=$(this).text().substr(0,120);
      var j=txt.lastIndexOf(' ');
      if(j>10)
         $(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));
    });
    //]]>

    </script> 

Step 7

Now click on Save Template button and See your blog for changes !