Saturday, September 01, 2012

Tutorial : Animated Label Cloud

 
Baiklah, kali ini pertama kalinya nak buat tutorial sebab direquest oleh :
 
 
 Label tu namanya Animated Label Cloud, contohnya macam di sidebar tu, yang boleh gerak-gerak bila anak panah main-main dekat situ :
Caranya :
1. Log in Blogger.
2.  Masuk Design > Edit HTML (untuk langkah berjaga-jaga, Download Full Template dulu na..)

3. Tick Expand Widget Templates.

4. Tekan Ctrl + F untuk cari :
<b:section class='sidebar' id='sidebar' preferred='yes'>
5. Masukkan code ni di bawah code di atas :
<b:widget id='Label786' locked='false' title='Aktiviti Oh Aktiviti' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<script src='http://bloggerblogwidgets.googlecode.com/files/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Flash Labels by <a href='http://www.way2blogging.org'>Way2Blogging</a></div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://bloggerblogwidgets.googlecode.com/svn/trunk/way2blogging_tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;200&quot;, &quot;250&quot;, &quot;7&quot;, &quot;#FFFFFF&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x000000&quot;);
so.addVariable(&quot;hicolor&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>
 6.  Aktiviti Oh Aktiviti = tajuk
      200 = lebar
      250 = tinggi 
      12 = saiz tulisan (semua ni boleh tukar kepada selera masing-masing)

7. Lepas tu, Preview. Kalau sudah puas hati bolehlah save.

8. Bukak Page Elements kalau nak ubah kedudukan widget ni.

SELAMAT MENCUBA! 

4 comments:

  1. thank you, :)

    *nak guna untuk design blog sedara ni. Hee!

    ReplyDelete
  2. sama2..boleh..guna jer..kita sama2 kongsi ilmu kan..

    ReplyDelete
  3. tak jadi lah, since saya xjumpa code

    ReplyDelete
  4. @lonefire, maybe template x sama kot,,saya guna minima template..

    ReplyDelete

I am not responsible for, and expressly disclaims all liability for, damages of any kind arising out of use, reference to, or reliance on any information contained within the site. While the information contained within the site is periodically updated, no guarantee is given that the information provided in this site is correct, complete, and up-to-date.

Tengs for dropping your idea!

Related Posts Plugin for WordPress, Blogger...

Copyright © ஐfatimah❀nabilaஐ Designed by azhafizah.com