Blogger Label widget with Custom Counter Button

Blogger Label with hover effect and Custom Counter Button

label widget

Blogger label is very important because it work like navigation for visitors. There are many label widget has developed by different blogger. Because we can customize the label widget by adding different CSS code. But most of them are based on Cloud style label. But there are very few trick 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-

hover effect

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

Step 2 Click on  Now click on -> Template -> Edit HTML-> Unfold code  

Step 3 Now Find this code ]]></b:skin> by Pressing Ctrl + F

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

/* Widget by */
.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}

Step 5 Now find the code like below

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

Step 6 And Replace the above code by below code

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

Step 7 Save the templates now. 


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

I have tested this custom label widget on Google Chrome, Mozila Firefox and Opera. It is working well. However if your label widget is customized previously then this trick may not work. Anyway best of luck.

Post a Comment

new style & very nice (o)

I have tried to brought something to hear that you have liked it. (f)

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form


Email *

Message *