New Version of the Label Widget by Blogger ~ Catatan Harian

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?

It comes with a Label Cloud.

It lets you choose which labels are to be displayed.

You can customize it further using CSS.

Drawbacks

The cloud just has 5 variations. All labels will be divided into 5 classes depending on the usage of these labels.

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.

color : #2789ce; 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

Catatan Harian