Popular Post Widget With Auto Numbering

Auto Numbering Popular Post gadget Preview

To add This Gadget Follow Following Steps:

• Go to Blogger>>Layout
• Click On Add Gadget
• Select Popular Post and, Not Check on Image and Snippet. Leave it uncheck.

Now you need to change the default styles and change its look to our desired design using Custom styles.

• Go To Blogger > Template
• Backup your Template
• Click Edit HTML
• Search for </b:skin> . 
• Click the black arrow to expand the code.
• Paste the following Styles just above </b:skin>

/*--- Allin1-web--- */
.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;
}
Customization:

• To change the background color of the Square bubble edit #292D30
• To change the text color of the bubble edit #ffffff
• By default the shape of the bubble is Square. To change it to Circle simply add the following code just after box-shadow: 

1px 2px 9px #666666;border-radius:15px;
Recommended:

1.Smart Popular Post Widget with ahover effect