Popular posts widget is a best widget to show off your blog's popular posts of week,month or all time as you choose.After publishing our first blogger's official popular posts hack here we are publishing another cool hack.In this hack we have managed to reduce image thumbnail size and add a border to them.This hack will give a perfect look to your popular posts gadget and of course we have used pure Cascading Style Sheets (CSS) no any heavy scripts are used.To apply this hack you just have to add little snippets of CSS code and you are done.Let's watch yourself in image below.

Gadget Preview

How To Apply This Hack?

Before applying this hack you have to do the widget settings as I have done in below image.




  1. Now Go to Blogger Dashboard > Design > Edit HTML.
  2. Backup your template first.
  3. Now search for

]]></b:skin>

add below code just above it

.PopularPosts .item-thumbnail {
padding: 3px;
border: 1px solid #999;
background-color: #fff;
}

.PopularPosts img {
height: 36px;
width: 36px;
}

.PopularPosts .widget-content ul li {
list-style: none;
}

Now save your template and you are done.

If you have any queries or questions then feel free to post them below.I hope you will like this little hack also while sharing this hack with your readers don't forgot to attach a link to this article.

Post a Comment

  1. SHARE BLOGGER STICKY BAR WIDGET CODE

    ReplyDelete
  2. Hi Daniyal,

    I am not using stickybar I am using hellobar.

    You can get your own @ hellobar.com

    ReplyDelete
  3. Replies
    1. Thanks for your comment.It will better if you don't add links in comments as they are considered as spam.

      Delete
  4. can you tell me how to fix summary of popular posts?

    ReplyDelete
  5. Thanks Bro for this nice tutorial. :)

    ReplyDelete
  6. here chek this http://pakistangoogle.blogspot.com/

    ReplyDelete
  7. how can i change color of line between posts?

    ReplyDelete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account).PLEASE DO NOT SPAM

 
Top