How To Make An Awesome Tag Cloud!

I get a lot of emails asking me about the giant tag cloud hanging out at the top of my site. So many, in fact, that I thought it’d be a great idea to make a post out of it, as a bit of a mini-tutorial. So, without further ado, here’s how to get an awesome tag cloud in the New Blogger (formerly Blogger Beta).

(UPDATE 24/08/2007: Obviously there’s no tag cloud up there anymore, since I redesigned the site. I’ve posted a screenshot below of what it used to look like. Click it for a larger version.)



Okay, back to the regularly scheduled tutorial.

First start a new blog in Blogger. Got one? Cool.

Now, navigate in Blogger to Template > Page Elements (clicking Layout from the Dashboard will get you there, too). You’re looking for the screen that says “Add and Arrange Page Elements.” Now, in the sidebar of this representation of your blog, click “Add a Page Element.” You’ll get a nice pop-up with a ton of options. Click Labels, cause that’s what you want to add, after all. Keep it alphabetical, change the name if you feel like it, and click “Save Changes.”

Save your template.

Now click over to “Edit HTML.” Definitely a good idea to “Download Full Template” here, to be safe, before you start editing the code. I’ll wait.

Backed up? Good. Moving on.

Search through your code for a line that looks exactly like this:

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

The “title” attribute might be different if you changed it in the step above. Otherwise, this is the line you’re looking for.

Copy all of this code below.

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

<div class='widget-content'>
<div id='LabelDisplay'>
</div>
</div>

<script language='javascript' type='text/javascript'>
function zoomStyle() {
var max = 0;
var min = 10000;
<b:loop values='data:labels' var='label'>
if (<data:label.count/> &gt; max)
  max = <data:label.count/>;
if (<data:label.count/> &lt; min)
min = <data:label.count/>;
</b:loop>
var display = &quot;";
<b:loop values='data:labels' var='label'>
var delta = <data:label.count/> - min;
var size = 80 + (delta * 100) / (max - min);
display = display + &quot;<span style='font-size:" + size + "%'><a expr:href='data:label.url + "?max-results=100"' style='text-decoration:none;'><data:label.name/></a></span> &quot;;
</b:loop>

obj = document.getElementById(&#39;LabelDisplay&#39;);
obj.innerHTML = display;
}


zoomStyle();
</script>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

And paste it over (on top of, instead of, replacing!) the line you found. Be very careful not to overwrite the </b:section> that will most likely follow it in your template code.

Click preview, and if you’ve done everything properly, you’ll have a sweet tag cloud with links of various sizes based on frequency of occurrence (if your blog is brand new, you’ll need to post in it first to see the code at work).

If you don’t want it in your sidebar, go back to the Page Elements page, and move the widget around to wherever you like (different templates set different limits on this, which can be subverted, but that’s beyond the scope of this tutorial - email me if you want to get hardcore).

Enjoy! Get tagging! Post your results in the comments for all to see!

(Note: The code up there is a modified version of the Multi-style labels widget written up on Hackosphere. Credit where it’s due.)