How To Add Tag Cloud Widget On Blogger?

This widget is nice for blogspot bloggers who wants to have a tag cloud for categories or labels. This is a simple tag cloud widget if you want to change your old categories/labels list in your blog. This is easy to implement on the sidebar of your blog and will blend to your template directly.

Adding Tag Cloud Widget On Blogger:

     1.  Back up your template first by downloading it.

     2.  Make sure you have Labels Widget installed in your blog.

     3.  Go to your Dashboard > Design > Edit HTML.

     4.  Don't click on Expand Widget Template.

     5.  Find the code below:

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

        - Just Ctrl+F then type in the box below the browser type='Label'.

     6.  Change the whole line of the code with type='Label' with the code below.

/*
Distributed by Jai Cuizon at iBlogTools.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.iBlogTools.blogspot.com">Blogger Widgets</a>
</span>
</div>
</b:includable>
</b:widget>

     7.  Preview it, see if you can see your new tag cloud widget.
     8. Then, SAVE it.

Just make sure you follow the steps above to implement the tag cloud widget completely without any problems. Drop a comment if you have difficulties implementing the tag cloud widget. ^^