Membuat Tag Cloud pada Blogger

Sebelum mengikuti tutor ini, saya menganggap para blogger sudah memahami sedikit tentang HTML, dan minimal sudah pernah mengotak-atik template blog. Teknik membuat tag cloud pada blogger ini di adaptasi dari scriptnya phydeaux. Baiklah, cukup basa basinya, mari kita mulai.
1. Pastikan anda sudah memasang element LABEL.
2. Untuk aman jangan lupa backup dulu Template Blog nya.
3. Jangan lupa centang "Expand Widget Templates"
4. Copy dan pastekan kode-kode berikut diantara <b:skin><!--[CDATA[ dan ]]-->

/* 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;
}

5. Copy dan pastekan kode-kode berikut setelah ]]></b:skin> dan sebelum </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>

6. Cari kode-kode berikut di template

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2> 
</b:if>
<div class='widget-content'>
<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>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

--- ganti kode diatas dengan kode berikut ini: -----

<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>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 = "<data:label.name/>";
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] < cloudMin){
continue;
}
for (var i=0;3 > 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>

7. Klik Save, dan silakan preview blognya.
Selamat mencoba...