How to add Elegant and Responsive Popular Post Widget to your blogspot?

Good Day Bloggers! Looking for Elegant and Responsive Popular Post Widget for your blogspot? Stop looking because you found it now. From time to time many updates to blogger widget designs have released and today I’m going to give you the codes for this widget and of course with the step by step tutorial on how to implement the code correctly.

Below are the Step by Step process on how to add the codes and the widget.

1.     Adding the Elegant and Responsive Popular Posts Widget

Go to Blog  Layout >Add Widget →>Popular Posts. Add the widget in the desired location and save the template.

Note: Check the Item Snippet and Image Thumbnail option.

2.     Adding the CSS Code to Template

Now we will add the CSS Code to your template. Go to Blog Theme and  Edit HTML. Press Ctrl + F and search for ]]></b:skin> in search box. After that, paste the code below  just above ]]></b:skin>

/* Popular Posts Widget customized by techtsismisph.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; }

Note:  Be sure to have removed all the previous Popular Posts CSS codes (if any) before adding this one or the result will be the combination of the two.

3.     Adding the Javascript Code

Usually Popular posts widget does not require any JavaScript, but this one needs in order to change the size of the popular posts images and cut short the snippet.

To add the JavaScript, search for </body> and paste the below given 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 AllBloggerTricks.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>

After adding the JavaScript code save the template.

Note: Remove the code in red if you already have it in your template.

Done. Now you and your readers can see this Elegant and Responsive Popular posts widget on your blogger blog.