Beautiful Popular post For blogger widget 2014

Ever wanted a really Beautiful Popular post For blogger widget 2014  for your blogger blog? If yes, then you have landed on the right place. Today I am back with yet another unique and amazingly looking popular posts widget customization.

I already new popular post widget published now,so check it now,

Numbered Popular Posts Widget for Blogger 2014

smooth facebook floating sidebar widget blogger

                            Live Demo

Once you have seen the demo, to add the Popular posts customized widget follow the given steps.


Adding the Popular Posts Widget
Firstly go to Blog Title → Layout → Add Widget → Popular Posts. Add the widget in the desired location and save the template.
Remember to check the Item Snippet and Image Thumbnail option.


Adding the CSS
Now we have to add the CSS of the Popular Posts customized widget, for this go to Blog Title → Template → Edit HTML. Press Ctrl + F and search for ]]></b:skin> in search box. After getting the code add the below given code just above ]]></b:skin>

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

After adding the code save your template. Your are done now. Now you and your visitors can see this cool Popular Post widget on your blog.

Adding the JS

Usually Popular posts widget do not require any JavaScript, but this one needs in order to resize the popular posts image and cut short the snippet.
To add the JS, 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 code save the template. PS. Remove the code in red if you already have it in your template.



You are done now. Now you and your visitors can see this Beautiful Popular post widget on your blogger blog. Also it is my earnest request to you that please do not remove the comments added in the codes. They will not be displayed in your blog. Only the person viewing the code can see this.

Like the Post? Share with your Friends:-

• Facebook
• Twitter
• Google+
• Pinterest
• StumbleUpon
• Digg
• LinkedIn
• Reddit
• Delicious
• Technorati