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 ]]>
/* 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 .
// 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;
Kelima, cari kode seperti berikut ini.
Keenam, ganti kode di atas dengan kode di bawah ini.
// 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;
var theName = “”;
ts[theName] = ;
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);
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)
greataurora 