Blogger Hacks: Tag Cloud or Label Cloud for blogger

One of my readers was asking me about the tag cloud and label cloud. These feature is originally from wordpress but the good news is, We can also do it on Blogger! Cool isn't it? :D The original idea of this hack was from Phydeaux3. Really appreciated this hack. Thanks Phydeaux3 for making this hack possible. Hence, I made the instructions step-by-step, more simpler and precise so that new bloggers would understand and do it well.

Note: For this hack to work, you should already have installed Labels Widget( Blogger feature) and labeled posts.

Steps on making a Tag Cloud/ Label Cloud

1. Before anything else, Make a Back-up of your template. Download the full template in edit HTML under layout tab.

2. Go to Edit HTML and DON'T tick the "Expand widgets" box.

3. Locate this closing tag(1):


4. Copy the code number 1 HERE and paste it BEFORE the closing tag(1).

5. We're going to place another code. Locate the closing tag(2):


6. Copy the code number 2 HERE and paste it BEFORE the closing tag(2).

Then the Widget itself. Locate the line below:
Note: If you can't find the code below, maybe you haven't installed the labels widget.

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

7. Copy the code number 3 HERE and REPLACE THE LINE ABOVE:

Preview your template and see if your Label widget in vertical alignment become expanded like words inside a cloud. Then, you've made it!

If you encounter an error, maybe you missed or deleted something.
Upload the backup template and try starting all over again.

Label Cloud Settings

You can adjust the settings of your Label Cloud. The color, the sizes, you can change it! Depends upon you. If you want to blend it to your background image, your header or the template in whole. If you wish to do so follow the instructions below.

Locate this lines in "Edit HTML"

<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;

(If you can still remember, this is the Label Cloud code 2)


var cloudMin = 1;

The default setting is one. This means that it show ALL labels. If you put a number GREATER than one. Let's say you put 2, only 2 labels will be show on your cloud.

var maxFontSize
var maxColor

These 2 variable has something to do with the MOST NUMBERED LABELS USED or MOST NUMBERED ENTRIES. The values input in maxColor is in RGB format meaning ( 0 red, 0 green and 255 blue - based on the default setting).

var minFontSize
var minColor

This time, with the LEAST NUMBERERED LABELS USED. Very related on the explanation above.


The default setting is false meaning you dont want to show the number of entries in that label or tag. Otherwise, change false to true.

Related Posts by Categories

Widget by Hoctro | Jack Book