Tutorial ~ Bagaimana Untuk Mencipta 'Flash Animated Label Cloud' (Cumulus Tag) Pada Blogger

Seorang rakan blogger bertanyakan tentang bagaimana untuk membuat flash animated label cloud (Cumulus Tag) seperti yang terdapat pada blog ini.Untuk tidak menghampakan, berikut adalah tutorial bagaimana untuk mencipta Cumulus Tag pada blogger.

(Widget ini adalah lebih mudah di pasang pada wordpress berbanding dengan blogger.Kemahiran HTML adalah diperlukan untuk memastikan proses installation berjaya)

Langkah 1 :

Back up your template 

(Penting!Jika proses installation jahanam, anda cuma perlu restore template anda)

Langkah 2 :

Selepas itu pergi ke Layout >> Edit HTML dan check 'Expand Widget Templates Box'

Seterusnya Find (Control F) dan cari kod berikut (atau yang hampir serupa)

<b:section class='sidebar' id='sidebar' preferred='yes'>

Dan tampal kod berikutnya immediately Selepas kod 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://sites.google.com/site/bloggerustemplatus/code/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://sites.google.com/site/bloggerustemplatus/code/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>

Langkah 3 :
Preview template.Sekiranya anda meletakkan kod tersebut pada tempat yang betul, anda akan dapat melihat preview widget tersebut di sebelah kanan blog anda.Save template (Diingatkan sekali lagi : back up template anda sebelum melakukan sebarang perubahan!) sekiranya anda telah melihat Cumulus Tag Widget pada blog anda .Anda boleh memindahkan lokasi widget tersebut kemudian.Hanya pergi ke Design >> Page Element locate Cumulus Tag Widget yang telah anda pasang dan anda boleh meletakkannya di mana yang anda mahu.

Customizing Cumulus Tag
Anda boleh mengubah ciri-ciri pada cumulus tag yang telah anda install mengikut citarasa anda.Hanya locate kod berikut pada HTML yang telah anda pasang dan ubah kod yang telah diwarnakan dengan warna merah

var so = new SWFObject("http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

*240 bermaksud lebar (width)
   300 bermaksud tinggi (height), manakala
#ffffff pula mewakili backgroud color

Untuk mengubah size font pula, locate kod berikut
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>");

Hanya ubah nombor yang berwarna merah dan size tulisan pada Cumulus Tag akan berubah.Setelah selesai, preview template anda dan sekiranya tidak ada apa-apa masalah, anda akan dapat melihat perubahan yang telah anda buat pada Tag anda.Save template, dan nikmati flash animated label cloud anda!






*Sekiranya anda telah melakukan terlalu banyak perubahan/customizing pada template blog anda, anda berkemungkinan tidak akan menemui kod pada template seperti yang tercatat pada langkah ke-2.Jika perkara tersebut berlaku, anda perlu melakukan experiment sendiri untuk meletakkan widget ini pada tempat yang betul dalam template anda.Untuk maklumat lanjut dan tutorial lengkap, sila ke Bloggerbuster.com


*Updated ~ Untuk menukar color pada font, anda cuma perlu locate line ini pada template
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
dan tukarkan value pada nombor 333333 dengan code warna html yang anda inginkan.Anda boleh memilih warna yang anda inginkan di  http://www.computerhope.com

Credit To : Amanda Fazani, Roy Tanck & Blogger Buster