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).

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 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)