Membuat Label tag Cloud

Hi... akhirnya saYa nGeBLog Lagi Nih... Di sini anda dapat menemukan informasi tentang Musik. Kunci atau Chord Lagu, Profil, Plus info tentang IPTEK diantaranya Hacking, Cracking, Programmer, Virus maker, dan Lain-Lain deh Pokonya...

Nah,, Kali Ini saya akan ngebaHas tentang :

Membuat label tag Cloud

Masih perlu jelasin tentang Tag Label Cloud?? Rasanya gak perlu kali yahh. Ya sudah, jelasin dikit aja yah.. Biasanya label kita hanya vertical kebawah gitu kan?? Nah itu sangat pemborosan tempat (bagi anda orang bertipe irit) sehingga perlu sebuah cara agar label tersebut tidak memakan tempat. Nah caranya yaitu dengan membuat Tag Label Cloud. Oh iya, biasakan membackup template anda sebelum mengedit sehingga bila terjadi hal yang tidak diinginkan tidak membuat kita pusing. Nah,, Seperti biasa :

1. Login ke bLogger dengan ID dan Password Kamu,, jangan pake punya saya yah� �
2. Pergi ke Layout trus ke Edit HTML.
3. Lalu cari kode ]]></b:skin> yang letaknya dibawah tu,, nah yang itu�
4. Selanjutnya Copy dan Pastekan kode berikut sebelum kode ]]></b:skin> awas jangan salah tempat, apalagi salah kamar. Bahaya� hehehe.. �

/* 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. Eitt,, belum selesai lo.. setelah itu cari kode </head> lalu sisipkan kode dibawah sebelum kode </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. Nah,, ini bagian tersulit yang perlu ketelitian. Carilah kode berikut:
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
7. Perlu diperhatikan kode <b:widget id='Label1' locked='false' title='Labels' type='Label'/> adalah kode awal dari widget label dan wajib diakhiri dengan kode </b:widget>
8. Maka ganti kode <b:widget id='Label1' locked='false' title='Labels' type='Label'/> sampai kode </b:widget> dengan kode dibawah ini..!!!

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

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


Save template..!!! Sekarang coba lihat perubahannya pada widget label..???

Agar terlihat lebih menarik atau ingin sesuai keinginan kita maka kamu juga dapat merubah kode berikut:

var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;


var maxFontSize = 20; untuk besaran text maksimal
var maxColor = [0,0,255]; untuk warna (kamu dapat rubah warna dengan format RBT)
var minFontSize = 10; untuk besaran minimal text
var minColor = [0,0,0]; untuk warna terendah (kamu dapat rubah warna dengan format RBT)
Nah,, jika sudah jangan lupa disave. Oke,, sekian dari saya, wassalam :)