Cloud animasi

Baru juga pasang label cloud dengan animasi, eh...dah ada yang nanyain gimana cara bikinnya. Yawda daripada bingung dan ribet kalian pada nyari kesana kesini ga dapet, aku kasih deh tutornya.

widget yang satu ini, merupakan kombinasi dari javascript dan flash. Kalo boleh jujur, saya dapatkan widget ini dari blogger buster (versi english). Nah...berhubung blog saya ini bahasa indo, jadi saya kasih tutornya pake bahasa indo juga biar pada ngerti. Gimana....dah ga sabar pengen pasang ya...?! yawda langsung aja simak langkah - langkahnya di bawah ini :

Setelah kalian login di blogger, langsung saja menuju tata letak kemudian edit html. Jangan kasih tanda centang pada kolom expand template widget, karena hanya bikin bingung doang. Selanjutnya cari kode html ini di template blog kalian. Kalo ga ada, ya...yang mirip2 aja deh.

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

Nah...kalo dah ketemu, tambahin dibawahnya kode html berikut :

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

....kalo udah copy pastenya, klik pratinjau....trus kalo hasilnya dah keliatan di sidebar blog kalian , berarti beres deh. Tinggal bagaimana kalian memberikan sentuhan lain untuk widget tersebut supaya keliatan klop dengan blog kalian.

Kustomisasi Label Cloud Animasi

Nah...untuk masalah yang satu ini, perlu saya kasih tahu bahwa sesuai kode yang tadi kalian masukan seperti diatas, bahwa widget ini mempunyai settingan defaultnya seperti dibawah ini :

1. Panjang widget = 240px
2. Lebar widget = 300px
3. Background = putih
4. Warna huruf = abu
5. ukuran huruf = 12

untuk merubah settingan diatas supaya lebih cocok dengan blog kalian, ikuti petunjuk berikut :

1. untuk merubah panjang (merah) dan lebar (biru) widget, kalian cari kode seperti berikut, lalu ganti angkanya :

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

2. untuk merubah warna background, tinggal ganti saja kode hexa yang berwarna hitam sesuai kode diatas.

3. untuk merubah warna huruf, cari kode berikut lalu ganti angkanya (merah) sesuai kode hexa warna yang kalian kehendaki

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

4. untuk merubah ukuran huruf, cari kode berikut lalu ganti angka (warna merah) sesuai ukuran huruf yang dikehendaki

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

Nah...gampang kan...?! atau masih pada bingung...?? Selamat berbingung ria aja deh...