[Tutorial] Flash Animated Label Cloud

Tutorial kali ini sebenarnya dah banyak orang lain buat. Search Google dan anda akan menemui berpuluh tutorial. Tapi versi kali ini saya ubahsuai disebabkan kegagalan saya mencari code dalam template.

Jadi ubahsuai kali ini mungkin membantu mereka yang bermasalah dalam kod HTML.

Widget ini pada asalnya adalah untuk pengguna WordPress. Jadi untuk pengguna blogger seperti saya, kenalah bermain dengan template.

Untuk mengetahui apakah benda Flash-Animated-Label-Awan-Ntah-Panjang-Nye-Name nih, boleh check Widget ::SPECIES:: kat kanan nih. Bagi mereka yang tidak mempunyai Flash Player, download dulu kat laman web Flash.

1- Buka Layout --> Edit HTML

2- Tick Expand Widget Template

3- Cari kod ini. Untuk memudahkan anda, cuba gunakan Ctrl+F.

<b:section class="sidebar" preferred="yes">

Mungkin beberapa user mengalami masalah untuk menemui code ini lebih-lebih lagi jika sidebar anda berlainan dari biasa. Maka cuba cari bahagian yang di-BOLD.

4- Copy paste kod ini betul-betul SELEPAS kod tersebut:

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

5- Huruf berwarna MERAH dalam kod tersebut boleh diedit:

Lebar - 240px
Tinggi - 300px
Warna background - #ffffff (putih)
Saiz tulisan - '12'
Warna tulisan - 333333 (kelabu)

Klik SINI untuk panduan memilih warna.

6- Sebelum Save Template, Preview terlebih dahulu. Ubah sampai laa puas hati.

7- Selepas Save, masuk ke Layout --> Page Elements dan anda boleh tukar Title bagi widget ini.

Selamat Mencuba.

Kredit kepada BloggerBuster

Pengguna WordPress yang inginkan plugin ini boleh berkunjung ke RoyTanck's