Membuat Label Cloud Animasi

Membuat Label Cloud Animasi

Membuat Label Cloud AnimasiLabel Cloud animasi sangat bagus untuk mempercantik blog kalian semua loh sobat semua, kalau ingin melihat demo atau screenshoutnya lihat saja Widget yang letaknya di atas Buku tamu di blog ini yang jelas di Home Page.
Mungkin trik ini banyak yang sudah membagikannya/ mem-Publishnya namun apa salahnya kalau say membagikannya lagi?? kenapa saya membagikannya kembali?? karena ada seorang visitor di blog saya yang menginginkan Widget tersebut makannya saya buat.

Sebenarnya trik Membuat Label Cloud animasi ini saya dapatkan dari Bloggerbuster yaitu salah satu blogger master di dunia blog, kalau saya boleh kasih tips, Wdget ini tidak memberatkan Kecepatan loading blog sobat loh karena Javascript yang digunakan tidak di upload jadi tidak perlu dipanggil. oke mungkin sekian ajach cuap-cuapnya sekarang kita menuju langkah-langkahnya :
  1. Login ke blogger
  2. Masuk ke Tata letak ==>> Edit HTML
  3. Setelah itu klik kotak yang berada di samping tulisan Expand Widget Template
  4. Sebelum kita melakukan pembedahan (kaya dokter ajach :D) mari kita backup terlebih dahulu untuk menghindari kerusakan pada template sobat.
  5. oke setelah mem-backup langsung ajach cari kode <b:section class='sidebar' id='sidebar' preferred='yes'> lalu taruh kode ini di bawahnya

    &lt;b:widget id=&#039;Label23&#039; locked=&#039;false&#039; title=&#039;&#039; type=&#039;Label&#039;&gt;
    &lt;b:includable id=&#039;main&#039;&gt;
    &lt;b:if cond=&#039;data:title&#039;&gt;
    &lt;h2&gt;&lt;data:title/&gt;&lt;/h2&gt;
    &lt;/b:if&gt;
    &lt;div class=&#039;widget-content&#039;&gt;
    &lt;script src=&#039;http://oketrik.googlecode.com/files/swfobject.js&#039; type=&#039;text/javascript&#039;/&gt;
    &lt;div id=&#039;flashcontent&#039;&gt;&lt;/div&gt;
    &lt;script type=&#039;text/javascript&#039;&gt;
    var so = new SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;300&quot;, &quot;200&quot;, &quot;7&quot;, &quot;#000000&quot;);
    // uncomment next line to enable transparency
    //so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
    so.addVariable(&quot;tcolor&quot;, &quot;0x00ff00&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;&lt;tags&gt;&lt;b:loop values=&#039;data:labels&#039; var=&#039;label&#039;&gt;&lt;a expr:href=&#039;data:label.url&#039; style=&#039;12&#039;&gt;&lt;data:label.name/&gt;&lt;/a&gt;&lt;/b:loop&gt;&lt;/tags&gt;&quot;);
    so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
    so.write(&quot;flashcontent&quot;);
    &lt;/script&gt;
    &lt;b:include name=&#039;quickedit&#039;/&gt;
    &lt;/div&gt;
    &lt;/b:includable&gt;
    &lt;/b:widget&gt;

    Penjelasan :
    • kode yang berwarna Merah menunjukan warna Background dan sobat juga bisa menggantinya
    • kode yang 300 menunjukan panjang dari Widget itu sobat bisa menggantinya dengan memperbesar atau memperkecilnya
    • kode yang 200 menunjukan Lebar dari Widget itu sobat bisa menggantinya dengan memperbesar atau memperkecilnya
    • kode yang berwarna Hijau menunjukan warna dari Teks yang ada di dalam Widget itu, sobat juga bisa menggantinya
    • kode 100 menunjukan kecepatan berputarnya widget itu, sobat juga bisa menggantinya apabila sobat ingin mempercepat sobat bisa tambah nominalnya atau sebaliknya.

  6. Nah sekarang sobat bisa simpan.

mudah bukan pemasangannya?? kalau sobat ada kesulitan dalam pemasangannya sobat bisa beritahu saya lewat Kotak komentar atau langsung Chat With YM. oke sekian dari saya Terima Kasih and Happy blogging.

Tidak ada komentar:

Posting Komentar