8 Creating a label cloud for Blogger templates Saturday, June 16, 2007 /

As you can see in my sidebar, I have my labels arranged in a "cloud" formation rather than a simplistic list. I used a tutorial from Phydeaux's excellent blog to do this. Here's a link to the tutorial, which includes code you can simply copy and paste into your blog template:

Phydeaux's tutorial for creating a Blogger Label Cloud

The label cloud shows the relative number of posts linked to a label by displaying them in larger, brighter colours. So in the default template, labels with more posts will be big and blue, while labels with less posts will be small and black.

After installing the label cloud, you may well want to fiddle around with the font sizes and colour schemes. To change the font sizes, look for the following sections just before the closing section of your template:

var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];

If you want to alter the size of labels with more posts, you should change the "var maxFontSize" to a number greater then 20 (eg: 24). In my opinion, a font size larger than about 30 should be avoided, especially if there are a lot of labels in your blog! On the same note, a minimum font size of less than 10 makes it very difficult to read.

To change the colour of the fonts used, you will have to modify the RGB colours. Since Blogger templates use Hexadecimal values to construct your blog, you may want to use a tool such as Cedge's Colour Calculator to find the appropriate RGB colour codes. Simply copy the Hex values into the boxes and press enter: your RGB values will be displayed, along with a coloured section to check you've entered the values correctly.

Play around with the values and use "Preview" to check that everything looks the way you want. When all is done, simply save your template and enjoy! Any new labels you add will automatically be included in your cloud.

Technorati Tags: label+cloud blogger templates tags customizing+blogger blogging