Blogger Tag Cloud Widget by Categories / Labels

This widget is perfect for blogspot users who desire a simple tag cloud for their Categories. The Labels Cloud can easily be implemented within the sidebar of your blog and will match your template wonderfully.

Steps for Implementation

Step 1: Back it Up
Always make sure to back up your Blogger Template before doing anything else!

Step 2: The Labels Gadget

Make sure that you have the Labels Page Element installed. If you haven’t already…

1. Go to Layout >Page Elements .
2. Click “Add a Gadget” and then add the “Labels” gadget.

Step 3: Locating the “Old Code”

1. Now go to Layout >Edit HTML
2. Make sure that the “Expand Widgets Template” box is unchecked.
3. Now we need to search for the code that looks like this. <b:widget id=’Label1′ locked=’false’ title=’Tags’ type=’Label’/>Your code may look a little different. So try using your browser’s search tool to find type=’Label’.

Step 4: Replacing the “Old Code” with the “New Code”

1. Once you’ve located type=’Label’, remove the whole line of code that looks just like the code mentioned in part 3 of step 3.
2. Replace this code that you’ve just deleted with the code below: <pre>/*<br />Distributed by John Smith at WidgetsForFree.blogspot.com<br />*/ <b:widget id=’Label1′ locked=’false’ title=’Tags’ type=’Label’><br /><b:includable id=’main’><br /><b:if cond=’data:title’><br /><h2> <data:title/></h2> <br /></b:if><br /><div class=’widget-content’ style=’text-align: justify;’> <br /><script type=’text/javascript’><br />/*<br />Simple Blogger Tag Cloud Widget<br />by Raymond May Jr.<br />http://www.compender.com<br />Released to the Public Domain<br />*/<br /><br />//Settings / Variables<br />var max = 150; //max css size (in percent)<br />var min = 70; //min css size (in percent)<br />var showCount = false; // show counts? true for yes, false for no<br />var minCount = 1; // what is the minimum count for a tag to be shown? 1 for all<br /><br /><br />//Begin code:<br />var range = max – min;<br /><br />//Build label Array<br />var labels = new Array();<br /><b:loop values=’data:labels’ var=’label’><br />labels.push("<data:label.name/>");<br /></b:loop><br /><br />//URLs<br />var urls = new Array();<br /><b:loop values=’data:labels’ var=’label’><br />urls.push("<data:label.url/>");<br /></b:loop><br /><br />//Counts<br />var counts = new Array();<br /><b:loop values=’data:labels’ var=’label’><br />counts.push("<data:label.count/>");<br /></b:loop><br /><br />//Number sort funtion (high to low)<br />function sortNumber(a, b)<br />{<br />return b – a;<br />}<br /><br />//Make an independant copy of counts for sorting<br />var sorted = counts.slice();<br /><br />//Find the largest tag count<br />var most = sorted.sort(sortNumber)[0];<br /><br />//Begin HTML output<br />for (x in labels)<br />{<br />if(x != "peek" && x != "forEach" && counts[x] >= minCount)<br />{<br />//Calculate textSize<br />var textSize = min + Math.floor((counts[x]/most) * range);<br />//Show counts?<br />if(showCount)<br />{<br />var count = "(" + counts[x] + ")";<br />}else{<br />var count = "";<br />}<br />//Output<br />document.write("<span style=’font-size:" + textSize + "%’><a href=’" + urls[x] + "’ style=’text-decoration:none;’>" + labels[x] + count + "</a></span> " );<br />}<br />}<br /></script><br /><br/><br /><span style=”font-size:80%;float:right;”>Powered by <a href=”http://www.widgetsforfree.blogspot.com”>Blogger Widgets</a></span><br /></div> <br /></b:includable><br /></b:widget></pre> <br /> <p>

Step 5: Previewing the New Tag Cloud