04 September 2008

[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

6 penghinaan diterima:

Jackster® on September 5, 2008 at 6:30 AM said...

salam alayk...

weh, aku nye blog try gak pakai,
tp awat die tnjuk 3 je categories aku?
lagi satu xde haha

cpt2, resolve2 haha
tq

Jackster® on September 5, 2008 at 6:33 AM said...

haaa tgk, ko pnye pn x ckop satu,
cube ko cek btol2 haha

shairah on September 6, 2008 at 2:21 AM said...

rasenye mmg gitu kot.aku pnye pon x cukop satu gak.huhu

box die xde border ek.agk2 cmne ek kalo nk tmbh border line keliling box die?

Jackster® on September 6, 2008 at 8:19 PM said...
This comment has been removed by the author.
Jackster® on September 6, 2008 at 8:26 PM said...

mmg la cmtu.. tp kire bugs la tuh, so die kene la fix..
skrg duk tgu reply dari amanda tuh,
x reply2 ag, bz sgt kot hehe


pastu nk border ke..

tgk line yg ke6.. mende bawah ni,

<div class='widget-content'>


ganti dgn ni

<div align='center' style='border:1px; border-style:solid'>



depends atas template laa
aku pnye bley je, try la tgk

shairah on September 8, 2008 at 6:56 AM said...

owh ok..tenkiu sedara jackster.akn ku coba selepas ini

 

License

This blog by Muhammad Hafiz Adam is official website of Creative Designer and licensed under a Creative Commons Attribution-Noncommercial 2.5 Malaysia License.

You're free to Share (copying, distributing and transmitting) and to Remix (adapting the work) under the following conditions:
a) Attribution;
You must attribute the work by linking back to this blog pr anything similar (but not in any way that suggests that I endorse you or your use of the work).
b) Noncommercial;
You may not use this work for commercial purposes.

Categories

~AkuDarahAnakMalaysia~ Copyright © 2009 Community is Designed by Bie Blogger Template