Saturday, September 27, 2008

How To Add A Label Cloud - Blogger

I've had several requests for a "how to" on replacing the standard Label list in Blogger with the Label Cloud which you can see on most of my blogs including Destination: Austin Family. Ask and ye shall receive - I love helping out my fellow genea-bloggers.

First, I will warn you that this involves editing the CSS template in Blogger. I don't want you to be intimidated since I will provide clear instructions. But you also must promise me that while you are in "CSS template land" you won't go poking around and say "oohhh, let's add this, change this or remove this." Okay?

1. Backup your template. You are doing this on a regular basis anyway, right? LOL. In Blogger, click Customize and then click the Edit HTML tab. Click Download Full Template and place the file with your other backup files.

2. In the Edit Template section, make certain that the Expand Widget Templates box is UNCHECKED.

3. Download this file: which contains three segments of code that you will copy and paste over to the template.

4. Scroll through the code in the template and locate the following string of code:

5.  In the labelcloudcode.txt file, highlight and copy the Part One section of code:

6.  Paste the Part One section of code before the b:skin section of code as shown:

7.  In the labelcloudcode.txt file, highlight and copy the Part Two section of code:

8.  Paste the Part Two section of code after the b:skin section of code as shown: 

9.  Locate the widget code for the Label widget - it will have a widget id=Label1, as shown:

10.  In the labelcloudcode.txt file, highlight and copy the Part Three section of code:

11.  Paste the Part Three code replacing the existing line of Label widget code, as shown:

12.  Click Save and then view the Label Cloud in your blog.

Troubleshooting the Label Cloud

1. If the Label Cloud does not appear, make sure that at least one of your labels has more than one entry. If all labels only have one entry, a bug in the code will cause the Label Cloud not to appear.

2. Also, none of the labels can contain quotation marks ("). Other marks such as apostrophes are okay.

Changing Colors and Font Sizes

The settings in the Variables section of the code is where adjustments to colors and font sizes are made.

var cloudMin = 1;
- this variable sets the minimum number of labels needed to be displayed in a Label Cloud.  The default is 1 which displays every label.  I usually use 5 or higher.

var maxFontSize = 20;
var minFontSize = 10;
- I usually leave these as the default amounts.  Increasing the maxFontSize above 30 makes the labels look too large amd decreasing the min FontSize below 10 makes the labels look too small.

var maxColor = [0,0,255];
var minColor = [0,0,0];
- the colors shown are blue for the largest labels (maxColor) and black for the smallest labels (minColor).  Note that the colors must be expressed in the RGB format (code,code,code).  Use this RGB Color Chart to look up some interesting combinations.  The example below uses (178,34,34) for maxColor and uses (222,184,135) for minColor.

var lcShowCount = false;
- set this variable to true to display the actual count next to each label.


FamilyTwigs (Sheri Bush) said...

Thank you, Thomas!! I now have an attractive LabelCloud!
You are amazing, thank you.

Judith Richards Shubert said...

Thomas, again you've made this so easy. Now my blog looks a lot better, I think, without that long, long list of labels. I have a lovely cloud!

Jessie said...

I know you posted this a while back, but I just want to say thank you for making this so easy! Your instructions were perfect and I was able to make a great label cloud on my blog in minutes. Thanks again!

A. Spence said...

Thanks so much for this. I love the LabelCloud and didn't know what it was called til i stumbled upon this blog!!!