Cara Membuat Label Cloud Lainnya

Sebagai tambahan untuk membuat label cloud. Kali ini kita akan membahas label cloud yang agak berbeda dengan label cloud yang berputar. Walaupun kelihatannya sama tapi yang satu ini tidak lah berputar-putar. Sobat sekalian bisa praktekin sendiri nanti pada blog masing-masing. Silahkan saja mau pilih yang mana saja yang sobat semua suka. yang pasti mari kita budayakan berbagi info dan pengetahuan agar orang Indonesia menjadi banyak yang bertambah pintar hehehe.

Baiklah Langsung saja kita praktekin caranya sobat ya. Tapi sebelum mencoba lebih baiknya sobat semua back up dulu templete punya sobat ya. langsung meluncur :

Caranya begini sobat :

1. Masuk dulu layout-edit HTML-lalu pilih expand widget template

2. Cari kode seperti ini ]]></b:skin>

3. Copy kan kode di bawah ini sebelum kode diatas :

/* Label Cloud Styles<br /><br />----------------------------------------------- */<br /><br />#labelCloud {text-align:center;font-family:arial,sans-serif;}<br /><br />#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}<br /><br />#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}<br /><br />#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}<br /><br />#labelCloud a{text-decoration:none}<br /><br />#labelCloud a:hover{text-decoration:underline}<br /><br />#labelCloud li a{}<br /><br />#labelCloud .label-cloud {}<br /><br />#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}<br /><br />#labelCloud .label-cloud li:before{content:"" !important}

4. Sekarang temukan lagi kode ]]></b:skin>
5. Letakkan kode ini dibawahnya kode ]]></b:skin>

<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 kalo selesai kini tinggal widgetnya...temukan kode dibawah ini :

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

7. Ganti/hapus kode diatas dengan diganti kode :

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


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>

8. Kalau sudah jangan langsung disimpen sobat tapi dipreview dulu sobat
9. Kalau udah ok baru disimpen sobat. Dan kamu bisa melakukan perubahan2 kayak gini...:

var cloudmin=1;
jika diisi angka 1 maka seluruh label akan muncul.
jika diisi angka selain 1 maka labe jumlah posting yang sama dengan itu saja yang ditampilkan

Catatan :

Variabel maxFontSize digunakan untuk memberi tahu besar maksimum teks label dengan posting terbanyak. Sedangkan variabel maxColor memberi seting warna label dalam format RGB (red, green, blue). Format warna ini mencampur warna merah, hijau, dan biru dengan intensitas terkecil dengan angka nol dan terbesar dengan 255. Kalo mau pake model ini sebaiknya label mu lebih dri 3 dengan jumlah posting yang berbeda biar bentuk awannya nampak.

Selamat mencoba dan moga berhasil ya.