Sphere Label Cloud versi animasi flash

Atas permintaan ramai kali ini Musafir Cyber menampilkan pula tutorial membuat label cloud yang berbentuk sfera atau namanya Blogumus. Asalnya widget ini dicipta oleh Roy Tanck yang membuat plugin Cumulus untuk wordpress. bila dah diconvert supaya compatible dengan blogger/blogspot nama dia pun da tuka jadi Blogumus.

Terus ke tutorial membuat nya. amat simple hanya perlukan XML editing je.

XML Editing

1. Firstly, macam biasa. backup template anda.
   
2. pergi ke Dashboard > Layout. remove Label yang sedia ada.
   
3. kemudian pergi ke Dashboard > Layout > Edit HTML. 'tick' kan checkbox Expand Widget Templates
   
4. cari text macam dibawah ni
   

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

   
   
5. kemudian kat bawah line coding tersebut masukkan coding ini
   

   <b:widget id='Label1' 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' />
   <script type='text/javascript'>
   var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
   //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>

   
   
6. ok. siap anda boleh preview blog anda. sangat simple kan?
   

Tweaking

default setting
Width = 240px
Height = 300px;
Background color = white
Test color = grey
Font size = "12"

anda boleh costomize blogumus anda dengan mengedit coding diatas. cara nya:—

1. ubah Width dan Height
   

   var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

   
   
2. ubah warna background
   

   var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

   
   walau bagaimanapun anda boleh guna background transparent dengan delete '//' coding ini
   

   //so.addParam("wmode", "transparent");

   
   
3. ubah test color
   gantikan hex value untuk warna kesukaan anda
   

   so.addVariable("tcolor", "0x333333");

   
   
4. ubah font size
   

   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>");

Tutorial Blogger