Cerita Miko: Membuat Label Animasi "blogumulus"

Berhari-hari sudah saya coba otak-atik mengenai "blogumulus", maklum saya masih seorang pemula dalam dunia perbloggeran dan parahnya lagi saya tidak faham sama sekali dengan bahasa html, padahal pada posting kali ini sedikit banyak harus mau mencoba bongkarmuat html template blog kita dengan resiko error pada tampilan halaman blog kita. Ok..! langsung saja kita mulai membahas apa itu blogumulus yang pada awalnya di populerkan oleh Roy Tanck melalui Tag-cumulus yaitu berupa kumpulan label posting yang terjalin menjadi sebuah tampilan animasi flash berupa widget.
Widget yang di populerkan oleh Roy Tanck ini pada awalnya diciptakan untuk pengguna Wordpress dan berbasis flash sehingga bisa dianimasikan. Para pengguna blogspotpun jadi tergiur untuk dapat menampilkan daftar label posting mereka seperti halnya para pengguna wordpress dengan tampilan tag-cumulusnya termasuk saya karena penasarannya coba browsing sana sini dan oprek html template saya di sana sini namun juga berkali-kali tetap gagal. Semua artikel hanya mengacu pada seorang blogger yang sudah mencoba mengimplementasikan widget ini sehingga bisa di pasang di Blogspot, Thank's to Amanda Fazani atas kreatifitasnya. maka berevolusilah "Tag-cumulus" menjadi "Blogumulus" Untuk melihat seperti apa label animasi ini,

Oke, bagi anda yang tertarik untuk memasang label animasi atau label flash ini, kita langsung menuju pada langkah-langkahnya.

1. Login ke blogger dengan ID anda.
2. Klik Tata Letak.
3. KLik tab Edit HTML.

4. Klik tulisan Download Template Lengkap (ini untuk memback-up bila terjadi kesalahan). agar templatenya aman.

5. Cari kode yang mirip dengan kode di bawah ini :

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

(untuk langkah no. 5 ini adalah kunci dari semua kegagalan saya, karena begitu saya tekan tombol shift+F3 pada tampilan edit html dan saya cari dengan copy paste sript di atas saya tidak pernah menemukan bagian yang mirip apa lagi sama dari script html tersebut, entah dari template saya atau memang saya yang sudah kek odonk-odonk mikirin ni trik kok ga ketemu-ketemu untuk menuju langkah selanjutnya, akhirnya setelah sekian lama buntu saya coba cari lagi tapi dengan kata kunci text tebal warna biru dari script di atas dan hasilnya adalah saya dapat menuju ke langkah selanjutnya karena script di atas ternyata dapat saya temukan meskipun terdapat sedikit perbedaan dari semua langkah yang saya baca via googling, sebagai catatan buat saya pribadi saja, script html yang saya temukan di template html saya bentuknya seperti script yang tertampilkan di bawah ini, mohon penjelasannya bagi teman-teman yang paham dengan bahasa html kenapa berbeda dengan script html di atas)

<b:section-contents id='sidebar-left-1'>

6. Copy kode di bawah ini kemudian taruh kode tersebut (paste) dibawah kode di atas.

<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://sites.google.com/site/bloggerustemplatus/code/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> Posted by <a href='http://adesyams.blogspot.com/'>Ade'S Tricks</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>

7. Klik tombol SIMPAN TEMPLATE

Untuk langkah selanjutnya agar tampilan label animasi ini serasi dengan templet blog anda, sesuaikan kode-kode berikut dengan templet yang dipakai. Misal:

Merubah lebar, tinggi dan warna background.
Variable untuk lebar dan tinggi ada pada baris script berikut,

var so = new SWFObject("http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

240 menunjukkan lebar widget.
300 menunjukkan tinggi widget.
#ffffff menjukkan warna background.
100 menunjukkan kecepatan putaran.

Merubah warna text.
Variable untuk lebar dan tinggi ada pada baris script berikut,

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

"tcolor" adalah flash variable, jadi pastikan hanya mengganti angkanya saja.

Merubah ukuran font.
Variable untuk lebar dan tinggi ada pada baris script berikut,

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

12 menujukan ukuran font yang digunakan.

~> bila anda menginginkan background yang transparan, maka anda tinggal menghapus tanda // dari script di atas