Membuat Daftar Isi - Label Cloud

Daftar Isi dengan bentuk animasi yang kami pasang pada Blog ini sebenarnya 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(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</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.
by : www.alifiarahmany.blogspot.com

Artikel Terkait