Adding Tag Cloud to your blogger

Here is the code that enables you to add a cool tag cloud / label cloud in your blogger.

Below is the instruction of how to add tag cloud to your blogger
(Note: Remember to backup your template before making any changes) 




STEP 1
Find the closing skin tag below by pressing ctrl + F
]]></b:skin>

STEP 2
Copy the following code and paste it before ]]></b:skin>

/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}



STEP 3
Copy the following code and paste it after ]]></b:skin> but before </head>



<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>


STEP 4
Find the label widget in your sidebar. It should look something like this.
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>


STEP 5
Replace the code in step 4 with the following code.


<b:widget id='Label1'
locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>

<h2><data:title/></h2>
</b:if>

<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a&gt;b){

var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)

}
else{

var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)

}
return v
}
var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName =
&quot;<data:label.name/>&quot;;
ts[theName] = <data:label.count/>;
</b:loop>
for (t in ts){
if (!labelCount[ts[t]]){

labelCount[ts[t]] = new Array(ts[t])

}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] &lt; cloudMin){
continue;
}
for (var i=0;3 &gt; i;i++) {

c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)

}

var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);

li = document.createElement('li');

li.style.fontSize = fs+'px';

li.style.lineHeight = '1';

a = document.createElement('a');

a.title = ts[t]+' Posts in '+t;

a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';

a.href = '/search/label/'+encodeURIComponent(t);

if (lcShowCount){

span = document.createElement('span');

span.innerHTML = '('+ts[t]+') ';

span.className = 'label-count';

a.appendChild(document.createTextNode(t));

li.appendChild(a);

li.appendChild(span);

}

else {

a.appendChild(document.createTextNode(t));

li.appendChild(a);

}

ul.appendChild(li);

abnk = document.createTextNode(' ');

ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>


<noscript>
<ul>
<b:loop values='data:labels'
var='label'>
<li>

<b:if cond='data:blog.url == data:label.url'>

<data:label.name/>

<b:else/>

<a
expr:href='data:label.url'><data:label.name/></a>

</b:if>

(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include
name='quickedit'/>
</div>

</b:includable>
</b:widget>