Multihued Label Widget To Beautifying Your Blog Templates
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.
1 comment