Flash Animated Label Cloud

Mungkin kalian pernah melihat bentuk animasi seperti yang ada di sebelah kiri ini ketika kalian berkunjung pada suatu blog. Bentuk animasi tersebut dinamakan Blogumus : flash animated label cloud. Widget ini untuk pertama kali diperkenalkan oleh Roy Tanck dan sekarang widget tersebut menjadi sangat populer bagi para blogger. Keunikan dari widget flash animated label cloud ini adalah tulisan yang tampak tiga dimensi dan berputar seperti bola. Bentuk animasi tersebut merupakan widget yang menunjukkan label atau kategori pada postingan kalian. Untuk membuat flash animated label cloud tersebut, tentunya pastikan kalian telah memasang atau memberi label pada setiap postingan kalian. Nah kalau semuanya sudah kalian lakukan, langkah berikutnya mari kita mulai pekerjaan kita. Langkah-langkahnya masih seperti penjelasan-penjelasan saya sebelumnya yaitu:

Login » Tata Letak » Edit HTML

Kalau kalian sudah berada pada bagian "Edit HTML", kalian harus melakukan "Expand Template Widget". Langkah selanjutnya carilah kode di bawah ini.

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

Untuk memudahkan pencarian, gunakan Ctrl-F pada keyboard kalian. Kalau sudah kalian temukan, silahkan kalian copy (Ctrl-C) kode flash animated label cloud dan letakkan tepat dibawah kode <b:section class='sidebar' id='sidebar' preferred='yes'> tersebut.

Kode Flash Animated Label Cloud

<b:widget id='Label2' 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'>

    &lt;object type="application/x-shockwave-flash" data="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" width="250" height="200" allowscriptaccess="always" &gt;
        &lt;param name="movie" value="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" /&gt;
        &lt;param name="bgcolor" value="#ffffff" /&gt;
        &lt;param name="flashvars" value="tcolor=0x000000&amp;mode=tags&amp;distr=true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;
      <b:loop values='data:labels' var='label'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'><data:label.name/></a>
</b:loop>
&lt;/tags&gt;" /&gt;
        &lt;p&gt;Blogumulus by &lt;a href='http://www.roytanck.com/'&gt;Roy Tanck&lt;/a&gt; and &lt;a href='http://2yu-blog.blogspot.com'&gt;Duayu&lt;/a&gt;&lt;/p&gt;
    &lt;/object&gt;


  </div>

  <b:include name='quickedit'/>
</b:includable>
</b:widget>

Coba kalian perhatikan kode di atas. Untuk tulisan yang sudah saya beri warna merah, menunjukkan tinggi dan lebar widget dalam ukuran px. Tulisan yang sudah saya beri warna biru, menunjukkan warna latar atau background dan warna huruf. berikutnya untuk tulisan yang berwarna hijau, untuk ukuran besar atau kecilnya tulisan. Kalian dapat merubahnya dan menyesuaikannya pada template yang kalian miliki.

Jika sudah selesai, langkah berikutnya simpan template dan lihat blog kalian. Nah Bagaimana boss? Semoga ini bermanfaat buat kalian.