Blogger Tag Cloud Widget by Categories / Labels

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 UpAlways 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:

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

Posted in: Blogger Widgets