How To Customize Blogger's Official Popular Posts Widget

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWJfzNDVDFm9DhzFXsPUUIeVzyr0L_GnQ00_MYUiwQnNTrnNhLCEcTeyqqbfHY8OtS6-V4d8cVXaUY2LPAW8WXwZGPOfbtgSJp7sA0tP_QptQXaU8lqwZGXv8lr72tdaLhbnb6A8lENYY/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.