Widget Label Flash WP-Cumulus pada Blogger

WP-Cumulus adalah widget yang di desain untuk blog yang berbasis Wordpress yang berfungsi untuk menampilkan label atau menurut Andi Mendunia adalah 'Kategori' yang bisa dilihat pada sidebar disamping. Widget ini lumayan bagus dan punya tampilan cloud yang menarik yang bisa berputar-putar. Sayangnya, secara default WP-Cumulus tidak tersedia untuk para Blogger. Namun, WP-Cumulus telah dimodifikasi dan bisa diintegrasi untuk blog yang berbasis Blogger, namanya Blogumus. Pemasangannya lumayan gampang. Jika hendak mengikuti tutorial asli (dalam bahasa inggris) silahkan klik disini dan jika tidak, nyok kita ikuti tutorial dibawah ini:

  • Masuk ke Rancangan
  • Klik Edit HTML 
  • Cari baris yang bermuatan seperti ini (atau mirip):
<b:section class='sidebar' id='sidebar' preferred='yes'>
  • Langsung saja setelah baris tadi, Paste kode berikut dibawahnya:
<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'>
<script src='http://sites.google.com/site/bloggerustemplatus/code/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://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;240&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><a style='font-size:10px;' href='http://andimendunia.blogspot.com/2011/06/menambahkan-label-animasi-flash-wp.html'>Pasang gadget seperti ini di blog anda!</a>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
  •  Lalu pratinjau template anda terlebih dahulu, apabila sudah terpasang secara benar, kamu boleh menyimpan template-nya secara aman! Itu saja ;)

Mengkustomisasi 'Blogumus':
Secara default, blogumus akan terpasang dengan pengaturan sbb:
  • Lebar: 240px
  • Tinggi: 240px
  • Warna Background: Transparan
  • Warna Teks adalah abu-abu
  • Ukuran teks adalah 12px 

Jika kamu ingin widget ini lebih lebar, lebih pendek, dirubah warnanya, dll, kamu harus mengedit beberapa bagian kodenya. Tinggal rubah saja pada bagian kode berikut:
var so = new SWFObject("http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf", "tagcloud", "240", "240", "7", "#ffffff"); 

  • Tanda Merah untuk merubah lebarnya (dalam satuan px, pixel).
  • Tanda Biru untuk merubah tingginya (dalam satuan px, pixel).
  • Tanda Hijau untuk merubah warna backgroundnya (isi dengan kode warna hex).

Perhatian! Karena secara default widget ini akan memiliki background yang transparan, merubah warna background tidak akan berpengaruh.

Apabila kamu menginginkan widget ini memiliki warna background yang solid, cari baris kode berikut:
so.addParam(&quot;wmode&quot;, &quot;transparent&quot;); 
Tambahkan 2 buah garis miring pada awal baris (//) sehingga terlihat seperti ini:
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;); 
Dengan seperti itu, kamu bisa memberikan warna background yang solid pada widget ini. Lalu bagaimana dengan ukuran teks dan warna teks? Untuk ukuran teks, temukan kode berikut 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>");
Ganti angka warna merah tersebut sesuai ukuran yang dikehendaki. Dan untuk warna teks, temukan kode berikut ini:
so.addVariable("tcolor", "0x333333"); 
Apabila kamu sudah menguasai kode warna hex, kamu pasti akan tahu bahwa setiap kode warna pasti diawali oleh tanda pagar, seperti ini: #333333. Namun dalam kasus ini, tanda pagar ini dihilangkan dan dimasukkan kedalam kode yang diberi warna merah seperti diatas.

All right then :) Try this by yourself :D
Widget Label Flash WP-Cumulus pada Blogger Widget Label Flash WP-Cumulus pada Blogger Reviewed by Andi on 6/03/2011 Rating: 5

Tidak ada komentar