[TUTORIAL] Membuat Animated Cloud Labels
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'>
<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'>My Bloggers World <a href='http://mybloggersworld.com/'>Mbw</a> and <a href='http://mybloggersworld.com/'>Mbw</a></div>
<script type='text/javascript'>
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!
3 comments: