Cara Membuat Tag Cloud Animasi

Beberapa waktu yang lalu Saya mendapat request dari salah satu sobat blogger untuk posting artikel cara membuat tag cloud. Nah pada versi kali ini, saya akan sharing tag cloud ber-animasi.

Apa sih tag cloud itu? Tag cloud atau disebut juga label cloud merupakan daftar semua label yang digunakan untuk menandai suatu artikel. Label/category postingannya berbentuk seperti awan, bentuknya acak. Dari gambar di samping sobat pasti sudah dapat menebak apa itu tag cloud.

Jika sobat tertarik seperti widget di sidebar saya ini, maka ikuti langkah berikut ini :

1. Login ke akun blogger sobat.

2. Masuk ke Rancangan > Edit HTML.

(Sebelumnya lakukan back-up templates untuk berjaga-jaga.)

3. Copy script di bawah ini:

<b:widget id='Label99' locked='false' title='Tag Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://daw-xp.googlecode.com/files/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Codec by <a href='http://daw-xp.blogspot.com/'>DAW-XP</a></div>
<script type='text/javascript'>
var so = new SWFObject("https://sites.google.com/site/dawxpblog/home/tagcloud.swf", "tagcloud", "200", "150", "7", "#000000");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0xffffff");
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>

Keterangan:

» Lebar widget : 200px
» Tinggi widget : 150px
» Warna latar (background) : abu gelap atau #000000
» Warna huruf : putih atau 0xffffff

Sobat bisa mengubahnya sesuai keinginan sobat (lihat kode warna disini)
4. Letakkan script di atas di bawah kode:

<b:section class='sidebar' id='sidebar' preferred='yes'>

(Gunakan Control + F untuk memudahkan pencarian, bisa dengan kata kunci id='sidebar')
5. Simpan templates sobat, dan lihat hasilnya ..
Sobat bisa mengubah letak dari widget tag cloud sobat di elemen laman.