[TUTORIAL] Membuat Animated Cloud Labels

02:57 Unknown 2 Comments

Sebenarnya, animated cloud labels ini udah ada dari waktu dulu awal-awal blog muncul. Sejak saya gabung di blogger tahun 2007 pun udah ada di beragam blog tentang tutorial blogger widgets. Tapi karena masih ada teman-teman yang pengen simpan di sidebar blognya jadi saya coba bikin tutorial gampangnya di sini. Soalnya biar enggak usah ceritain berkali-kali lagi hehe. Mudah-mudahan animated cloud labels ini masih belum ketinggalan jaman ya, soalnya saya juga masih seneng pakenya :D

Pertama : Menambahkan Label atau Cloud Kategori

1. Masuk ke Dashboard > Layout > Add Gadget.

2. Nah sekarang pilih Labels dari pop up window dan ubah pengaturannya seperti di bawah ini.

3. Setelah itu tinggal klik save pada pengaturan labelsnya.

4. Jangan lupa save arrangement pada pengaturan layout.

5. Buat bikin animated labels-nya masuk ke Template > Edit HTML.

6. Klik jump to widget terus pilih Label.

7. Habis itu tinggal copy paste kode html di bawah ini deh. Selesai.

<b:widget id='Label99' locked='false' title='Labels' type='Label'>

<b:includable id='main'>

<b:if cond='data:title'>

</b:if>

<div id='flashcontent'>My Bloggers World <a href='http://mybloggersworld.com/'>Mbw</a> and <a href='http://mybloggersworld.com/'>Mbw</a></div>

var so = new SWFObject("http://sites.google.com/site/bloggerustemplatus/code/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>

Jangan lupa save apapun itu kalau habis ngotak-ngatik tampilan blog. Dan buat cari aman, jangan lupa juga buat back up pengaturan yang lama biar kalau hasil editan yang baru kurang memuaskan, kamu bisa langsung restore. Selamat mencoba!

Kiss,

- P