Memasang Cumulus

Cumulus adalah suatu kumpulan tag dan category dalam animasi flash (Contoh nya dapat anda lihat pada sidebar di blog ini). Jika kita mengunakan Joomla atau Wordpress, maka kita tinggal pasangkan Plugin pada Wordpress atau sejenis Module pada Joomla. Namun, untuk blospot tidak semudah itu memasangnya, tapi bukan berarti sulit.

Untuk memasang cumulus (Sebelumnya Backup dulu template anda).

Buatlah widget label standar blogspot terlebih dahulu. Caranya klik “Add a Gadget” pada menu “Layout > Page Element”
Isi Title sesuai dengan keinginan anda, contoh “Labels in Cloud”, dan biarkan opsi lainnya seperti apa adanya.
Kemudian masuk ke menu “Edit HTML” dan centang “Expand Widget Templates”, temukan kode-kode berikut ini:

<b:widget id='Label1' locked='false' title='Labels in Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<b:if cond='data:display == "list"'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='"label-size-" + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Note: ini adalah kode dari widget label yang kita buat tadinya.
Ganti kode tersebut dengan kode dibawah ini.

<b:widget id='Label1' locked='false' title='Labels in Cloud' type='Label'> <b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<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></div>
<script type='text/javascript'>
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "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>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Sekarang “Save Template” dan selesai sudah Cumulus untuk blogger anda.

Ada beberapa poin yang perlu diperhatikan untuk mengedit Widget Cumulus tersebut. Perhatikan tulisan berwarna dalam penggalan kode dibawah ini.

<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></div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);

BIRU, lokasi file support (SWF dan JS) untuk menampilkan widget cumulus. File-file tersebut dihosting di http://halotemplates.s3.amazonaws.com. Bisa saja sewaktu-waktu file tersebut hilang. Maka untuk berjaga-jaga silakan download kedua file tersebut disini. Dan jika suatu saat hilang, kita dapat mengantikan alamat url tersebut sesuai tempat host kita nantinya.
Contoh:
http://www.namasitussaya.com/swfobject.js
http://www.namasitussaya.com/tagcloud.swf

HIJAU, Ukuran lebar (width) Cumulus.
MERAH, Ukuran tinggi (height) Cumulus.
PINK, Warna latar Cumulus.

Atau

langkah-langkahnya adalah :

1. Login terlebih dahulu ke Blogger anda

2. Pilih Tab Layout

3. klik Edit HTML

4. Jangan lupa Expand Widget Template diberi tanda centang

5. Sebelumnya jangan lupa anda backup terlebih dulu template anda, agar jika terjadi error anda tinggal

upload template anda lagi. :)

Penting :

Untuk mempermudah pencarian kode atau script klik tombol Ctrl + F pada keyboard anda dan masukkan kode Pada taks find.

Langkah Pertama

1. Cari code </head>

Lalu copy paste script dibawah ini dan taruh di atas kode </head>

Keterangan :

Keterangan dibawah ini bertujuan jika anda ingin menganti warna pada tag clould cumulus.

   a. #FFFFFF = warna background

   b. #0066FF = warna garis tepi

2. Save template anda.

Langkah Kedua

1. Menaruh script HTML pada Gadget

    a. Plih tambah Gadget

    b. Pilih html/javaScript

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

<b class='xbottom'><b class='xb4'/><b class='xb3'/><b class='xb2'/><b class='xb1'/></b>

</div>

</b:includable>

</b:widget>

</b:section>

Keterangan:

a. Tulisan warna biru " Article Categories" adalah title dari Widget. Anda bisa merubah sesuka anda.

    Misalnya: kategori artikel, Grup Artikel, dan sebagainya.

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

    bingkai Rounded corner.

c. Tulisan warna merah muda adalah kode-kode yang berhubungan dengan Widget.

   1. Angka 330 = lebar pixel widget

   2. Angka 200       = tinggi pixel widget

   3. 333333    = kode warna dari Tulisan

   4. #ffffff    = kode warna dari Background Widget (sudah dijelaskan di langkah pertama)

   5. Angka 12 = ukuran font dari widget (Tips jika kategori atau label anda masih sedikit lebih baik

                                      ukuranya font di perbesar.

save tamplate anda terus lihat hasilnya...

Selamat mencoba....