I have seen a lot of widgets for Blogger. But, I have never seen a label widget with different colors for each label. That's why I thought of creating one. The main feature of this widget is the multicolor effect both on hovering as well as while not hovering. Maybe, its the first time a multi colour label widget is created for blogger. I hope you have seen Wind - The longest social media widget created for blogger that too with hover effects. It makes your blog a little different and colourful rather than the simple and clean single colored label widgets. By default, we can add the label widget from the widget section. After that we can customize the label widget according to our needs using CSS. The CSS should be added in template. This is only effective while using the labels widget as clouds. In no ways will this widget slow down your page. But,if your template contains a lot of CSS, then your page might load really slowly. OK, now lets get into the tutorial. And, one thing, the sole copyright ownership of this widget lies on my small head. That doest mean i am adding a credit link or other unwanted things. But, if you wanna share this widget, then you should offer a credit link. Dont make me file another DMCA disclaimer. I am really tired of it.
Steps To Add This Widget
- Go To Blogger - Layout
- Now, Add the Labels Cloud Widget .
- Change the settings according to the image shown below.
- Now go to Template - Edit HTML
- Find ]]></b:skin>
- Just Above it paste the following CSS Code given below .
Settings For Label Widget
The settings of the label widget should be set according to the dimensions given below. We should change the display type to Cloud, and you should not tick the show number of posts per label button . Thats all.
Source Codes
/*-------------------------------------
Sidebar Label Cloud By Blogger Kid
--------------------------------------- */
.sidebar .cloud-label-widget-content {margin:0; padding-left:20px!important;}
.sidebar .label-size a {
color:#fff!important;
background:#222;
padding:8px 22px;
margin:0 3px 3px 0;
float:left;
display:block;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
-webkit-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.sidebar .label-size-1 a {background:#FF8000}
.sidebar .label-size-2 a {background:#F6FF03}
.sidebar .label-size-3 a {background:#FB2903}
.sidebar .label-size-4 a {background:#298A08}
.sidebar .label-size-5 a {background:#084B8A}
.label-size-1 a:hover, .label-size-2 a:hover, .label-size-3 a:hover, .label-size-4 a:hover, .label-size-5 a:hover {
background:#2288bb; color:#fff; text-decoration:none}
.sidebar .label-size span {
background:#2288bb;
color:#fff;
padding:8px 22px;
margin:0 0 3px;
clear:both;
float:left;
}
.sidebar .label-size {
position:relative;
text-transform: uppercase;
text-decoration:none;
font-size:16px;
font-family:'Oswald', sans-serif;
color:#fff;
}
.sidebar .label-size a, .sidebar .label-size a:visited {color:#fff;text-decoration: none;}
Final Words
I hope this is another milestone in my career. After creating one of the longest widgets ever for Blogger, now i think its another record, like the only multi coloured label widget created for Blogger. Thank you, readers, you are my success.
