New Version of the Label Widget by Blogger

Blogger, as a part of its 10th Birthday celebrations, has now released a new version of the label gadget. This one is much better that the old version

What is new?

1. It comes with a Label Cloud.
2. It lets you choose which labels are to be displayed.
3. You can customize it further using CSS.

Drawbacks

1. The cloud just has 5 variations. All labels will be divided into 5 classes depending on the usage of these labels.
2. It would have been better if there was a bigger number of classes.

How to Customize?

You can customize the looks further by using CSS. As i said it has 5 classes of clouds. You can add CSS styles to each of them.
Here is a sample Style which will give a bluish look for the cloud. Here i have applied styles for all 5 label classes and their hover styles (so 10 style definitions in total).

.label-size-5 a {color: #2789ce; /*color of a label of class 5*/
font-size: 3em;
text-decoration: none;
   }
.label-size-5 a:hover {color: #2789ce; /*color of a label of class 5 on hover*/
text-decoration: underline;
   }
.label-size-4 a {color: #2789ce;/*color of a label of class 4*/
font-size: 2.5em;
text-decoration: none;
   }
.label-size-4 a:hover {color: #2789ce;/*color of a label of class 4 on hover*/
text-decoration: underline;
   }
.label-size-3 a {color: #2789ce;/*color of a label of class 3*/
font-size: 2em;
text-decoration: none;
   }
.label-size-3 a:hover {color: #2789ce; /*color of a label of class 3 on hover*/
text-decoration: underline;
   }
.label-size-2 a {color: #2789ce;/*color of a label of class 2*/
font-size: 1.5em;
text-decoration: none;
   }
.label-size-2 a:hover {color: #2789ce; /*color of a label of class 2 on hover*/
text-decoration: underline;
   }
.label-size-1 a {color: #2789ce;/*color of a label of class 1*/
font-size: 1em;
text-decoration: none;
   }
.label-size-1 a:hover {color: #2789ce; /*color of a label of class 1 on hover*/
text-decoration: underline;
   }

Here all of these CSS styles are customizable. You can change the colours and font sizes of each of the 5 classes. Is responsible for the colouring of each of the classes. You can change it appropriately with some other hex colour code or something like color:red;
You can adjust the font size of these 5 classes by adjusting the corresponding font-size: attribute of that label size class (em is a unit of font size just like px).
I have commented the css codes(10 comments). You can remove those comments if you want (eg: /*color of a label of class 2 on hover*/ is a comment).
These CSS style definitions should be placed above
]]></b:skin>

If you are not impressed by the customizability of this blogger label cloud, try this advanced version of the cloud which is highly customizable Label Cloud Widget For Blogger

Share this article: