Selasa, 02 September 2008

Membuat Tag Cloud Cumulus pada Template Blogger

Widget tag cloud berbasis flash yang menggunakan konversi script dari Roy Tanck WP Cumulus untuk wordpress atau dalam template blogger lebih dikenal dengan sebutan Blogumus sangatlah bagus untuk mempercantik blog kita. Sebenarnya sudah cukup lama saya ingin memasangnya pada blog saya, namun baru saja saya mendapatkan tutorialnya di Blognya Amanda dan saya putuskan untuk mempostingnya di sini.

Untuk memasang widget ini pada template blogger sangatlah mudah. Anda tinggal mengikuti langkah-langkah berikut:

1. Login kedalam blogger dengan user id anda.

2. Masuk ke Dashboard Layout>Edit HTML dan klik Expand Template Widget

3. Jangan lupa untuk selalu mem-backup template anda sebelum memodifikasinya.

4. Cari kode dibawah ini
<b:section class='sidebar' id='sidebar' preferred='yes'>

5. Kemudian copy dan paste kan kode di bawah ini tepat di bawah kode di atas.
<b:widget id='Label99' locked='false' title='Labels' 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>

6. Simpan template anda. Selesai..

Ketika anda melihat blog anda kembali, secara otomatis tag cloud cumulus ini akan tertampil di sidebar blog anda. Secara default widget ini akan tertampil dengan keterangan sebagai berikut:
  • Width = 240px
  • Height = 300px
  • Background = white
  • Warna text = grey
  • Ukuran Huruf = 12

Bila anda menginginkan untuk memodifikasinya, maka perhatikan hal berikut:

