Blogger – Tag Cloud

I always wanted a tag-cloud for my blog that is hosted on Google’s Blogger.

I found the source for a tag-cloud widget on Raymond’s site – Compender and it works really well.

Here is what I needed to do to include it on my blog:

Because Raymond’s tag is based on a hack, you first need to add the Labels widget to template.

• Go to Layout | Page Elements
  
• Click on “Add a Gadget”
  
• Click on “Basics” and select the “Labels” gadget
   
• Make sure that the “Labels” gadget appears in the right section of your blog, otherwise drag it to the correct location.
  
• Next click on “Edit Html”
   
• Backup your current template by click on “Download Full Template”.
  
• Put a check in front of “Expand Widgets”
   
• You need to remove the current definition for the Label widget and replace it with Raymond’s hack.
• Search for “<b:widget id='Label1' locked='false' title='Tags' type='Label'>”.
• Select the text that appears between the above tag and the corresponding closing tag “</b:widget>”.
• Delete the text.
• Delete the tag “<b:widget id='Label1' locked='false' title='Tags' type='Label'></b:widget>”
• Copy the code from below and place it in the same location that the old widget appeared.
• Save the template. (If there was an error then Blogger will inform you. Otherwise you will be able to view the updated blog).

Here is the code for the cloud.

You can change the size of the tag cloud by changing the min and max values in the code below.

 

<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'>
                //Variables:
                var max = 200; //max css size (in percent)
                var min = 80; //min css size (...)
                var showCount = 1;  // show counts? 1 for yes
                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] &gt;= minCount)
                 {
                  //Calculate textSize
                  var textSize = min + Math.floor((counts[x]/most) * range);
                  //Show counts?
                  if(showCount == 1)
                  {
                   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;'>&quot; + labels[x] + count + &quot;</a></span> &quot; );
                 }
                }
            </script>
        </div>
    </b:includable>
</b:widget>