dalam bahasa kebanyakan Blogger disebut dengan Label Cloud (label awan) atau
Tag Cloud yakni sebuah animasi untuk mengelompokkan artikel dengan label
yang sama dan merupakan gabungan bahasa flash dengan javascript.
Dengan berbekal keyword Label cloud atau tag cloud, kamipun
akhirnya menemukan codenya melalui search engine. Pertama kali kami pasang, kami memberi judul widget ini dengan Label Cloud namun ketika salah seorang pembaca
kami yang kebetulan asing dengan istilah-istilah blogger, menanyakan tentang
tambahan widget Label cloud ini, kami pun berfikir bahwa akan kesulitan jika
yang membaca Blog ini adalah non Blogger tentu hal ini tidak mudah untuk
dimengerti, kebetulan saja kami mengenal pembaca yang menanyakan akan hal ini.
Pada akhirnya kamipun memutuskan untuk merubahnya dengan
judul widget "Daftar Isi", sebab selain berfungsi sebagai gambaran isi dari Blog,
bahasa "Daftar Isi" lebih bisa dimengerti oleh seluruh pembaca non Blogger.
Label cloud menurut kami akan membuat Blog kita menjadi lebih menarik sebab
Label Cloud ini akan mengelompokkan artikel kedalam label yang sama, dikemas
dengan animasi yang menyerupai awan yang berputar-putar, hal ini tentu akan
memunculkan daya tarik tersendiri terhadap blog kita, pembaca akan benar-benar
menikmati keindahan animasi dalam memilih-milih label yang akan dibaca, jadi
label awan dapat menarik perhatian pengunjung.
Cara Membuatnya
Pertama-tama, kamu
harus sign in dulu ke blog kamu. lalu klik layout/tata letak, lalu klik "Edit
HTML" jangan lupa untuk selalu membackup template terlebih dahulu.
Langkah kedua, cari
tulisan :
<b:section
class='sidebar' id='sidebar' preferred='yes'>
atau kadang-kadang jika tidak ada
tulisan id='sidebar' biasanya
tulisannya adalah id='sidebar2'
di blog kamu.
Langkah ketiga, jika kamu sudah temukan maka copykan kode
dibawah ini setelah kode tersebut. berikut kode yang harus di copy kan :
<b:widget id='Label99' 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>
Langkah keempat, simpan templete lalu
preview Blog kamu.
Modifikasi Label Cloud
Kamu juga bisa memodifikasi tamplete diatas sesuai dengan
selera kamu (disesuaikan dengan warna dasar blog dan ukuran sidebar) dengan
merubah kode diatas (cari lagi kode yang barusan kamu copy paste) pada bagian
kode berwarna merah dibawah ini
:
1. Merubah lebar, tinggi dan background Label Cloud
var so = new
SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf",
"tagcloud", "240", "300",
"7", "#ffffff");
Keterangan :
- Angka 240 warna merah diatas
adalah ukuran lebar Label Cloud kamu
- Angka 300 warna merah diatas
adalah ukuran tinggi Label Cloud kamu
- Sedangkan #ffffff merupakan
kode warna background (keterangan kode warna klik
disini)
2. Merubah warna font (huruf) pada Label Cloud (keterangan kode warna klik
disini)
so.addVariable("tcolor", "0x333333");
3. Merubah ukuran font (huruf) pada Label Cloud
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>");
Demikian tutorial membuat Daftar Isi dengan animasi Label Cloud kali ini, untuk
tutorial selanjutnya akan kami berikan cara mengenai membuat daftar isi dengan
tampilan seperti yang kamu lihat pada tulisan "daftar isi" diatas, terima kasih
kepada roytanck dan
Amanda Fazani yang telah membagi
kode dan sharing atas informasinya.
Postingan
