How to Add 6 Step Blogger Label Custom Counter widgets

Blogger label is very respectable in view of post in blogger easy navigation for visitors. There are many label widget has developed by blogger. It we can customize on the label widget by adding new CSS code. But jolly boat of them is based on Cloud style label. Adding it very few tricks available for list style label with post counter. So I am going to share with you a list style custom label widget with counter button where your label widget will display as a list at left side and number of post per label will display at the right side or the widget. I have also added hover effect where it will change the color on mouse hover. I hope this unique widget you will like. So let's proceed to the tutorial-

Step 1 Log in to your Blogger Account Go to your Blogger Dashboard

Step 2 Go to -> Template -> Edit HTML-> ► This symbol Click can Unfold all code

Step 3 Now Find this code ]]></b:skin> and click it then by Pressing Ctrl + F (Find )

Step 4 “Paste” the below code in Before/above ]]></b:skin>

/* Start Label Custom Counter widgets */
/* Widget by www.noveltechnic.com.com */
.Label li {background: none repeat scroll 0 0 #02D8F8;border: 0 none;color: #666666;margin: 0 1px 1px 0;padding: 0;text-decoration: none;}
#Label1 li a {color: #0676EA;text-decoration:none;}
#Label1 li a:hover, #Label2 li a:active, #Label1 li a:focus {color: #0676EA;text-decoration:none;}
#Label1 li .label-counter {float:right;background-color:#0676EA;color:#fff;line-height:1;margin:2px 0 0;padding:2px 3px -1px 3px;border-radius:2px;text-align: center;font-size:12px;width:50%;height:auto;}
#Label1 li:hover .label-counter {background-color:#000000;color:white}
/* End Label Custom Counter widgets */

Step 5 Then Now find the code in below

<span dir='ltr'>(<data:label.count/>)</span>

And Replace the above code in place of below code

<span class='label-counter'><data:label.count/></span>

Step 6 Save the templates now.

Customization to the widget

• Alter #02D8F8 this code for background color.
• Alter #0676EA for counter button background color.
• Alter #000000 for counter button hover color.

This code tested in to custom label widget on Mozilla Firefox, Google Chrome and Opera. It is working well. Though if your label widget is customized previously then this trick may not work. Anyhow best of luck.