Auto Numbered Popular Posts Widget for Blogger

This is another simple and good looking popular posts widget for blogger. You can customize its bubble shape and text color. It will give a nice look to your blog. Hope you will like it.

Recommended: Multi-Color Popular Post Widget for Blogger

 How To ?

• Go to your Blogger account and login.
• Select your blog and then Select Template.
• Make a backup of you template by clicking on upper right side of blog on following button

•  Now find below code:

]]></b:skin> or </b:skin>

• Paste the following code above it.

/*Custom Popular Posts Widget Start*/ .popular-posts ul { padding-left: 0px; counter-reset: popcount; }.popular-posts ul li:before { list-style-type: none; margin-right: 15px; padding: 0.3em 0.6em; counter-increment: popcount; content: counter(popcount); font-size: 16px; background: #292D30; color: #ffffff; position: relative; font-weight: bold; font-family: georgia; float: left; border: 2px solid #dddddd; box-shadow: 1px 2px 9px #666666; }.popular-posts ul li { border-bottom: 1px dashed #dddddd; }.popular-posts ul li:hover { border-bottom: 1px dashed #696969; }.popular-posts ul li a { text-decoration:none; color:#5A5F63; }.popular-posts ul li a:hover { text-decoration:none; }/*Custom Popular Posts Widget End*/ 

• Save your template.

 Customization

• In Popular Post Widget, uncheck image thumbnail and snippet. 

• To change background color of Square Bubble, change Blue color code.
• To change text color of Square Bubble, change Red color code.
• By default, shape of bubble is square. If you want to change it to circle then add below code just after Purple color code:

border-radius:15px;

 Like It ?

Please Share and like this post.