Blogger has given us the feature to edit CSS.By editing CSS we can design our blog like wordpress's blog.While playing with CSS and my new template, I've found an amazing trick by which you can customize blogger's official popular posts widget.To customize your popular posts widget you have add some CSS i your template.And the biggest advantage of this widget is that you don't need to install any Javascript because we are using a widget stored on Blogger's servers and we will customize its look to match perfectly with your blog template.Now let's go it's time play with blogger official gadget :D
Please make sure that you have already added the popular posts widget to your blog.To add follow below steps.


Adding Popular Posts Widget To Blogger


  • Go to Blogger Dashboard > Design > Add a Gadget


  • Then choose Popular Posts (See image below)


  • Now set the values like I have set in below image.


Adding The Hack


  • Now go to Design > Edit HTML.
  • Backup/Download your template.
  • Find ]]></b:skin>
  • Add below code just before ]]></b:skin>

<style>
/*--- HelperBlogger Popular Posts --- */ 
.popular-posts ul{padding-left:0px;} 
.popular-posts ul li {background: #fff url(http://2.bp.blogspot.com/-mHasN2HnXao/T13V551gSDI/AAAAAAAABG4/2QusUUv6maY/s1600/helperblogger-list-style-icon.png) no-repeat scroll 5px 10px; 
list-style-type: none; 
margin:0 0 5px 0px; 
padding:8px 5px 7px 22px !important; 
border-bottom: 2px dotted #dddddd; 
}
.popular-posts ul li:hover { 
border-bottom: 2px solid #6BB5FF; 
}
.popular-posts ul li a:hover { 
text-decoration:none; 
}
</style>

You can customized all of above values.For changing the colors you can use our HEX Color Code Generator.

Finally save your template.And go to your blog you will see changed popular posts.If you need help about customized and setting this hack feel free to ask me.I'll glad to help you....

Credits


All this hack is developed by HelperBlogger.If you wish to share this hack with readers then you have to link back back to this tutorial.Hope,all of you will support me.

Post a Comment

  1. Hi,

    very simple method and easy to apply,how can we add the total view post in it...it would be much better(from my point of view)

    ReplyDelete
  2. @se7enx - Sorry we can't add post total views in blogger's popular posts widget.

    ReplyDelete
  3. NICE THINg DUDE...........KEEP IT UP .........

    ReplyDelete
  4. Thanks! work great for my site: http://www.mkvfilms.net/

    ReplyDelete
  5. hi rahul,

    i already have the "popular posts" gadget, but i would like to have it below every post instead of having it at the side. do you know how to do that? and is there any chance to choose the posts which are shown? thanks in advance.

    regards, tabea

    ReplyDelete
  6. hi..i'am blogwalking. i like your blog.. please visit my blog: http://dpc-faster.blogspot.com/

    ReplyDelete
  7. This comment has been removed by the author.

    ReplyDelete
  8. This comment has been removed by the author.

    ReplyDelete
  9. Your article informative but simple. If you want more information about best WordPress widgets,please click here: www.optimalbd.com

    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