1. Mengubah ukuran widget
var so = new SWFObject ("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

Anda tinggal mengganti kedua angka yang diberi warna tersebut. Warna merah untuk lebar, dan warna biru untuk tinggi.

2. Mengubah warna Background
var so = new SWFObject ("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

Gantilah kode warna sesuai selera anda atau yang sesuai dengan warna template anda. Untuk mengubah background menjadi trasparan, anda tinggal menghapus tanda "//" di depan kode: //so.addParam("wmode", "transparent");.

Bila mode transparan ini aktif, maka kode warna background yang sudah kita pasang di atasnya secara otomatis akan tidak berlaku lagi.

Secara default sengaja Amanda memberikan tanda "//" untuk tidak mengaktifkan mode background transparan dikarenakan mode ini tidak berhasil di beberapa template dan hanya menghasilkan blank widget, seperti yang telah dia jelaskan di sini.

3. Mengubah warna huruf
so.addVariable("tcolor", "0x333333");

Gantilah kode warna sesuai dengan yang anda inginkan

4. Mengubah ukuran huruf terbesar
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>");

Gantilah angka ukuran huruf tersebut sesuai keinginan anda

5. Mengubah kecepatan rotasi
so.addVariable("tspeed", "100");

Misalnya saya menggati angka 100 menjadi 200 maka kecepatan rotasi akan lebih cepat dua kali lipat.

Untuk contoh dapat anda lihat pada sidebar berlabel Kategori. Selamat mencoba..

Disadur dari sini


Posting yang Berhubungan Berdasarkan Kategori:



73 komentar:

  1. pertamax nih boz...
    tq atz infonya...udah tak coba

    BalasHapus
  2. asem telat komenku keduaxxx, komennya ntar kalo dah baca kang ok, hehehehehe

    BalasHapus
  3. kalo labal cloudku dibikin gitu ntar tambah berat blogku bisa rame2 manggil org buat angkat blogku hehehe

    BalasHapus
  4. yes ke empaaaax..... (mudah-mudahan)
    weeeks blohg ane udah pasang label cloudnya phydeaux3 di integrasikan ama Ajax Labenya depak and hasilnya waaaaaw.... hmmmm untuk blogumulusnya ntar-ntar aja ... di bookmark dulu aahh.... btw di blog ini kok lum pasang yak blogumulusnya

    BalasHapus
  5. lho..lho...payah!! kok bisa jadi nomor 5 sih gw..??

    BalasHapus
  6. waduh kang blogumulusnya ga tampil di sidebar tuuh..... apa lagi utak-atik templatenya niih , atau browser saya kali yak ?

    BalasHapus
  7. hehehe....aku dah nyoba blogmulusnya? apa blogumulus? oh..blogumus...lagi uji coba penambahan berat badan blog sampe berapa ...

    BalasHapus
  8. Sudah coba kang dan sukse ..he he he

    BalasHapus
  9. Blogumus itu apa ya?? maaf saya kurang paham..

    apakah seperti punya mas Rias yang dipake di kategori itu??

    BalasHapus
  10. kang aku pancet bingung, apa langsung praktek aja ya, biar gak bingung??

    BalasHapus
  11. Buat blogger ya ?
    Kalo wordpress gak ada ya ?
    Waaaaaa......
    Kok wordpress gak punya sih.
    Ntar deh saya ciptain (mode belagu = ON)
    heheheh...(mode ketawa maksa = ON)

    BalasHapus
  12. #Ridho: loh, berarti ga baca dari atas ya?

    "Widget tag cloud berbasis flash yang menggunakan konversi script dari Roy Tanck WP Cumulus untuk wordpress"

    kan tulisannya kang riasmaja "konversi" berarti diambil dari wordpress :)

    BalasHapus
  13. yoi kang... lebih elegan dengan memakai label cloud pake flash.. ngeloadingnya pun cepet... top bgt deh..

    BalasHapus
  14. hmmmm *mikir serius*
    kayak mana contohnya mas e?

    BalasHapus
  15. #cerita senja: itu loh kang, diatasnya arsip blog dibagian kanan blog ini.

    BalasHapus
  16. @Philuz: wah iya kang, saya sudah melihatnya.. mungkin agak sedikit dipercantik dengan permainan warna background dan hurufnya serta ukurannya

    @Oeoes: mmm.. tak tunggu loh kang..

    @Lyla: Waah.. ampun mbak.. kalo blognya mbak Lyla serahkan kepada ahlinya... he.he.he.. Kang Firdaus.. wakakakak..

    @Subagya: iya kang.. itu keren juga loh.. hehe..

    @Jovie: hiks.. sengaja gak ngomong-ngomong..

    @Wawanwae: eeeiitt... terimakasih kang..he.he..

    @Subagya Lagi: he.he.. tapi sekarang dah lihat kan..?

    @Gus: Blogumus kang... iya.. saya lihatnya di blognya kang Gus ma kang Edi.. he.he.. jadi ngiri pengen masang juga..

    @Edisamsuri: Wah.. kebetulan pas berjejer ma kang Gus.. iya kang saya lihatnya di blognya kang Gus ma kang Edi.. pengen masang tapi koq gak ada tutorianya.. akhirnya saya gogling dan ketemulah blognya Amanda..

    Untuk postingannya kang edi tentang Blogumus ini saya tidak tahu.. sampai hari ini saya mampir ke blognya kang edi.. ternyata di sana ada linknya amanda..

    Wah kang coba saat itu saya mampir sekali lagi ke blognya kang edi.. saya gak pusing-pusing nyari tutorialnya kang... mumet pokoknya nyari keyword nya..

    @Wendra Wijaya: iya kang.. yang itu..

    @Oeoes Lagi: mmmm... masih tak tunggu... mmm..

    @Ridho: saya ketemu kang Ridho di blognya Amanda juga.. ini aslinya punya wordpress loh kang.. coba dibaca lagi di blognya Amanda kang untuk lebih jeasnya.. he.he.he..

    @Bayu Aditya: Waah.. terimakasih kang...

    untuk kang Ridho, tuh kang Bayu sudah bantu menjelaskannya..

    @Fajar Indra: eeiitt.. setuju banget.. thanks to Amanda..

    @Cerita Senja: Itu mbak yang ada di sidebar berlabel Kategori..

    @Bayu Aditya Lagi: Waah.. jadi ngerepotin kang bayu ne... terimakasih kang..

    buat mbak senja.. tuh dah dibantu kang Bayu tempat contohnya..he.he..

    BalasHapus
  17. wah mantap kang..ijin diikuti..

    BalasHapus
  18. masih belum sempat kang nih masih ada trouble kerjaan, nanti deh kalo kerjaan dah kelar langsung praktek, ok.
    ditunggu aja, insya allah hari ini tag cloudku kelar

    BalasHapus
  19. ealahhhh..sempetnya buat tutor nyang ini mah si akang..adohhhh..telat pisan saya..karatusXXXXXX..wehhhh..mau coba ahhh..mudah2an bisa..jadul saia kang..

    bisa..ga..bisa..ga..bisa..ga...hehehee...

    semangat..ntar klo dah bisa balik sini lagi dah kang..wekekekeke..

    BalasHapus
  20. BERHASILLLLLLL..tapi ditemplate saya klo diexpand malah error terus ky postnya kang firdaus..hehehe..klo ga diexpand br mau save dia..anehh..

    klo dihilangin credit div tag yg didalem kode widget ntuh nyang buat roytank sm amanda..ga mau nongol labelnya kang..wekekeke..kayanya ga boleh jail dikit sm tuh widget..hehehe..

    thx kang..dah bisa install saia..hehehe..

    markotoppppppppp...hihihi...

    BalasHapus
  21. top markotop de kang, sekaligus mantap abis, soalnya nie info yang bikin saya penasaran pas liat di tanpatinta.com

    dan ternyata udah bisa untuk blogger, kirain buat WP aja, karena nie plugin dah lama di wordpress. Nice info dan thank you

    BalasHapus
  22. @Erwin: silakan kang erwin.. saya ikuti... *eh tapi diikuti kemana yah.. mmm..*

    @Lagi-lagi Oeoes: mmmm... rupanya masih alasan... oke saya tunggu...

    @Blogger Addicter: - pasti bisa kang.. ayo semangat..he.he.he..

    - Waah.. selamat kang.. saya sudah lihat hasilnya.. siiip bagus sekali.. serasi sama templatenya.. keren.. he.he..

    @Kapanpun: itu dia kang.. sama.. saya juga penasaran pas lihat di blognya kang Gus ma kang Edi..he.he.he... thanks to Amanda..

    BalasHapus
  23. keren infonya....makin mantaff aja nich

    BalasHapus
  24. Waaah ilmu baru nih, thanks ya bli.

    BalasHapus
  25. wah mantap mas..kalo sempet aku mo praktekin deh :D

    BalasHapus
  26. dulu pas awal2 nge blog Jovie pengen banget bikin tag cloud kayak gini, biar kayak di wordpress gitu...
    tapi skrgudah gak pengen lagi...
    ============================
    oh iya...tadi pagi pas baru ngepost ini kayaknya ada tulisan "bikin transparant" gitu..
    skrg jove dtg lagi mo koment tulisan itu eh malah gaka da lagi..ya udah gak jadi koment deh...Piss Man...!!

    BalasHapus
  27. mau tanya nie kang, kalo namabahin plugin tags cloud makin tambah berat ga loading page-nya, soalnya punya saya udah berat :)

    BalasHapus
  28. Oh ya kang,
    Kasusnya sama kayag mas blog learner.....

    Kira-kira tambah berat gak ya.....

    Kan kasian klo yang koneksinya lambat.....

    BalasHapus
  29. hhmm...kok aku gak nampil ya di blogku
    ada yang saah kali ya
    ??

    BalasHapus
  30. Terima kasih ilmun nya bermanfaat
    dapat pahala apalagi ini bulan puasa :D

    BalasHapus
  31. @iksan: terimakasih kang...

    @Ani: iya mbak.. kalo mau coba silakan.. he.he..

    @Tony: iya kang silakan dicoba...

    @Jovie: iya mbak.. kemaren saya nyoba ngotak-ngatik warna backgroundnya ternyata gak bisa transparan.. itu sebabnya saya tambahkan PS di akhir artikel..

    Namun setelah saya tanyakan ke Amanda dan mendapatkan jawabannya, saya menghilangkan PS tersebut dan menambahkan caranya di poin Mengubah warna background... gitu mbak.. he.he..

    @Blog Learner: wah ringan banget kang... ketika saya amati proses load widgetnyapun lancar... yang menghambat load blog saya ini biasanya di pipe.yahoo yaitu widget Top Articles dan Top 10 Komentator...he.he..

    @Lukman Chakim: ringan banget kang.. dicoba aja... tapi kalo seandainya itu yang memberatkan loading blognya kang Lukman.. gampang.. tinggal hapus aja.. he.he.he..

    @Yohanes A Cahyo: yang menyebabkan widget ini tidak bisa tertampil adalah belum terinstalnya plugin flash player pada browser, atau versi flash player yang sudah terinstall kemungkinan masih versi 6 kebawah.. untuk itu coba update plugin flash player yang ada di browser anda dengan update terbaru..

    Bila plugin flash player tidak ada masalah.. cobalah menggunakan background defaultnya, karena mode transparan dibeberapa template hanya tertampil berupa blank widget alias gelap..

    @Locksmiths Eastern Suburbs: iya.. terimakasih ya..

    BalasHapus
  32. pasang.... enggak...pasang.... enggak...pasang enggak.... wekekekekekke.... pasang ga yaaak :p

    BalasHapus
  33. yes kelar lupa mau bilang kalo udah sukses, hehehehehe
    lapor kang tag cloudku suksessssss

    aku warna huruf gak hafal kang untuk putih apa ya...??

    BalasHapus
  34. mantap neh infonya
    segera saya coba untuk versi wordpress

    makasih bli, keep the good work

    BalasHapus
  35. cihuyy...mantap Man....!!

    @ Oeoes : warna putih #ffffff, hitam #000000, biru # 336699 , bitu tua # 003366, untuk # cccccc, #eeeeee, #e0e0e0, #999999, itu warna abu2...
    hafal bener sih aku..jadi alu..udah akh...

    BalasHapus
  36. mantab hasilnya...saya sudah coba

    BalasHapus
  37. mantap mas......dah berhasil nih...coba liat....ada lagi gak yang baru nih

    BalasHapus
  38. @Jovie : untuk yang ini mbak so.addVariable("tcolor", "0x333333")

    BalasHapus
  39. @Subagya: PASAAAAANG.. he.he.he..

    @Oeoes: akhirnya... warna putih untuk huruf bisa mengganti di kode so.addVariable("tcolor", "0x333333"), dengan ffffff sehingga kode menjadi so.addVariable("tcolor", "0xffffff")..

    @Arielz: terimakasih kang.. selamat mencobanya..

    @Jovie: tuh.. buat kang Oeoes.. lengkap banget tuh dari mbak Jovie kode warnanya.. he.he.. terimakasih ya mbak..

    @universal law of attraction: iya kang... terimakasih banyak ya..

    @Soezack: selamat kang.. sudah berhasil..

    @Syahrizki Rafi' Asy'ari: selamat kang.. waah.. diblog yang mana ya kang.. banyak banget tuh.. he.he..

    @Oeoes: nah yang itu kang...

    BalasHapus
  40. Mlm Kang n met knal... tipsnya bsa dcoba tuuuu.. good luck....

    BalasHapus
  41. @ Mas Oeoes dan Om Riasmaja :

    ☆┌─┐ ─┐☆
     │▒│ /▒/
     │▒│/▒/
     │▒ /▒/─┬─┐
     │▒│▒|▒│▒│
    ┌┴─┴─┐-┘─┘
    │▒┌──┘▒▒▒│
    └┐▒▒▒▒▒▒┌┘
     └┐▒▒▒▒┌┘

    ●●Peace by JoVie●●

    BalasHapus
  42. @ MAs oeoes : untuk ("tcolor", "0x333333"), 333333 adalah warna biru kehitaman, untuk mengggantinya jadi warna putih ganti aja "0x333333" menjadi "0xffffff", gitu Mas Oeoes...

    BalasHapus
  43. @jovie : ok deh tak coba doeloe, makasih, kasoon, thanks, suwun, apa lagi ya...?

    BalasHapus
  44. Akhirnya berhasil juga aku bikin blogulus walapun sempat 'Mumet' 2 hari! saran saya kang supaya teman2 tidak mumet seperti saya / terutama newbie (bagi yang paham bhs HTML sih ggak ada mslh) tapi bagi pemula pasti agak bingung, dalam tutorial anda ini tolong sebutkan bahwa bikin blogulus ini syarat Utama: bagi blogger adalah memberi "LABEL" disetiap akhir postingan, karena kalau tidak biarpun sampai "mumetpun" tetap tak akan berhasil...

    BalasHapus
  45. wah.. ilmu baru ini ya.. nyoba' dulu kang.. ntar kalo berhasil.. pasti kesini lagi kasih oleh-oleh he...

    BalasHapus
  46. ya..ya... ternyata gampang ya caranya... thanks banget bang... ayo ngeblog teruss!!

    BalasHapus
  47. tor kalo di search g ada kode HTMLnya terus gimana???

    BalasHapus
  48. malem mas....hehehehe, absen lagi...dan mampir lagi nih...nungggu sahur, waktu itu aku oernah mencobanya dan berhasil, setelah itu aku tertimpa tsunami barengan dengan gemba jogja, caranya aku lupa dan langsung aku melihat kesini dan aku coba lagi dan tidak berhasil...., napa yah....sempat berpikir dan mencari tau asal muasalnya, oh ternyata aku tahu sekarang mas....bahwa di komputer aku belum ada flash playernya, maklum aku kan di warnet. terimakasih nih kang sekarang sudah jalan bisa di cek...lanjut yah minta informasinya lagi kalo ada........hihihihihihi, males nyari nih, pengen yang instant, kan newbie

    BalasHapus
  49. @Arif: Salam kenal juga kang Arif... selamat mencoba..

    @Jovie:
    - Peace juga mbak JoVie

    - Buat kang Oeoes tuh.. *lho mana kang Oeoesnya..? Waah kabur duluan dia*

    @Oeoes: mmm... tapi koq belum ganti putih kang? Katanya mau diganti warna putih hurufnya..

    @Job Area: He.he.. iya kang.. saya mohon maaf akan hal itu.. Nanti akan saya tambahkan di dalam postingannya.. Terimakasih kang sudah mengingatkan..

    @Adiguna:
    - Selamat mencoba kang Adi..

    - Betul kang mudah banget.. sukses kang..

    @Bagus: Coba kang bagus periksa kembali langkahnya:
    - Apakah tanda centang pada Expand Template Widget sudah dipilih?
    - Bila sudah, coba ulangi pencarian sekali lagi..
    - Apabila tidak tidak menemukannya coba hapus satu persatu karakter kode yang dicari *lakukan dari belakang* dan terus lakukan langkah pencarian..
    - Apabila anda menemukan kode yang mirip dengan itu kemungkinan besar itu adalah kode yang dimaksud.. Biasanya di beberapa template ada sedikit perbedaan. Namun tak jarang di template tertentu kode ini malah tidak ada a.k.a diganti dengan kode lain. Namun mohon maaf saya belum mengetahui kode lain yang mewakili kode tersebut..
    - Apabila sudak ditemukan lanjutkan langkah selanjutnya..

    @Harry: Waahh.. terimakasih sudah sharing kang... Sudah saya lihat hasilnya di blognya kang Harry... Bagus banget kang.. siip..

    BalasHapus
  50. wah......., bagus nie di coba...

    BalasHapus
  51. Terimakasih mas.. tips nya membantu sekali. Mulai kemaren2 bingung cari untung juga ada mas arielz yang kasih tahu...

    BalasHapus
  52. duh....ane ke berapa ya??

    tipsnya langsung dicoba

    BalasHapus
  53. waaahhh...kereennn!!!! makasiii yaaa!!!!

    BalasHapus
  54. wah,,untuk wordpress ini bisa diterapkan gak om???

    saiah coba dulu neh..hehe

    BalasHapus
  55. mas blog cumulusku kok g'berhasil ya mas....sampek bingung ndiri ya aku...
    tolong di bantu ta mas,minta tolong ya...

    BalasHapus
  56. mas gue mau tannya ni....

    gimana carannya masukki recent visittor diblogger kita ni......
    supaya teman2 kita yang lain dapet bergabung diblogger kita.........



    tolong dibantu yach.....
    makasih tas bantuannya

    BalasHapus
  57. bisaaaaaaaaaaaaaaaaaaaaaaa
    tqqqqqqqqqq

    BalasHapus
  58. great tips! thanks!

    BalasHapus
  59. keren bro tag cloud-nya...,
    Boleh saran bro...,Bikin postingan aplikasi add-on buat blog donk...,trus kt sharing2 deh.gmn...?
    dtunggu bro...
    Sukses...

    BalasHapus
  60. Mas Kang.. mau nanya
    aku dah nyoba ni di blogku tp kok jumlah label yang muncul di widgetnya ga sama sama jumlah labelku?
    ada 5 tp yang muncul cuma 4. Help..

    BalasHapus
  61. mas belum bisa tu tags nya udah q coba
    apa karena template saya ya ga mendukung
    widithnya udah saya rubah tapi ga ada perubahan gimana ya
    template saya minima black yang 3 coloum
    mas tolong dibantu ya

    BalasHapus
  62. mantaf gan ilmunya....
    numpang praktekin yak :P

    BalasHapus
  63. pas browsing label cloud cumulus search pake bhs inggris, gak paham artinya, untung ada blog ini, komen dulu baru cobain label cloudnya ya, makasih ...

    BalasHapus
  64. Permisi, numpang baca tipsnya ya. Dicoba langsung ya.

    BalasHapus
  65. kang bukannya cloud cumulus ne buat wordpress ya (sepengetahuan ku)ya klo slah ya maap
    tapi mang skarang kan dah ada buktinya di blogspot jg da

    BalasHapus
  66. mantap pisan euy....
    makasih bro..saya pemula nih

    BalasHapus
  67. Thx ya omm atas share nya.
    Berkat blog ini widget Cumulus terpasang juga dech di blog sy.
    Terima kasih om

    BalasHapus
  68. salam kenal Kang, aku kok gak bisa kelihatan tag clouds nya. ada kotaknya di sidebar tapi gak keluar tulisan2nya.... mohon pencerahannya Thanks....

    BalasHapus
  69. sama mas, kok g keluar tag cloudnya.

    BalasHapus
  70. hallo bisa ajarin tampilan komentar seperti ini nggak.....

    BalasHapus
  71. hallo bisa ajarin buat tampilan komentar seperti ini nggak....

    BalasHapus