Multihued Label Widget To Beautifying Your Blog Templates

Multihued Label Widget To Beautifying Your Blog Templates

blog label widget

There are different style to tailor your label widget for attracting your visitors. So making your blog unique multicolored label is plays an important role as well as it works like user friendly. Because with this widget visitors can easily navigate to any labels you like. So I have just add some extra spice by customizing it with different color and size to label widget that will beautify your blogger template's default label. Hope you will like it and there is also an options to customize this widget. So I have sharing the code below.

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

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Widget" then select "Label" Widget (Select Cloud Style).

Step 4 Now click on -> Template -> Edit HTML-> Proceed

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

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

/**Multihued Label By**/
#Label1 .cloud-label-widget-content {text-align:center;font-weight: bold;padding: 5px 0}
#Label1 .cloud-label-widget-content span {display: inline-table; line-height: 1.2;}
#Label1 .cloud-label-widget-content span a {padding:4px 5px;color:#fff}
#Label1 .label-size {margin:4px 0;}
#Label1 .label-size span {background:#E95D0C;padding:4px 5px;color:#fff}
#Label1 .label-size-1 a {background:#ff8c00;font-size:11px;}
#Label1 .label-size-2 a {background:#556b2f;font-size:13px;}
#Label1 .label-size-3 a {background:#cd5c5c;font-size:14px;}
#Label1 .label-size-4 a {background:#B32A32;font-size:16px;}
#Label1 .label-size-5 a {background:#66CC00;font-size:18px;}
#Label1 .cloud-label-widget-content span a:hover {background:#B32A32;}


  • Change E95D0C all highlighted code with your desired colors. TO get the color use BS Color Picker from Here.
  • Change 11px  all highlighted code to increase/decrease label's font size.

Post a Comment

very informative article for newbie like me. thanks for guidelines.

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 *