Sphere Label Cloud versi animasi flash

17 June 2009

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

3 comments

  1. saya coba ko ga bisa yahhh malah ada peringatan kaya gini!!!!!!!More than one widget was found with id: Label1. Widget IDs should be unique.

    ReplyDelete