Tips Membuat Label Cloud

Tips Membuat Label Cloud : Jika selama ini kita sudah merasa “bosan” dengan tampilan widget “label” (kategori/tag bawaan blogspot) mungkin dapat mencoba label yang satu ini. Adalah label cloud yang mungkin akan memberikan variasi tampilan label yang sedikit berbeda sehingga dapat menjadikan blog kita lebih estetis setidaknya lebih variatif dari sebelumnya.

Label cloud adalah kumpulan-kumpulan label (kategori) yang ditampilkan sedemikian rupa dan direpresentasikan dengan ukuran huruf yang berbeda-beda, label yang mempunyai artikel semakin banyak akan direpresentasikan dengan ukuran huruf yang semakin besar dan sebaliknya label yang mempunyai kumpulan artikel semakin sedikit maka akan direpresentasikan dengan ukuran huruf yang semakin kecil. Tampilan label dengan ukuran huruf yang berbeda-beda inilah yang mungkin kemudian disebut dengan label cloud karena menyerupai awan.

Ketika jalan-jalan di “rumahnya” Kang Rohman, Tips dan Trik Blog mendapati tips tentang pembuatan label cloud tersebut yang mungkin dapat kita praktekkan dalam blog kita masing-masing. Jika tertarik, silakan ikuti tipnya berikut ini.

Langkah-langkahnya adalah sebagai berikut.

Pertama, login ke account blogger hingga masuk Dasbor >> Tata Letak >> Edit HTML
Kedua, jangan lupa centangi “Expand Widget Template”
Ketiga, tempatkan kode berikut di atas kode ]]></b:skin>

/* style label cloud
----------------------------------------------- */
#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}

Keempat, tempatkan kode berikut di atas 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>

Kelima, cari kode seperti berikut 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'>
<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>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Keenam, ganti kode di atas 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'/>
<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>

Ketujuh, simpan template

Kedelapan, selesai

Catatan

Sebelum melakukan pengeditan HTML seperti di atas, pastikan gadget "label" telah ditambahkan dalam side bar blog.

(sumber : blog Kang Rohman)
Description: Tips Membuat Label Cloud Rating: 4.5 Reviewer: Unknown - ItemReviewed: Tips Membuat Label Cloud