Membuat Label/Tag Clouds

Nahhh pada kali ini saya yang bernama Anas akan menulis artikel yang
biasanya digunakan di wordpress
dan technorati
yaitu Tag Clouds.. jika anda belum mengerti tentang Tag Clouds saya
akan menerangkan sedikit pengertianya..

Tags Clouds adalah sebuah Label yang hurufnya tidak rata maka dari itu
dinamakn Tags Clouds yang artinya Tag adalah Label dan Clouds adalah
awan jadi rengkumanya adalah Label yang seperti awan atau tidak rata..
Nah jika Tags yang hurufnya berbentuk rata biasanya itu adalah tags
yang populer di blog anda jika kecil itu kurang populer... jadi
pengertianya adalah semakin besar hurufnya maka menandakan kepopuleran
dari Tags tersebut... makanya anda membuat tags dengan kata-kata yang
sering digunakan dan tepat dengan isi tagsnya tul gakk

Nah jika Anda belum tau Tags Clouds Saya akan memberikan contohnya niii
dibawahhh

komputer,
Blogging,
Bisnis Online

laptop, Widget
Blog, Yahoo,
Google,

blogeer,
wordpress,
SEO

trik-tips
Blog

Pernak-pernik Blog,

other

Nah contoh diatas adalah tampilan Label yang telah dimodifikasi menjadi
Tags Clouds... Semakin besar hurufnya maka semakin populer categorinya

Gimanna anda pengen buat gakk kalau pengen nihh dibawah aku ajari
caranya..

Kemudian Taruh Code dibawah
diatas Code ]]></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}
Lalu juga taruh Code Dibawah
tepat dibawah Code <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>

Lalu Scroll Kebawah coba
cari Code seperti ini <b:widget
id='Label1' locked='false' title='Labels' type='Label'/>
Lalu Ganti code diatas
dengan Code dibawah 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>