Yohow,sekarang mo nyobain bagi-bagi ilmu nih buat temen-temen yang lagi nyari atau lagi kepengen bikin cumulus di blognya masing-masing.Mungkin uda banyak juga tutorial ini di internet,tapi apa salahnya berbagi.Cumulus sendiri secara singkat merupakan sebuah label atau kategori yang bisa berputar bebas mengikuti kategori yang tengah di seleksi oleh pointer mouse.Cumulus ini pertama kali di ciptakan Oleh Mr.Roy Tanck.Dan awalnya di bikin buat wordpres tapi bisa di sempurnakan dan di adaptasi di blogspot oleh Mrs Amanda dan Mr. Roy Tanck.Langsung aja ma men gak usah banyak cing cong lagi.
-
Pertama-tama login dulu ke account blogger anda.
-
Kemudian pada kontrol panel, masuk kebagian tata letak atau layout, lalu pilih edit html dan centang pada box expand widget.Untuk menjaga agar template tidak menjadi eror atau rusak kita bisa memback up dulu template original yang sebelumnya sudah kita buat.
-
Untuk mempermudah pencarian coding pada editor HTML kita bisa menekan tombol Ctrl + F pada keyboard atau pada menu edit lalu pilih (Find) lalu masukkan kode dibawah ini :
<b:section class='sidebar' id='sidebar' preferred='yes'>
Setelah ketemu kemudian lakukanlah copy paste kode dibawah ini tepat dibawahnya.
<b:widget id='Label9' locked='false' title='Tag' 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", "300", "200", "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>
Jika telah selesai, lalu klik tombol save dan refresh halaman blog. Sampai disini kita sudah bisa melihat cumulus yang kita buat dengan catatan coding yang kita masukan telah terpasang dengan benar namun untuk menyesuaikan cumulus tersebut dengan template yang kita gunakan kita perlu menyamakan warna background dari cumulus tersebut.
Caranya dengan mengganti kode warna yang di bold seperti pada kode di bawah:
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "300", "200", "7", "#ffffff");
ini merupakan kode yang menyatakan warna background dari cumulus
#ffffff
Silahkan anda rubah sendiri warna sesuai keinginan anda, disarankan sesuai warna blog andaJika anda tidak tahu kode-kode warna pada HTML anda bisa lihat disini.
Untuk merubah warna tulisan atau teks dari widget ini silakan edit pada angka yang bertuliskan 333333 seperti dibawah :
so.addVariable("tcolor", "0x333333");
Jika anda ingin merubah besarnya huruf yang ditampilkan silakan edit pada bagian dibawah ini yang bertuliskan 12 menjadi angka yang anda inginkan.
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>");
Sesudah selesai Save template anda,dan lihat hasilnya.Contoh Cumulus saya seperti di pojok kiri atas.Selamat Mencoba dan semoga bermanfaat.
