WP Cumulus pada Blogger

Sebelumnya cara untuk memasang label WP cumulus (Clouds label) kepunyaan wordpress di blogger sudah banyak bertebaran di jagad maya ini, seperti disini dan disini. Sobat Cyntia dan Riasmaja sudah menerangkan dengan jelas.

Setelah menelusuri dan mempelajari tentang widget ini (tapi boonk), saya ambil kesimpulan dy memiliki 3 komponen utama, yaitu di file javascript, file php dan tentunya file flashnya.

Bagi sobat-sobat yang ingin mendownload secara langsung dari wordpress dapat mendownloadnya disini.
Sebenarnya Tag cumulus atau yang lebih kita kenal sebagai tag cloud itu kepunyaan wordpress, dan bukan fitur bawaan dari blogger.com, Blogger.com hanya memiliki label cloud sederhana tanpa tampilan 3D animasi seperti WP cumulus, tetapi bukan tidak mungkin jika kita ingin mengaplikasikannya kedalam blogspot milik kita :D

Mari kita coba untuk memasang WP cumulus ini dalam Platform blogger kita.

1. Login kedalam dashboard blogger.com anda.
2. pilih Dashboard --> Layout --> Edit HTML dan klik Expand Template Widget, alangkah baiknya jika anda membackup templates anda terlebih dahulu (sepele tapi penting).
3. Cari kode seperti dibawah ini.
   
   
   

   <b:section class='sidebar' id='sidebar' preferred='yes'>
   
   
   
4. Lalu CopyPaste-kan kode dibawah ini tepat dibawah kode diatas.

<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>
<center><div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'></div>
<script type='text/javascript'>
var so=new SWFObject ("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "150", "7", "#FFFFFF");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x000000");
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='14'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div></center>
</b:includable>
</b:widget>

lalu save Templates anda dan lihat perubahannya.

Selanjutnya Jika sobat ingin mengedit tampilan WP cumulus sesuai dengan keinginan sobat, saya akan coba terangkan disini.
Dalam mengedit alangkah baiknya menggunakan Notepad ++ yang dapat didownload disini

• Mengubah ukuran dan background Widget

cari code dibawah ini

var so = new SWFObject ("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "150", "7", "#FFFFFF");

warna merah = Width (lebar) dan hijau = Heigth (tinggi), dan biru = Background Color, ganti sesuai selera sobat sekalian :D

Untuk melihat daftar warna HTML sobat dapat meliaht gambar dibawah ini :

• 
  
  Untuk background transparant, sobat tinggal menghapus tanda "//" (tanda komentar) di depan kode: //so.addParam("wmode", "transparent"); nb: Pada beberapa templates mode transparant tidak berhasil dan hanya akan menghasilkan Blank Widget.
  
  
  
• 
  
  Mengubah ukuran Fonts. expr:href='data:label.url' style='12'> Sobat dapat mengganti ukuran dari fonts sesuai keinginan sobat.
  
  
  

• 
  
  Mengubah kecepatan Rotasi WP cumulus. so.addVariable("tspeed", "100"); Semakin besar angkanya semakin cepat berputarnya.
  
  
  

Selamat Mencoba sobat semua :D, jika ada pertanyaan atau code yg saya berikan salah dan tidak berhasil, mohon kita share disini, mari kita sama-sama belajar.

Sebagian posting ini saya ambil dari sini dan disini.