Blogumus , Animasi Label Cloud Widget Untuk Blogger

Viyan Pradita Senin, Maret 28, 2011

Pagi-pagi blogwalking, gak sengaja liat label cloud animasi, jadi keinget req sobat @Zhanaz45, beberapa hari lalu, hehehe, maaf sob, lupa saya.... :D
Seperti yang sobat tahu, Blogumus atau istilah lainnya label/tag cloud dengan animasi ini biasa kita lihat di blog wordpress mampun blogspot. label cloud ini fungsinya gak jauh beda dengan label-label pada umumnya, cuman tampilannya yang lebih menarik dan keren pastinya, karena bila label cloud tersebut terkena mouse akan bergerak/berputar dengan sendirinya.
berikut contoh gambar dari widget tag/label cloud blogumus:

Demo

Cara membuatnya sebagai berikut:
  • Login ke akun blogger sobat
  • Masuk rancangan/design
  • Pilih edit HTML
  • Klik "Download Template Lengkap" (ini untuk memBackUp template sobat)
  • Beri tanda centang "Expand Template Widget"
  • Cari kode berikut: <b:section class='sidebar' id='sidebar' preferred='yes'> (untuk kode, mohon untuk disesuaikan saja, seperti yang saya bilang tidak semua template memiliki kode yang sama)
  • Selanjutnya letakan kode berikut, tepat di bawah kode diatas:

<b:widget id='Label99' locked='false' title='Label Blogumus' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://sites.google.com/site/bloggerustemplatus/code/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></div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://sites.google.com/site/bloggerustemplatus/code/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>

  • Preview'lah terlebih dahulu, sebelum di Save, Perhatikan text yang di beri warna pada kode di atas, warna biru itu adalah judul label, warna orange itu adalah untuk merubah lebar dan tinggi label cloud. warna kuning, untuk merubah warna backgroud label/tag cloud, dan warna hijau untuk merubah besar kecilnya tulisan di tag/label cloud tersebut

Penting!!
Masalah yang sering muncul dalam pembuatan label/tag cloud ini, yaitu:
Disebabkan karena file.swf yg sudah error.
Tidak semua template bisa di buat label/tag cloud ini. tapi cara diatas sudah saya coba di template sya ini dan sukses.
Tambahin lagi neh buat file.swf-nya, bila dengan file.swf (perhatikan text berwarna merah pada kode diatas, itu adalah link file.swf, gantilah dengan file.swf berikit:
http://www.swfcabin.com/swf-files/1275932799.swf

Seperti itulah kiranya cara membuat label/tag cloud, selamat mencoba dan semoga bermanfaat.
Credit by: Roy Tanck and Amanda Fazani

Ditulis Oleh :

Artikel Blogumus , Animasi Label Cloud Widget Untuk Blogger ini dipublish pada hari: Senin, Maret 28, 2011. Semoga artikel ini bermanfaat untuk Anda. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

9 komentar
Terjun Ke Kolom Komentar

  1. ane pernah liat sob yang kaya gini di blog saat ane kesasar, ane kira itu hanya pake script. ternyata harus ke edit html ya. ane jarang main di edit html sob, apa lagi klo dah yang agak sedikit rumit!! masalahnya selama ini ngeblog hanya berguru dari membaca, jadi klo dah ada trabel bgg dah ane heeee, klo main di scipt kan tinggal di apus aja. tapi nice lah ni info sob,buat tambah2 ilmu.

    BalasHapus
  2. @Blog Sederhana: Maksih sebelumnya sob, oia, sekedar masukan aja neh sob??
    Semisal kita sedikit ragu/takut untuk edit2 di bagian html, terlebih dahulu sebelum di edit, backup dulu template-nya, dengan cara klik "Download Template Lengkap" ini bertujuan bila sewaktu-waktu kita mengalami kendala/masalah dalam mengedit template, kita tinggal upload kembali file.template yg sudah kita download sebelumnya.

    Salam kenal Sob :)

    BalasHapus
  3. makasih masukannya sob, kadang klo untuk yang nyoba2 ane buat blog sendiri,tapi ya terkadang itu juga masih belum berani ke yang aga rumit untuk edithtml.

    sekarang ini yang pengen ane pelajarin adalah batasan posting sama gadget sob, ane pgn perkecil ukuran batasannya, biar ruang agak lebaran dikit.

    BalasHapus
  4. @Blog Sederhana: Iya sob, gak ada salahnya kan buat mencoba. hehee
    Ohhh... maksudnya mengatur jarak antara posting dari sidebar po sob ?? itu jg blognya udah rapi koq.

    Ok deh.. sukses slalu sob, keep blogging pokoke :D

    BalasHapus
  5. Wahh..

    Aku udah coba sobb, thank'z yach udah mensharing artikel ini sangat bermanfaat dech hehee..

    BalasHapus
  6. Thank You very much, its totally work... ;D

    BalasHapus

Catatan:
Link hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS DI SINI...</i>


web design blogs Bloggers - Meet Millions of Bloggers