Popular Posts Widget With Numbering

Popular Posts widget has been the most used widget in blogger's history almost every blogger uses it to show bunch of popular posts in the sidebar also many of them customize them by using CSS So if you are not such a great coder then we are providing A Beautiful CSS to you which will add a beautiful numbering to posts also.

Add This Beautiful Widget-

Note-Follow The Steps 1-4 if you have not added a popular posts widget only.

1- Go to Blogger >> Add A Gadget
2- Choose Popular Posts.
3- Customize The Widget As Shown-

Note- Uncheck Image Thumbnail And Snippet.

4- Save Widget.

Main Part The CSS-

5- Go To Blogger >> Template

Tip: Always Backup Your Template Before Doing Any Coding.

6- Click Edit/Html

7- Find </b:skin> Just Above It Paste The Following Code-

/*--- ngtechzone Popular Posts --- */ .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; }border-radius:15px;.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; }/*--- ngtechzone Popular Posts --- */ 

Customization's-
To change the background color of the Square bubble edit #292D30
To change the text color of the bubble edit #ffffff

8- Finally Save Your Template And See The Results!!

FROM THE AUTHOR:
I just hope you would find this widget easy and yet exciting. Please let me know if you need any help. I just hope you continue adding more colors and flavors to your beautiful blogs. Wish you success and peace buddies. :-)