How to make Popular Posts look Great


Popular Popular post widget is most important part of blog because popular post widget shows most popular posts of your blog for your visitors.

I have already provided you some popular post widget and now I am provide you another popular post widget for your blogger blog.

How to make Popular Posts look Great
How to make Popular Posts look Great

Popular Posts Widget for Blogger

Follow below steps how install Elegant Popular Posts Widgetfor your Blogger blog:

Step 1

Login into 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.
Elegant Popular Posts Widget for Blogger

Step 2

After click on Add a Gadget Link a popup window will open with all available gadgets. Select popular post widgets from gadgets list. See below picture for more help.

Popular Posts Widget for Blogger

Step 3

Now Go to Template & click on Edit HTML button as shown in below picture.Popular Posts Widget

Step 4

Now search below code with the help of CTRL + F:


Step 5

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

/* Popular Posts Widget customized by */
.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 below given code just above it:

<script src=’//’/>
<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 type=’text/javascript’>
    // Popular Posts customization by
    // 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(‘ ‘);

Step 7

Now Save Template button.Done!

About the author

domdom rung

Add comment

By domdom rung

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.


Recent Posts

Recent Comments