TAG CLOUD CUMULUS ALA WORDPRESS

Ketika mengunjungi seorang teman blogger, saya terus terag terkesima dengan sebuah tampilan Tag Cloud yang mana tampilannya seperti tulisan melayang – layang dan terus berputar apabila kursor diarahkan, pokoknya flash banget gitu……
Kemudian saya berpikir, bagaimana cara membuatnya ?. Informasi yang saya dapatkan bahwa Tag Cloud tersebut hanya dapat dibuat di blog yang berbasis wordpress. Namun saya bertanya kembali “Apakah bisa dibuat di Blogger ?”. Kalau dulu saya pernah membuat TAG CLOUD biasa seperti blog yang lainnya [BACA DISINI], namun itu mah.. biasa - biasa aja...
Trus, kemudian saya mencari informasi tentang Tag Cloud ini, sampai akhirnya tibalah disalah satu tempat yang bernama Blogger Buster. Kebetulan disana saya menemukan apa yang selama ini dicari – cari yaitu cara membuat Tag Cloud ala FLASH namun masih berbahasa orang sono.


Nah, untuk kemudahan kawan – kawan yang ingin mencobanya, saya berusaha mencobanya sendiri dan akhirnya berhasil dan saya coba terjemahkan kedalam bahasa saya sendiri.

Supaya tidak kepanjangan basa – basinya ntar malah jadi basi, langsung saja ikuti langkah – langkah dibawah ini :

• Masuk ke account blogger anda
• Kemudian pada kontrol panel masuk kebagian Tata Letak
• Kemudian buatlah sebuah label baru dengan menekan Tambah Gadget lalu Label, terserah labelnya mau dikasih nama apa saja. Namun sebagai catatan, apapun nama label yang dimasukkan harus diingat. Disini saya mengganti nama label tersebut dengan labelku.
• Setelah sudah, simpan label tersebut dan silakan tentukan sendiri letak yang pas buat tampilan Tag Cloud itu nantinya kemudian Save template anda.
• Kalau sudah disimpan, sekarang kita menuju ke Edit HTML lalu beri tanda cek pada Expant Template Widget.

Untuk lebih aman, BACKUP dulu template anda tersebut untuk jaga – jaga kalau ada kesalahan pada peng-editan template tersebut

• Kemudian cari kode seperti dibawah ini

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

                   <b:widget id='labelku' locked='false' title='Labels' type='Label'>

• Kalau sudah ditemukan copy – paste kode dibawah ini tepat berada dibawah kode tersebut diatas.

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

• Default Tag Cloud tersebut berukuran 240 x 300 px dengan warna tulisan tag adalah hitam. Untuk menyesuaikan ukuran tersebut dengan desain blog anda silakan di edit pada bagian yang terlihat dibawah ini

var so = new SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;)

• Sedangkan kalau ingin merubah background silakan edit pada bagian dibawah ini

so.addVariable("tcolor", "0x333333");

• Dan kalau ingin merubah besar huruf yang ditampilkan silakan edit pada bagian seperti dibawah ini

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>");

• Kalau dirasa sudah cukup sesuai dengan keinginan anda, silakan simpan pekerjaan anda tersebut dengan menekan tombol SAVE
• Kemudian silakan lihat hasilnya.

Apabila terjadi keslahan atau error silakan periksa kembali kode – kode yang anda buat atau silakan langsung menghubungi saya