Label Cloud Widget For Blogger

Share

A Tag cloud is a visual depiction of user-generated tags, or simply the word content of a site, typically used to describe the content of web sites. This Tag Cloud was orginally develped by Compender.

To see a live demo : Click Here

Steps To Install Tag Cloud in Your Blogger Blog :

Step 1: Firstly, Log in to Blogger. Now go to "Design" and then "Page Elements".


Then Click "Add a Gadget" in the column you wish:


Then find the Labels Widget and that widget to your Blog



Step 2: After Adding the Label Widget go to "Design" and then click "Edit HTML"(Do not expand the widget templates).



Now Find This Line ( CTRL + F )

type='Label'

It will look something like this :

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

Now Replace that with these lines

<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>
</div>
</b:includable>
</b:widget>

Step 3: Now Save the Template.

NOTE: You must have already added labels to at least some of your posts, to see the widget in action.

Customizing Label Cloud

You can change Font Size by editing these Lines

var max =

and

var min =