Multihued Label Widget To Beautifying Your Blog Templates

Multihued Label Widget To Beautifying Your Blog Templates

Comments: 1
data:blog.title
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).


bloggerspice.com


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.

Speak Your Mind

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

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

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

Name

Email *

Message *