Pages

Sabtu, 29 Januari 2011

Membuat Tag Cloud Animasi Pada Sidebar Blog

Aku punya sedikit tips buat para blogers yaitu bagaimana cara untuk membuat Tag Cloud animasi, baik yang menggunakan gadget blogger maupun javascript. Nah, pada tulisan kali ini saya akan mengupas cara membuat Tag Cloud Animasi.







Untuk membuat Tag Cloud Animasi ini kamu bisa mengikuti langkah-langkah berikut (contoh pada sidebar dapat dilihat pada blog ini):




  • Login ke akun Blogger kamu.

  • Dari halaman Dasbor, klik Tata Letak dan pilih Edit HTML.

  • Lakukan duplikasi template untuk berjaga-jaga jika terjadi masalah.

  • Kopikan script berikut:



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

&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://www.bloggerbuster.com'&gt;Amanda Fazani&lt;/a&gt;&lt;/p&gt;

&lt;/object&gt;

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>


Pada script di atas disetting sebagai berikut (lihat yang dicetak tebal): » Lebar widget : 240px » Tinggi widget : 300px » Warna latar (background) : putih atau #ffffff » Warna huruf : abu gelap atau 0x333333 » Ukuran huruf : 12 Kamu dapat mengubah settingan tersebut disesuaikan dengan latar template dan lebar sidebar blog kamu. Misalnya mengubah warna latar menjadi hitam ditulis #000000 dan mengubah warna huruf menjadi putih ditulis 0xffffff (mengenai kode warna silahkan baca artikel ini).



  • Letakkan script tersebut di bawah kode:



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


    Untuk memudahkan pencarian, tekan Control F atau F3.



    Jika tidak ditemukan, cari kode id='sidebar' atau id='sidebars'.






  • Lakukan Pratinjau, jika sudah OK, Save hasil kerjaan kamu dan ucapkan Alhamdulillah.....






  • Bagaimana Tag Cloud Animasi - nya gampangkan. Hanya saja mengenai background dan warna huruf sebaiknya kamu sesuaikan dengan background template kamu agar kelihatan lebih matching, juga untuk ukuran lebarnya diatur sedemikian rupa sehingga tidak melebihi ukuran lebar sidebar blog kamu.



    Ok lah kalau begitu, selamat mencoba dan selamat beraktifitas kembali salam kami Syarief Hidayat !!!!!!!.

    Tidak ada komentar:

    Posting Komentar

     

    Sample text

    Sample Text

    Sample Text