Membuat Tag Cumulus di Blogger

Mungkin Anda tertarik membuat label/tag dengan animasi bergerak (dinamakan Tag Cumulus). Saya akan membagikan caranya. Ini hanya di pergunakan untuk blogger saja


Berikut caranya:
1. Masuk ke Blogger
2. Pilih Tab Layout
3. klik Edit HTML
4. Pilih Expand Widget Template


Pertama: Menaruh kode CSS Bingkai Rounded (tanpa gambar)

1. Copy kode CSS dibawah ini:

<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>

Keterangan :
Plis, lihat tulisan yang kedap-kedip itu.
a. tulisan ungu #FFFFFF = warna background dari Bingkai
b. tulisan biru #0066FF = warna garis tepi dari Bingkai
Anda bisa merubah kode itu dengan kode warna sesuai selera anda.

2. Taruh kode tersebut di atas kode </head>

3. Save Template-mu

Kedua: Menaruh Kode HTML Bingkai dan Tag Cumulus
1. Cari kode HTML yang menunjuk pada 'id' atau 'class' dari area Sidebar Blog anda...

kode HTML sidebar tergantung dari jenis template anda. Ini bisa bervariasi. Misalnya: pada blog saya adalah id=sidebar-wrapper.

Tapi, dalam blog anda mungkin bisa lain. Misalnya: Mungkin juga, id='sidebar' ; id='column02' ; dan sebagainya.

2. Kemudian, copy 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", "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>
<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 warna merah 'Article Categories' adalah title dari Widget. Anda bisa merubah sekehendak anda. Misalnya: kategori artikel, Grup Artikel, dan sebagainya.

b. Tulisan warna hijau = kode HTML pembuka (yang diatas) dan bingkai penutup (yang dibawah) dari bingkai Rounded corner.

c. Tulisan warna biru adalah kode-kode yang berhubungan dengan Widget.
c.1. Angka 330 (tanpa px) = lebar pixel widget
c.2. Angka 200 (tanpa px) = tinggi pixel widget
333333 (tanpa #) = kode warna dari Tulisan
c.3. #ffffff = kode warna dari Background Widget
c.4. Angka 12 = ukuran font dari widget

6. Taruh kode tersebut, di manapun anda suka. (saya sarankan dalam area sidebar yaa...)

7.Save Template-mu