Tag Cloud Cumulus

Saat iseng browsing, beberapa waktu yang lalu saya melihat salah satu blog dengan bentuk label yang unik. Kalau biasanya dalam bentuk list, blog yang saya lihat ini labelnya seperti melayang-layang. Jika kursor kita arahkan ke label tersebut maka label itu akan berputar. Wew, saya cukup terkesan saat pertama kali melihatnya.

Setelah browsing Mbah Google akhirnya saya tahu kalau itu namanya tag cloud. Hehe. Setelah dapat tutorialnya, tanpa pikir panjang langsung saja saya praktekkan.
Cara membuatnya cukup mudah, tinggal ikuti cara dibawah ini :

1. Sign in ke blogspot

2. Klik tata letak

3. Klik tambah gadget lalu klik label

4. Simpan dulu label tersebut

5. Klik edit HTML

6. Beri centang pada kotak expand template widget

7. Cari kode di bawah ini :

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

Untuk memudahkan, tekan ctrl+f pada keyboard lalu copy kode dibawah kemudian paste di kotak dialog.

8. Setelah ketemu, letakkan kode dibawah ini dibawah kode diatas tadi.

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

9. Klik preview, jika sudah berhasil baru disimpan. Jika belum berhasil maka teliti lagi langkah-langkah yang kamu lakukan diatas.

10. Selamat mencoba, semoga bermanfaat :)

nb :

- Jika ingin merubah ukuran tag cloud maka cari kode dibawah ini lalu ganti ukurannya dengan mengganti angka 240 dan 300 sesuai keinginan kamu.

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

- Jika ingin merubah kecepatan tag maka ganti angka 100 pada kode dibawah ini sesuai keinginan kamu. Semakin besar angkanya maka semakin cepat.

so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);