Cara Membuat Label Berbentuk Awan (Tag Cloud)

Apaan tu...? Label awan merupakan salah satu bentuk kumpulan daftar label yang ditampilkan seakan-akan berada di atas awan (contoh: seperti dalam blog ini). Trik blogger ini juga sangat menarik untuk di adopsi dalam blog kamu. Kalau biasanya kamu hanya menggunakan label default bawaan widget atau gadget blogger.com, sekarang kamu memiliki salah satu variasinya. By the way... dari pada ngomong melulu lebih baik kita mulai saja triknya...

• LogIn ke Blogger.com

• Klik tata letak, lalu edit HTML

• Setelah jendela muncul, backup terlebih dahulu templatemu. Setelah itu, beri tanda centang pada Expand Tepmplate Widget.

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

• Langkah selanjutanya cari code seperti dibawah ini (Ctrl+F) :

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

• Apabila tidak ketemu, kalian hanya tinggal mengurangi code tersebut sedikit demi sedikit agar code yang kita cari akan terlihat atau akan ketemu, setelah itu ganti code tersebut dengan code dibawah 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'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Catatan :
1. Ganti kode lebar area label("240"), tinggi area label ("300"), dan warna area label (#ffffff) sesuai dengan ukuran elemen halaman (lokasi peletakkan label awan) di blog kamu.
2. Jangan sampai kelupaan jika kamu merubah warna area label. maka kamu mungkin perlu juga merubah warna teksnya yang ditunjukkan dengan (333333). Khusus untuk perubahan warna teks, cara memasukkan kode tanpa embel-embel #.
3. Atur putaran kecepatan dengan mengganti kode (100), makin besar makin cepat.

Kalau kode script di atas tidak bisa di blogmu pakai yang ini :

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<div class='widget-content'>
<div id='LabelDisplay'>
</div>
</div>
<script language='javascript' type='text/javascript'>
function zoomStyle() {
var max = 0;
var min = 10000;
<b:loop values='data:labels' var='label'>
if (<data:label.count/> &gt; max)
max = <data:label.count/>;
if (<data:label.count/> &lt; min)
min = <data:label.count/>;
</b:loop>
var display = &quot;";
<b:loop values='data:labels' var='label'>
var delta = <data:label.count/> - min;
var size = 80 + (delta * 100) / (max - min);
display = display + &quot;<span style='font-size:" + size + "%'><a
expr:href='data:label.url + "?max-results=100"'
style='text-decoration:none;'><data:label.name/></a></span> &quot;;
</b:loop>
obj = document.getElementById(&#39;LabelDisplay&#39;);
obj.innerHTML = display;
}
zoomStyle();
</script>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

• Setelah itu selesai, tinggal kalian Simpan.

Taraaaaaa,.,.., Sekarang anda telah memiliki sebuah Tag Cloud...
Tidak lupa saya ingatkan, dalam menyalin kode-kode tersebut, jangan sampai kurang atau lebih karena berakibat untuk blog atau website anda....