Bikin Label Cloud

Pelajaran hari kedua untukku adalah bikin label cloud. Ini terinspirasi setelah melihat blog orang lain yang menampilkan labelnya (berbeda-beda) ada yang besar dan ada yang kecil.
Seperti biasa, aku harus "merenung" dan mencari "inspirasi" dulu untuk beberapa saat. Akhirnya didapatlah sebuah cara yang dibagi 3 bagian:
1. Setting untuk stylesheets
2. Setting untuk konfigurasi
3. Setting untuk menampilkan label clouds

Untuk melakukan perubahan, seperti biasa kita Login dulu untuk masuk Dashboard, terus klik tab Layout dan Edit HTML
Bagian 1:
1. Cari tag penutup untuk skin --> ]]></b:skin>
2. Masukkan kode berikut SEBELUM tag penutup untuk skin tadi (taruh saja di atas baris tag penutup untuk 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}

Bagian 2:
1. Cari tag penutup untuk skin --> ]]></b:skin>
2. Masukkan kode berikut SESUDAH tag penutup untuk skin tadi namun SEBELUM tag penutup </head> (taruh saja di bawah baris tag penutup untuk skin)

<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>

Bagian 3:
1. Sebelum melanjutkan ada baiknya di save dulu deh kerjaan kita :) Klik aja tombol Save Now
2. Jika anda belum mengaktifkan Label pada blog anda, silahkan aktifkan gadget labelnya dahulu.
3. Cari tag <b:widget
id='Label1' locked='false' title='Labels' type='Label'/>
4. Ganti tag tersebut dengan kode berikut

<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>

Selesailah sudah editingnya, sekarang seharusnya Label Cloud anda sudah muncul, jika belum, coba cek lagi langkah2 diatas.

Jika masih belum muncul juga, coba pastikan salah satu Label anda dipakai lebih dari satu posting

Semoga berhasil

link source: Klik di sini