Cara Membuat Label Cloud

Nah...pernah liat gambar label kayak diatas gag...??mungkin labelmu hanya model baris vertikal kayak punya ku tuwww... tapi kini aq punya CARA buat mempercantik tampilan blog dengan mengubah tampilan label jadi kayak awan(LABEL CLOUD).
Label cloud sangat menarik karena tampilannya yang cool dan lebih modern. Apalagi ukuran dan tebal font label dengan isi yang lebih banyak akan ikut membesar pula. keren ueue...
tapi...label ini lebih bagus di pake kalo label mu uda lebih dari lima, biar bentuknya jadi lebih indah...

Cara mbuatnya kayak gini nie...
*back up dulu template yang diubah pada menu download full template.
*lalu masuk layout-edit HTML-lalu pilih expand widget template
*cari kode seperti ini :

]]></b:skin>

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

*sekarang temukan lagi kode :

]]></b:skin>

*letakkan kode ini dibawahnya

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

*nah kalo selesai kini tinggal widgetnya...temukan kode dibawah ini(ctrl+f)

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

* ganti/hapus kode diatas dengan diganti kode:

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



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>

*kalo semua uda terpasang...harusnya label anda sudah terlihat adanya perubahan. Jika tidak, ulangi lagi langkah-langkah sebelumnya atau cek apakah salah satu label kamu memiliki lebih dari satu posting. Juga cek jangan sampai label yang kamu buat memiliki tanda petik dua (“).

* Kamu bisa melakukan perubahan2 kayak gini...:

var cloudmin=1;
jika diisi angka 1 maka seluruh label akan muncul.
jika diisi angka selain 1 maka labe jumlah posting yang sama dengan itu saja yang ditampilkan

*Variabel maxFontSize digunakan untuk memberi tahu besar maksimum teks label dengan posting terbanyak. Sedangkan variabel maxColor memberi seting warna label dalam format RGB (red, green, blue). Format warna ini mencampur warna merah, hijau, dan biru dengan intensitas terkecil dengan angka nol dan terbesar dengan 255.

*kalo mau pake model ini sebaiknya label mu lebih dri 3 dengan jumlah posting yang berbeda biar bentuk awannya nampak... selamat mencoba!!!!!!