Memasang Cumulus pada Blogspot Blog

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.

Sebenarnya pemasangan pada blogspot juga sama mudahnya dengan pemasangan pada Joomla dan Wordpress, hanya saja caranya memang sedikit berbeda.

Jika anda tertarik memasang Tag cloud yang seperti biasa, silakan ikuti langkah-langkah membuat tag cloud pada blogger disini atau jika anda tertarik untuk memasang Cumulus pada blogspot blog anda, maka silakan ikuti langkah-langkah berikut ini. (Sebelumnya Backup dulu template anda).

1. 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.
2. 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='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
   <b:if cond='data:display == &quot;list&quot;'>
   <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='&quot;label-size-&quot; + 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.
   
   
3. 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(&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;);
   // 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>
   <b:include name='quickedit'/>
   </div>
   </b:includable>
   </b:widget>

4. 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(&amp;quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&amp;quot;, &amp;quot;tagcloud&amp;quot;, &amp;quot;240&amp;quot;, &amp;quot;300&amp;quot;, &amp;quot;7&amp;quot;, &amp;quot;#ffffff&amp;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.

Selamat mencoba…

img are from: http://wordpress.org