Awan itu akhirnya beterbangan

Filed under: by:

Hampir disemua blog yang saya kenal pastinya memiliki sebuah content tambahan yang biasanya bernama tag cloud atau label. Tag / label itu sendiri merupakan sebuah daftar text yang menggambarkan isi dari sebuah artikel,berita atau apapun juga yang sebenarnya. Mungkin tag disini bisa kita gambarkan seperti daftar index yang biasanya ada dihalaman akhir sebuah buku.


Jenis dari tag cloud sendiri ada banyak macamnya, tapi umumnya tampilan yang diperlihatkan pada tag coud menyerupai kumpulan awan (ya iyalah) seperti pada gambar dibawah ini.


Baru2x ini saya melihat sebuah plugin untuk wordpress yang bisa menampilkan animasi tag cloud yang menarik. Tag cloud yang dibuat oleh Roy Tanck ini bisa menampilkan tag2x yang telah didefinisikan pada setiap artikel yang kita miliki dan kemudian akan ditampilkan dalam bentuk animasi yang bergerak apabila mouse kita diarahkan kepadanya.

Namun sayang, plugin Cumulus itu kini baru tersedia untuk Wordpress, TYPO3, Joomla, dan Serendipity saja. Untuk blogger dan apache-roller sampai saat ini belum tersedia, padahal blog saya yang disini dan disitu menggunakan engine blogger dan apache-roller.

hmmm, saya justru berpikir ini sebuah tantangan menarik apabila saya bisa mengimplementasikan tool itu pada blog2x yang saya miliki. Akhirnya semalam saya mencoba untuk melakukan modifikasi plugin wordpress tersebut agar bisa dipasang di layanan webblog lainnya.

Berikut ini adalah langkah2x yang bisa anda lakukan untuk memasangnya di apache-roller sehingga akan tampil seperti disini. Namun sebaiknya anda membaca dokumentasi penggunaan apache-roller apabila anda belum terbiasa menggunakannya.

1. download file URLEncode.js
2. upload file URLEncode.js ke blog anda, sehingga nantinya bisa diakses pada alamat <alamat-blog-anda>/resource/URLENcode.js
3. letakkan code dibawah ini didalam tag head pada file template anda
<head>

<script type="text/javascript" src="http://www.roytanck.com/wp-content/plugins/wp-cumulus/swfobject.js"></script>
    <script type="text/javascript" src="http://blogs.arkalogic.co.id/indrio/resource/URLEncode.js"></script>

</head>
4. masukkan code dibawah ini pada lokasi yang anda suka dihalaman blog anda. Lokasi yang tepat biasanya adalan di-sidebar.

<div id="wpcumuluswidgetcontent" style="padding:0 15px 15px 15px;">
    #set($mytags = $model.weblog.getPopularTags(-1, 30))
    #foreach ($tag in $mytags)
      <a class="tagcloud${tag.intensity}" href="$url.tag($tag.name)" title="${tag.count} posts">$tag.name</a>
    #end
  </div>

  <script type="text/javascript">
     var tags = URLEncode('<tags>');
     #set($mytags = $model.weblog.getPopularTags(-1, 30))
     #foreach ($tag in $mytags)
         tags += URLEncode('<a class="tag-link-39" href="$url.tag($tag.name)" rel="tag" title="${tag.count} posts" style="font-size: 8pt;">$tag.name</a>');
     #end
     tags += URLEncode('</tags>');

     var rnumber = Math.floor(Math.random()*9999999);
     var widget_so = new SWFObject("http://www.roytanck.com/wp-content/plugins/wp-cumulus/tagcloud.swf?r="+rnumber, "tagcloudflash", "220", "180", "9", "#F8F8F8");
     widget_so.addParam("allowScriptAccess", "always");
     widget_so.addVariable("tcolor", "0x333333");
     widget_so.addVariable("tcolor2", "0x995500");
     widget_so.addVariable("tspeed", "100");
     widget_so.addVariable("distr", "true");
     widget_so.addVariable("mode", "tags");
     widget_so.addVariable("tagcloud", tags);
     widget_so.write("wpcumuluswidgetcontent");
  </script>
5. Simpan template yang baru anda modifikasi tadi.

Nah kini blog anda sudah terpasang cumulus.
Cara yang sama seharusnya bisa dilakukan untuk blog bertipe lain, but saya blm sempat mencobanya.

Happy hacking
:)

UPDATE : untuk mengetahui cara pemasangan di blogger.com silahkan menuju ke Blogger Buster

0 komentar:

Post a Comment

Subscribe to: Post Comments (Atom)