Menambahkan Tag Cloud Animasi Pada Sidebar Blog

Akhirnya ketemu Juga, cara membuat Tag Cloud Animasi. Setelah mencari-cari di mbah google. disini ane melakukan sedikit perubahan pada script-nya dan memberikan keterangan tambahan yang agak berbeda dari tulisan aslinya, maka tulisan ini ane persembahkan buat sobat blogger semua.

Untuk membuat Tag Cloud Animasi ini kalian bisa mengikuti langkah-langkah berikut

• Login ke akun Blogger kalian.
• 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='Tag Cloud' 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/ruangsc/enes/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> Distributed by <a href='http://ruangsc.blogspot.com'>SC Community</a></div>
  <script type='text/javascript'>
  var so = new SWFObject("http://sites.google.com/site/ruangsc/enes/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
  // uncomment next line to enable transparency
  //so.addParam("wmode", "transparent");
  so.addVariable("tcolor", "0x333333");
  so.addVariable("mode", "tags");
  so.addVariable("distr", "true");
  so.addVariable("tspeed", "100");
  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>");
  so.addParam("allowScriptAccess", "always");
  so.write("flashcontent");
  </script>
  <b:include name='quickedit'/>
  </div>
  </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
  Kalian 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
• 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 Kalian.

Dibanding script Tag Cloud Non-animasi, Tag Cloud Animasi ini lebih simple. Hanya saja mengenai background dan warna huruf sebaiknya kamu sesuaikan dengan background template kamu agar kelihatan lebih matching, juga untuk ukuran lebarnya diatur sedemikian sehingga tidak melebihi ukuran lebar sidebar blog kamu.

Selamat mencoba....

Posted in: Blogger