Trik Membuat Tag Cloud Cumulus Pada Blog

Apa kabar mu hari ini kawan? Terimakasih sudah setia untuk selalu mengunjungi blog ini. Pada kesempatan ini saya ingin berbagi tentang sebuah trik yang patut Anda coba. Beberapa hari yang lalu saya sempat mengunjungi blog teman saya. Ketika itu saya melihat sebuah tampilan widget daftar tag (label) yang menarik. Tampilan widget  tag tersebut berkumpul membentuk sebuah lingkaran yang kemudian apabila kursor di arahkan ke daftar tag tersebut maka widget tag tersebut akan berputar-putar dan melayang-layang sesuai dengan gerakan arah kursor yang Anda gerakan. Widget tersebut disebut Tag Cloud Cumulus. Anda tertarik? Kalau begitu baca terus artikel ini ya^_^. Berikut adalah caranya:

• Pertama-tama, login terlebih dahulu ke account blogger  Anda untuk masuk ke halaman Dashboard atau CPanel.
• Kemudian klik tombol Tata Letak>> Edit HTML
• Kemudian,  jangan lupa untuk mencentangi “Expand Template Widget”.
• Sekanjutnya, temukan kode berikut ini. 

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

• Untuk selanjutnya, copy-paste kode yang ada di bawah ini.

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

• Klik simpan template.

Spesifikasi dari setup default tag cloud cumulus dari kode di atas adalah sebagai berikut.

o        Lebar dan tinggi widget tersebut disetup masing-masing 240px dan 300px.

o        Warna background disetup dengan warna putih.

o        Warna Teks disetup dengan warna abu-abu (grey).

o        Ukuran font disetup sebesar “12”.

Kustomasi Tag Cloud Cumulus

Jika Anda ingin mengatur ukuran tinggi, lebar dan warna background dari widget ini, maka Anda dapat melakukan langkah berikut ini:

1.      Edit kode di bawh ini:

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

Kode yang diberi warna merah adalah kode yang dapat Anda rubah. Jika Anda ingin merubah lebar maka ganti angka 240 dengan ukuran yang Anda kehendaki. Kemudian untuk merubah ukuran tinggi, maka Anda dapat merubah angka 300 dengan angka yang Anda inginkan. Sedangkan untuk merubah warna background rubahlah kode warna #ffffff dengan kode warna yang Anda kehendaki pula. Jika Anda tidak tahu kode warna gampang kok. Anda tingga bertanya saja ke “embah google”^_^ alias searching.

2.       Jika ingin melakukan kustomasi terhadap warna teks, silakan edit pada bagian seperti di bawah ini.

so.addVariable("tcolor", "0x333333");

Untuk mengganti warna teks, gantilah kode 333333 dengan kode warna yang Anda inginkan.


3. Bila Anda masih belum puas dengan tampilan widget yang Anda inginkan, Anda juga bisa merubah atau mengutak-atik ukuran font. Caranya adalah edit kode berikut ini:

so.addVariable("tagcloud", "");

Pada kode yang berwarna merah, Anda dapat mengganti dengan ukuran huruf  yang sesuai dengan keinginan Anda.

Jika sudah silakan klik tombol Simpan template.

Jika widget yang Anda buat tidak bisa ditampilkan, itu mungkin karena aplikasi Flash Player pada computer Anda belum terinstal. Karena untuk melihat tampilan dari widget ini syaratnya adalah sudah terinstalnya aplikasi Flash Palyer 7 ke atas.

Ok, kawan.. selamat mencoba ya…^_^.

Jangan lupa komennya ya@_@. Terimakasih.

Oleh: Syaiful Rachman