Jumat, 12 September 2008

Cara Membuat Label Cloud













Nah...pernah liat gambar label kayak diatas gag...??mungkin labelmu hanya model baris vertikal kayak punya ku tuwww... tapi kini aq punya CARA buat mempercantik tampilan blog dengan mengubah tampilan label jadi kayak awan(LABEL CLOUD).
Label cloud sangat menarik karena tampilannya yang cool dan lebih modern. Apalagi ukuran dan tebal font label dengan isi yang lebih banyak akan ikut membesar pula. keren ueue...
tapi...label ini lebih bagus di pake kalo label mu uda lebih dari lima, biar bentuknya jadi lebih indah...

Cara mbuatnya kayak gini nie...
*back up dulu template yang diubah pada menu download full template.
*lalu masuk layout-edit HTML-lalu pilih expand widget template
*cari kode seperti ini :

]]></b:skin>



*copy kan kode di bawah ini sebelum kode diatas



*sekarang temukan lagi kode :

]]></b:skin>



*letakkan kode ini dibawahnya

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



*nah kalo selesai kini tinggal widgetnya...temukan kode dibawah ini(ctrl+f)

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



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



*
kalo semua uda terpasang...harusnya label anda sudah terlihat adanya perubahan. Jika tidak, ulangi lagi langkah-langkah sebelumnya atau cek apakah salah satu label kamu memiliki lebih dari satu posting. Juga cek jangan sampai label yang kamu buat memiliki tanda petik dua (“).

* 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


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


14 komentar:

  1. wah, ini jam monyet nya ngalangin mas...

    BalasHapus
  2. Tapi koq saya slalu ga bisa ya?!

    BalasHapus
  3. koreksi lagi ajah...mungkin kmu scripnya ada yg salah taruh...

    BalasHapus
  4. tes.. tes,, tes.. suara percobaan.. ehm.. ehm.. ehm.. tes..

    BalasHapus
  5. oke bang aku laksanakan

    BalasHapus
  6. Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
    Pesan error XML: The content of elements must consist of well-formed character data or markup.

    BalasHapus
  7. knp tdk bisa ya ... ??? gw udah coba di blok ane ... http://okha-danjhu.blogspot.com

    BalasHapus
  8. wah caranya panjang jga yach...mas klo buat label cloud berputar kayak bola gimana?

    BalasHapus
  9. kata org jawa matur nuwun info'nya..
    ttp saia blum begitu bisa,maklum newbie..
    (memanx susah belajar tnpa guru iaa)
    hikz...hikz...

    BalasHapus