Label Gadget - How to make the Label Cloud more colorful

On 25 August, 2009, Blogger upgraded the Label Gadget by adding the much requested Label Cloud feature to it. Blogger told us about the new feature which they added to the Label gadget in this Blogger Buzz article.

The default setting for the Label gadget is to display the Labels as a list, however you can change it into a Label cloud by going to your Dashboard and clicking on Layout and then click the Edit link which belongs to the Label Gadget. If you want to learn how to use multiple colors when you are using the Label Cloud option of the Label Gadget you can click the Read More link.

How to add more colors to the Label Cloud

Please observe that the instructions posted below will only work if your blogg is using a Layout Template. To enable the ability to use up to five different colors in your Label Cloud you need to copy the code below and then paste it in the locations displayed in the images. You can see the end result by viewing the Label Cloud I am using in the sidebar of this blog.

Variable Definations and pasting the code from Box 1 directly after the series of equal signs "as the ones shown in Image 1".

(Box 1)

<Variable name="labelsize1color" description="Label Size 1 Color" type="color" default="#FF0000" value="#FF0000"> <Variable name="labelsize2color" description="Label Size 2 Color" type="color" default="#FF7F00" value="#FF7F00"> <Variable name="labelsize3color" description="Label Size 3 Color" type="color" default="#FFFF00" value="#FFFF00"> <Variable name="labelsize4color" description="Label Size 4 Color" type="color" default="#008000" value="#008000"> <Variable name="labelsize5color" description="Label Size 5 Color" type="color" default="#6600FF" value="#6600FF"> <Variable name="labelcloudfont" description="Label Cloud Font" type="font" default="normal normal 100% Georgia, Serif" value="normal normal 99% Courier, monospace">

(Image 1)

Once you have pasted the code from the box one you copy the CSS from Box 2 and paste it directly before the ]]></b:skin> (Image 2) the template code.

(Box 2 - CSS)

/* Label Cloud */ .label-size-1 a {font: $labelcloudfont; color: $labelsize1color; } .label-size-2 a {font: $labelcloudfont; color: $labelsize2color; } .label-size-3 a {font: $labelcloudfont; color: $labelsize3color; } .label-size-4 a {font: $labelcloudfont; color: $labelsize4color; } .label-size-5 a {font: $labelcloudfont; color: $labelsize5color; }

(image 2)