Oke, gausah bertele-tele langsung aja kita praktekkan :)
- 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> </div>
<script type='text/javascript'>
var so = new SWFObject("http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf", "tagcloud", "240", "240", "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><a style='font-size:10px;' href='http://priyananto87.blogspot.com/2013/03/wp-cumulus-di-blogspot.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("wmode", "transparent");Tambahkan 2 buah garis miring pada awal baris (//) sehingga terlihat seperti ini:
//so.addParam("wmode", "transparent");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.