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.
   
   
   
   
   view source
   

   
   

   print?
   

   1	<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:
   
   
   
   
   view source
   

   
   

   print?
   

   01	<b:widget id='Label1' locked='false' title='Tags' type='Label'>

   02	<b:includable id='main'>

   03	<b:if cond='data:title'>

   04	<h2><data:title/>h2>

   05

   b:if>

   06	<div class='widget-content' style='text-align: justify;'>

   07	<script type='text/javascript'>

   08

   /*

   09	Simple Blogger Tag Cloud Widget

   10	by Raymond May Jr.

   11	http://www.compender.com

   12	Released to the Public Domain

   13

   */

   14

   15	//Settings / Variables

   16	var max = 150; //max css size (in percent)

   17	var min = 70; //min css size (in percent)

   18	var showCount = false;  // show counts? true for yes, false for no

   19	var minCount = 1;  // what is the minimum count for a tag to be shown? 1 for all

   20

   21

   22	//Begin code:

   23	var range = max - min;

   24

   25	//Build label Array

   26	var labels = new Array();

   27	<b:loop values='data:labels' var='label'>

   28	labels.push("<data:label.name/>");

   29

   b:loop>

   30

   31

   //URLs

   32	var urls = new Array();

   33	<b:loop values='data:labels' var='label'>

   34	urls.push("<data:label.url/>");

   35

   b:loop>

   36

   37

   //Counts

   38	var counts = new Array();

   39	<b:loop values='data:labels' var='label'>

   40	counts.push("<data:label.count/>");

   41

   b:loop>

   42

   43	//Number sort funtion (high to low)

   44	function sortNumber(a, b)

   45

   {

   46	return b - a;

   47

   }

   48

   49	//Make an independant copy of counts for sorting

   50	var sorted = counts.slice();

   51

   52	//Find the largest tag count

   53	var most = sorted.sort(sortNumber)[0];

   54

   55	//Begin HTML output

   56	for (x in labels)

   57

   {

   58	if(x != "peek" && x != "forEach" && counts[x] >= minCount)

   59

   {

   60	//Calculate textSize

   61	var textSize = min + Math.floor((counts[x]/most) * range);

   62	//Show counts?

   63	if(showCount)

   64

   {

   65	var count = "(" + counts[x] + ")";

   66

   }else{

   67	var count = "";

   68

   }

   69

   //Output

   70	document.write("<span style='font-size:" + textSize + "%'><a href='" + urls[x] + "' style='text-decoration:none;'>" + labels[x] + count + "a>span> " );

   71

   }

   72

   }

   73

   script>

   74

   75

   76	<span style="font-size:80%;float:right;">Powered by <a href="http://www.widgetsforfree.blogspot.com">Blogger Widgetsa>span>

   77

   div>

   78	b:includable>

   79

   b:widget>

   
   
   
   
   
   

Step 5: Previewing the New Tag Cloud
Before saving the template make sure to click preview. The new tag cloud should now be visible. If not, make sure that you've completed all the steps correctly.