Membuat Label Animasi "blogumulus"

Setelah sekian lama dan atas permintaan teman-teman yang ade kenal akhirnya ade membuat tutorial ini awalnya gara-gara ade memasangnya di tampilan blog ade banyak teman-teman yang menanyakan apa sih namanya itu label yang melayang-layang dan berterbangan?
Ok..! langsung saja sebelum kita mengenal label itu ade ingin mengucapkan terima kasih kepada Roy Tanck karena hasil karyanyalah label ini tercipta.
Bagi yang belum mengetahui nama label tersebut ade 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 :
<b:section class='sidebar' id='sidebar' preferred='yes'>

6. Copy kode di bawah ini kemudian taruh kode tersebut
(paste) dibawah kode di atas.

<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>


7. Klik tombol SIMPAN TEMPLATE

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. Untuk kode-kode warna html, silahkan kunjungi di sini.

Semoga Berhasil.

Subscribe to receive free email updates:

22 Responses to "Membuat Label Animasi "blogumulus""

  1. Terima kasih Paman Panduan nya..^^

    BalasHapus
  2. paman,, gimana caranx,, membuat label animasi,,,??? tadi udah aku ikuti petunjuk yg paman berikan di atas,, tapi gak bisa,,,dan terdapat kata kesalahan seperti di bawah ini...

    More than one widget was found with id: Label99. Widget IDs should be unique.

    BalasHapus
  3. saya kan backgroundnya mau ksih none aja, gmn y cranya

    BalasHapus
  4. Onal Castle ~> klo begitu berarti labelnya ada 2 alias dobel.
    ke tata letak aja dulu trus di hapus dulu labelnya, lalu ikuti seperti tutorial di atas trims.

    BalasHapus
  5. ok mass, aku dah coba dan langsuh jadi....
    thank you....

    BalasHapus
  6. terima kasih pakdhe,.
    ini yang aku cari dua minggu nie!
    eh tadi nulis di mbah guugle tau"ny nyasar kemari trus nemu'in artikel ini!
    wah, sukses selalu bwd pakdhe ade!
    jangan lupa kunjungi blog saya www.blogsuka-suka.co.cc

    BalasHapus
  7. ical ~> hapus tanda // pada
    //so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);

    BalasHapus
  8. mas, koq di blog ku jadinya nge-blank ya...
    Solusi donk??? Makasih sebelumnya...

    BalasHapus
  9. paman salam kenal sebelumnya,,,,oya label nya punya saya ga keluar tulisannya knp ya cuman ada kotaknya aja...gimana nih supaya ada...tolong ya mas kasih tau sambil kunjungan balik..

    BalasHapus
  10. makasih tips nya. skarang blog ku sudah pake awan comulus di blog heee...

    BalasHapus
  11. Mantep.... sdh lama saya cari2.... hehe :D
    sip gan..

    BalasHapus
  12. wa... dah lama pengen pasang yang kayak gini..^^
    makasih ya... its work..^^)8

    BalasHapus
  13. Blogumulus Sucks....
    dulu pernh masang blogumulus di blog.. tapi skrang udeh ilang.. ga tau knp bisa tiba2 ilang padahal HTML ga pernah di colek..

    http://flickflip.co.cc

    BalasHapus
  14. meskipin gagal yang penting meninggalkan jejak petualang aja ah.....!!!!!!!!!!
    www.asianadesun.com

    BalasHapus
  15. layak untuk diterapkan

    BalasHapus

Berkomentarlah dengan Baik dan Sopan..