Multihued Label Widget To Beautifying Your Blog Templates

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 http://www.bloggerspice.com**/
#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;}

Customization

• 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.