Membuat Label Bentuk Tag Cloud

Label/kategori adalah sebuah tools yang mungkin kita semua sudah mengenalnya. Label atau biasa disebut kategori ini bisa kita edit dengan sesuka hati kita. Mulai dengan Label disertai dengan fungsi scroll dan label berbentuk 2 kolom. Dan yang satu ini adalah label berbentuk Tag Cloud. Mungkin Tag Cloud sudah biasa sobat blogger lihat pada blog lainnya,, tapi biasanya mereka mendapatkan itu dengan memanfaatkan sebuah situs untuk mendapatkan Tags Cloud yang di pasang pada blog. Nah, tips kali ini akan memberikan label bentuk tag cloud dengan menggunakan tools dari blogger itu sendiri.

Untuk mendapatkannya, teantunya blog sobat sudah terpasang dengan widget ini, supaya kita bisa mengeditnya. Kalau sudah terpasang labelnya, silahkan baca dan praktekkan langkah-langkah yang akan saya berikan untuk menampilkan label yang berbentuk tag cloud.

1. Login terlebih dahulu ke blogger.com dengan account anda
2. Pilih Edit HTML pada elemen template anda (pastikan Label/Kategori sudah terpasang dalam blog sobat.)
3. Cari kode yang mirip dengan kode di bawah ini:

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

4. Jika sudah ketemu, silahkan ganti kode tersebut dengan kode di bawah 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'/>
<p align='center'>
<script type='text/javascript'>
var cloudMin = 1;
var maxFontSize = 25;
var maxColor = [0,255,0];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
// 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(&#39;labelCloud&#39;);
ul = document.createElement(&#39;ul&#39;);
ul.className = &#39;label-cloud&#39;;
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(&#39;li&#39;);
li.style.fontSize = fs+&#39;px&#39;;

a = document.createElement(&#39;a&#39;);
a.title = ts[t]+&#39; Posts in &#39;+t;
a.style.color = &#39;rgb(&#39;+c[0]+&#39;,&#39;+c[1]+&#39;,&#39;+c[2]+&#39;)&#39;;
a.href = &#39;/search/label/&#39;+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement(&#39;span&#39;);
span.innerHTML = &#39;(&#39;+ts[t]+&#39;) &#39;;
span.className = &#39;label-count&#39;;
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(&#39; &#39;);
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>
</p>
<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>
<br/>Powered By:<small><a href='http://www.tips-untuk-blogger.blogspot.com'>Blogger Widgets</a></small>
<b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>

5. Jika sudah selesai, silahkan cari kode ]]></b:skin> dan letakkan kode berikut ini di ATASnya.

#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:&quot;&quot; !important}

6. Simpan Template, dan hasilnya akan tampak seperti label situs ini.
Semoga berhasil dan mohon maaf jika ada kesalahan. Thank's. (Jkt/2012)