Tuesday, September 1, 2009

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

14 comments:

Dev said...

Blogger kan ngeluarin versi non flashnya mas biar ga terlalu berat..

Juliawan said...

hi sniperz ^^ ,uda lama gak berkunjung blognya makin rame aja sob ^^ ,hehehehe

Zniper said...

@Dev, ya benar mas... tapi menurut sy tidak begitu berat lah. Dan bagi saya pribadi Cumulus kan lebih keren ;)

@Juliawan, Hi juga Mas... memang sdh lama ya. Silakan dilihat2, makanya sering2 berkunjung kesini :P

Antwa said...

saya pernah masang nih widget, tapi klo kata saya sih berat juga mas....jadi ga make tag-tag'an deh J)

danue354 said...

mau pasang gak yaa,kataya jadi berat ..
tanya-tanya aja dulu deh
btw thaks yaa infonya

Zniper said...

@Antwa, danue354, Mungkin tergantung tampilan template ya, kalau memang cocok sedikit berat tapi tampilannya menjadi jauh lebih OK sih gpp. :)) Tapi kalau udah berat dan malah membuat tampilan tambah semberaut ya, lupakan saja dah.


By the way, tks telah berkunjung ;;)

choir gbi sukawarna said...

di blogspot kok gak jalan yah!!! beda dengan code di atas bro?

Zniper said...

@choir gbi sukawarna, jalan kok Mas. Buktinya di blog ini neh... blogspot juga kan? :)

jhonson blog said...

koq gak berhasil di blog saya yah..padahal gw dah cek kodenya bener gak salah tuh. ?????

jimmy said...

code yg di kasih itu bener gak?...koq gak berfungsi di blog ku nih...

Mx Axrom said...

makasih infonya gan

arif muhammad said...

ko ga bisa trus yahh masss!!!!!!mohon bantuanya mass

Zniper said...

@arif muhammad,Jhonson Blog,Jimmy. wah dimana ga bisa nya ya... ? seharusnya bisa Mas, sudah sy terapkan di blog ini. Mungkin karna tanda petiknya kali ya, perhatikan lagi tanda petik-satu nya. seperti ini ( ' ), atau mungkin url untuk file .js nya bermasalah? kalau begitu dihosting sendiri aja file .js nya.

Abu Ayaz said...

saya udah bolak balik nyari ini di mbah google.
Banyak yang di tawarkan, tapi satupun gak jalan di blog saya, kira2 kenapa ya?

:)) ;)) ;;) :D ;) :p L( J L :X =(( :-o :-/ :-* K 8-} J] ~x( :-t b-( :-L x( =))

Post a Comment