Monday, May 11, 2009

Tutorial Flash Label





Ok kawan² kali ni aku nak share cara² nak buat Flash Label atau lebih dikenali sebagai Cloud Label seperti di atas... Kelebihan Flash Label ni adalah untuk menyingkatkan label yang banyak kedalam 1 kotak dan anda boleh menentukan warna tulisan dan jugak background pada kota tersebut namun ada jugak kekurangannya yang mana bilang post pada label tidak tertera... Walaubagaimanapun Flash Label ni bagi aku cukup menarik kerana ianya dapat mengurangkan ruang tinggi pada sidebar aku. Dalam banyak² code yang aku pelajar code ini merupakan code yang simple pernah aku temui dan berikut adalah cara² memasukkan Flash Label pada blog.

1. Login ke ID Blogger atau terus ke "Dashboard"
2. Klik "Layout" kemudian pilih Bahagian Tab "Edit HTML"
3. Lepas tu cari code seperti dibawah ini



4. Bila dah jumpa code diatas... copy code dibawah ni dan paste pada bahagian bawah no. 3 tadi.



<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(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);

// uncomment next line to enable transparency

//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);

so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);

so.addVariable(&quot;mode&quot;, &quot;tags&quot;);

so.addVariable(&quot;distr&quot;, &quot;true&quot;);

so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);

so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);

so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);

so.write(&quot;flashcontent&quot;);

</script>

<b:include name='quickedit'/>

</div>

</b:includable>

</b:widget>



5. Dah Paste.. Save laaa.. settle :P

Tambahan

Tukarkan tulisan berwarna merah mengikut kesesuaian blog masing² :
240 = Lebar
300 = Tinggi
#FF9900 = Warna Background
000000 = Warna Tag
12 = Size Huruf

9 comments:

Ummi Hanie said...

bagusss sesangat ...

mmg Hanie tgh carik2 entry tutorial yg ni

Hanie baru jer wat Label cloud tp yg x bergerak2 punyer..this one yg Hanie nak sesangat . than x ya Ady...

afsal_8281 said...

aku kene amik masa nak buat ni sbb aku ni agak bebal ye..
neway thanks ady for dis tutorial
aku tercari2 gak cmne org buat then
now ko da bg tutorial ni...tq again

Ummi Hanie said...

alamakkk...

oleh kerna aritu dh buat label cloud jenis laen , biler nk buat jenis ni ade error sket r...

adoi dah feninnn..langsung label dah xmo kluar

:: Leeza Joe :: said...

saye dah try buat,..
pas2 x jumpe plak coding nak tukar kaler background..warna tag..lebar..tinggi dan font size..
camner erk????

Anonymous said...

aku dah buat dulu...
tapi kini... tidak lagi...
hehe

Ady Syam said...

Kepada kawan² yang dah cuba masukkan flash label tapi tak berjaya buleh hubungi aku melalui YM... Insyallah aku tulun kalau termampu :)

shahril said...

kepada sym... tolog arr sayer yang tak reti nie... sayer tengah blerrr... ader kontek number takk.... nie pon sayer 0125750367.... shahril....

Anonymous said...

hohoho.. bagus2

HOT ZOOM said...

Aduhhhhh............banyak tutorial yg aku minat tapi tak dapat aku letak kat template blog aku sebab kod yang dicari tak de.

Apahal tu ek.

pening2