edublog: Label berawan

Saya pikir blog saya butuh sedikit dandanan biar ga terlalu monoton, tapi jangan yang norak dan bikin loading lamban. Setelah jalan-jalan ke beberapa blog, kurasa label cloud kreasi phydeux cukup menarik. Yah, setidaknya label yang besar kecil mengambang-ambang di samping membuat blog saya lebih enak dipandang.

Kalau cara buatnya.. jelas saya ga bisa. Oon tentang programming tuh. Tapi kalau cara menampilkannya, ya ga ada susahnya. Begini..

0. Buka dashboard >> template >> layout >> pastikan ada elemen bernama label / kategori post

1. Lalu edit html >> backup template dulu.

2. Di kotak kode html, cari [ Ctrl+F ] kode yang begini ]></b:skin>

Lalu letakkan kode ini di pas di atasnya.

/* 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}

3. Lalu cari [Ctrl+F] kode yang begini <head/>

Dan letakkan kode ini di bawah ]></b:skin> tapi di atas <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>

4. Nah, berikutnya.. scroll lagi ke bawah dan cari kode widget yang seperti ini

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

Hapus kode tadi dan gantikan dengan kode di bawah

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

Lalu pastikan di blog kita sudah ada posting yang dilabeli. Kalau sudah, coba lihat perubahan pada blog. Akan ada label di blog yang mengambang-ambang membentuk awan. Kalau ga ada, hmm.. upload kembali template blog, lalu coba kembali langkah di atas dari awal.

Nah sudah muncul? Kalau sudah, selamat!

Untuk mengubah pengaturan label agar matching dengan selera kita, yang perlu diubah ada :

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

#labelCloud {text-align:center;font-family:arial,sans-serif;}

Max Font Size >> Label dengan posting terbanyak akan ditampilkan dengan ukuran teks 20 pixel. Ganti angka ini dengan ukuran sesuai selera.

Maxcolor >> warna [dalam RGB] label dengan posting terbanyak. Ubah angka ini ke warna sesuai selera. Untuk referensi, silakan download software ini atau coba masukkan kata kunci “RGB color code chart” ke mesin pencari di atas

Minfontsize dan mincolor >> ukuran warna label dengan posting tersedikit.

Lcshowcount >> Bila false, label tidak akan memunculkan jumlah postingan yang ada di label itu. Ubah menjadi true untuk memunculkannya.

Text-align : center >> rata tengah. Ubah menjadi left, right, atau justify untuk rata kiri, kanan, kiri dan kanan.

Oke. Selesai..