Warung Online
Jumat, 04 Maret 2011

Membuat Label Bergerak (Blogumulus) di Blogspot

Tahukah temen-temen apa itu blogumulus? Blogumulus itu adalah label widget yang dibuat dengan basis flash animation. Widget ini akanb eraksi kalo pointer mouse dideketin ke widget ini. Pertama kali Blogumulus diciptakan oleh Roy Tankc tapi cuma terbatas untuk kaum pengguna Wordpress dan ngga mungkin untuk di pakai didalam Blogger. Tapi sekarang Amanda Fazani udah menyempurnakan widget ini sehingga bisa dipake di dalam blogger.


Ok..! langsung saja sebelum kita mengenal label itu saya ingin mengucapkan terima kasih kepada Roy Tanck karena hasil karyanyalah label ini tercipta. Bagi yang belum mengetahui nama label tersebut saya akan memberitahukan label itu bernama Blogumulus atau sebagian orang mengucapkannya Blogumus itu..? Blogumulus itu awalnya diciptakan untuk pengguna Wordpress yang bernama Tag-Cumulus widget ini yang berbasis flash sehingga bisa dianimasikan. dan karena untuk saat ini sudah bisa dipakai di BLOGGER berkat kreatifitas Amanda Fazani, sebagai pengguna mesin blogger kita bisa memasang widget tersebut di blog kita. Thank's to Amanda Fazani atas kreatifitasnya. maka dirubahlah namanya menjadi Blogumulus Untuk melihat seperti apa label animasi ini, Oke, bagi anda yang tertarik untuk memasang label animasi atau label flash ini, kita langsung menuju pada langkah-langkahnya. 
  1. Login ke blogger dengan ID anda.  
  2. Klik Tata Letak.  
  3. KLik tab Edit HTML.  
  4. Klik tulisan Download Template Lengkap (ini untuk memback-up bila terjadi kesalahan). agar templatenya aman. 
  5. Cari kode yang mirip dengan kode di bawah ini :
  6. <b:section class='sidebar' id='sidebar' preferred='yes'>
  7. Copy kode di bawah ini kemudian taruh kode tersebut (paste) dibawah kode di atas.
  8. <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> Posted by <a href='http://adesyams.blogspot.com/'>Ade'S Tricks</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>
  9. Kemudian Save Template anda.
Note : Agar tampilan label animasi ini serasi dengan templet blog anda, sesuaikan kode-kode berikut dengan templet yang dipakai. Misal: Merubah lebar, tinggi dan warna background. Variable untuk lebar dan tinggi ada pada baris script berikut,
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
240 menunjukkan lebar widget. 300 menunjukkan tinggi widget. #ffffff menjukkan warna background. 100 menunjukkan kecepatan putaran. Merubah warna text. Variable untuk lebar dan tinggi ada pada baris script berikut,
so.addVariable("tcolor", "0x333333");
"tcolor" adalah flash variable, jadi pastikan hanya mengganti angkanya saja. Merubah ukuran font. Variable untuk lebar dan tinggi ada pada baris script 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>");
12 menujukan ukuran font yang digunakan. ~> bila anda menginginkan background yang transparan, maka anda tinggal menghapus tanda // dari script di atas
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
Nah, silahkan anda ganti kode-kode pada variabel di atas sesuai dengan kebutuhan template anda.

Semoga Berhasil.

Blog Archive