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).
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 abovecolor : #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).
]]></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
Posts
