Add Elegant Popular Post Widget For Blogger

Click Below Ad for Leaning Blogging Tricks.

Next Blogger Tricks

Hello Friend Today I am Posting Unique & Amazing Popular Post widget for Bloggers its called Beautiful and Elegant widget.
So the Widget i am going today look quite and different form the rest of collections.
You can See the Proof of Beautiful Elegant Popular Post In Blogspot.
Click the Live Demo Button To see this Widget.

How To Add Elegant Popular Post Widget in Blogger:-

1. Go To Blogger Dashbord
2. Click On Layout
3. Add Widget of Popular Posts
4. Add This Widget in Desired Place 
5. Save The Widget

Remember to check the snippet and Image Thumbnail option.

Adding the CSS (Cascading Style Sheet):-

Now you have add the CSS of the Popular Posts Widget:-

1. Go to Blogger Dashboard 
2. Click On Template
3. Clock on edit HTML
4. Press Keys (Ctrl+F) And Find this Code
5. ]]></b:skin>
6. After You Seen this code
7. just Paste Given Code in Blue Font before the ]]></b:skin>

<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 softwayrko.blogspot.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>

Note:-Also removed the previous Popular Posts CSS  Codes if any befor adding this code.

Adding JavaScript:-
Default  Popular Posts widget do not require any JavaScript,but This Widget Require for resize the Popular Posts image and cut short the snippet.

How To Add JavaScript:-

1. Find </body> tag in your template.
2. Copy the Following code before the </body>

<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 softwayrko.blogspot.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>