Sebenernya yang pertama kali menggunakan ini adalah para komunitas WP (Word Press) yang dikembangkan oleh Roy Tanck. Pengguna cumulus sebagai pelabelan dalam WP menyita perhatian para pengguna blogger sehingga akhirnya dibuat lah cumulus untuk blogger sendiri. Ini salah satu contoh cumulus untuk blogger --> klik disini.
Gimana kerenkan? Mr-Top juga pasangkok. Dari pada kita ngomong terus lebih baik kita langsung aja ke TKP....
1. Masuk ke Layout --> Edit HTML dan centang Expand Widget Templates
2. Cari kode berikut </head>
3. Dan kopi kode ini tepat dibawahnya
<style>
#xsnazzy{margin:0 0 10px 0; background:transparent}
.xtop, .xbottom{display:block; font-size:1px; background:transparent}
.xb2, .xb3, .xb4{display:block; overflow:hidden; background: #FFFFFF ; border-left:1px solid #0066FF ; border-right:1px solid #0066FF }
.xb1, .xb2, .xb3{height:1px}
.xb1{background: #0066FF ; display:block; overflow:hidden; margin:0 5px}
.xb2{border-width:0 2px; margin:0 3px}
.xb3{margin:0 2px}
.xb4{height:2px; margin:0 1px}
.xboxcontent{display:block; padding:5px; background: #FFFFFF ; border:0 solid #0066FF ; border-width:0 1px}
</style>
Ubah yang bewarna merah dan hijau sesuai keinginan Sobat. Warna merah untuk background, sedangkan warna hijau untk garis pinggir.
4. Save template Sobat
5. Selanjutnya ke tab Layout --> tambah gadget --> HTML/JavaScript dan kopi kode dibawah ini
<b:section id='sidebar9' preferred='yes' showaddelement='no'>
<b:widget id='Label9' locked='false' title='Label' type='Label'>
<b:includable id='main'>
<div id='xsnazzy'>
<b class='xtop'><b class='xb1'/><b class='xb2'/><b class='xb3'/><b class='xb4'/></b><div class='xboxcontent'>
<b:if cond='data:title'>
<h2 style='font-family:arial'> Article Categories </h2>
</b:if>
<div class='widget-content'><center>
<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>Distributed by <a href='http://analisis-fiqih.blogspot.com'>Cahaya Biru</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", " 330 ", " 200 ", "9", " #FFFFFF ");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x 333333 ");
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>
<b:include name='quickedit'/>
</center></div>
</div><!--xboxcontent-->
<b class='xbottom'><b class='xb4'/><b class='xb3'/><b class='xb2'/><b class='xb1'/></b>
</div><!--end of xsnazzy-->
</b:includable>
</b:widget>
</b:section>
Keterangan
a. Tulisan yang bewarna hijau adalah title dari widget, Sobat dapat merubahnya
b. Code yang bewarna merah adalah HTML pembuka dan bingkai penutup
c. 330 --> lebar pixel widget, 200 --> tinggi pixel widget
d. #FFFFFF --> Kode warna dari backgroun widget
e. 333333 --> kode warna tulisan
f. Angka 12 --> ukuran font dari widget.
Selesai semuanya, Sobat tinggal save dan lihat hasilnya..
Post a Comment