Trik Membuat Cloud Label (Label Awan)

Apaan tu...? Label awan merupakan salah satu bentuk kumpulan daftar label yang ditampilkan seakan-akan berada di atas awan. Trik blogger ini juga sangat menarik untuk di adopsi dalam blog kamu. Kalau biasanya kamu hanya menggunakan label default bawaan widget atau gadget blogger.com, sekarang kamu memiliki salah satu variasinya. By the way... dari pada ngomong melulu lebih baik kita mulai saja triknya.

  • Login ke account blogger kamu.
  • Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

  • Cari kode berikut :

<b:section class='sidebar' id='sidebar' preferred='yes'>
atau kode-kode yang sejenis dalam template blog kamu.

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

  • Tambahkan kode berikut di bawahnya (update).
<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://sites.google.com/site/bloggerustemplatus/code/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://sites.google.com/site/bloggerustemplatus/code/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>

Catatan :

  1. Ganti kode yang berwarna merah secara berturut-turut dengan lebar area label ("240"), tinggi area label ("300"), dan warna area label ("#ffffff") sesuai dengan ukuran elemen halaman (lokasi peletakkan label awan) di blog kamu. Kamu pun bisa menyeting besar kecilnya huruf dengan merubah angka ("12").
  2. Jangan sampai kelupaan jika kamu merubah warna area label. maka kamu mungkin perlu juga merubah warna teksnya yang ditunjukkan dengan warna hijau (333333). Khusus untuk perubahan warna teks, cara memasukkan kode tanpa embel-embel #.
  3. Atur putaran kecepatan dengan mengganti kode berwarna biru (100), makin besar makin cepat.

  • Jangan lupa disimpan

Sumber : Blogumus: a flash animated label cloud for Blogger! oleh Amanda Fazani

Versi demo silakan dikunjungi Demo Optimasi Blog.

46 komentar untuk “Trik Membuat Cloud Label (Label Awan)”

  1. to peter : sama-sama, peter

    to vatoor alsobrante : thanks

    BalasHapus
  2. Oke deh... bisa dicoba dulu nih... thanks

    BalasHapus
  3. thanks ats infonya, aq coba yach... salam;)

    BalasHapus
  4. sudah aq coba, mas OB, alhamdullilah berhasil. aq sdh gabung jg nih disini, biar mdh saling lihat gbung juga di blog aq. plus sklian nanya nih, aq msh nggak ngerti apa arti hosting dan hostingan, mhn penjelasan yach?

    BalasHapus
  5. gasan Caplin_Banjar : sepengetahuan OB hosting merupakan jasa layanan internet yang menyediakan sumber daya server-server untuk disewakan (ada juga yg gratis), sehingga memungkinkan organisasi atau individu menempatkan informasi di internet berupa HTTP, FTP, EMAIL atau DNS (Wikipedia). Klo hostingan sih tinggal nambahin -an saja he..he.. maksudnya pengertiannya mirip dengan hosting. Misal orang nanya kamu hosting blog kamu dimana? jawabnya bisa macem-macem, seperti idowebsite.net, rumahweb.com, dan sebagainya.

    BalasHapus
  6. Boz infonya kueren-kueren hehehe~~~ gw jg baru belajar buat blog nih lam kenal yah! :))

    BalasHapus
  7. to Ad4m San: Terima kasih dan salam kenal juga :D

    BalasHapus
  8. makasih om OB, salam dari orang sasama banua, sukses n' kapan2 batakun pulang, kada muyak kalo? Trims ulang

    BalasHapus
  9. gasan Caplin_Banjar: kada, malahan basyukur banar. karena ada jua urang banua nang katuju mam-blog. happy bloging...

    BalasHapus
  10. :)) Wah.... thanks buanget Mr. OB

    BalasHapus
  11. CuY 5Kasih begete tas inpo en trik2ny tanks

    BalasHapus
  12. wey
    thanx yawh atas ilmu nha
    mas tukeran link yuk
    link mu dah ku pasang

    BalasHapus
  13. wokey...
    thanks for information....
    add my blog yaa.......

    BalasHapus
  14. ka, ulun batakun pang, ulun sudah coba buat labelnya tapi yang muncul kok cuma satu label, label-label yang lain ga muncul (maklum baru blajar ngeblog)

    BalasHapus
  15. Terima kasih, ilmu dari optimasi-blog bagaikan awan yang putih bersih, dengan berbagi ilmu optimasi-blog akan semakin dahsyat.

    BalasHapus
  16. on tanya dong kenapa blogku lama uploudnya thank ya

    BalasHapus
  17. to much Asyikin: blog yang lama loadingnya banyak penyebabnya. Umumnya disebabkan oleh banyaknya script dan banyaknya image. Khusus untuk blog ukuwah islamiah, sidebar ada 2 di kiri dan di kanan. Coba untuk widget yang menggunakan javascript berat loadingnya diletakkan di sidebar kanan ex: google translate, follower (gfc)

    BalasHapus
  18. sssssssssiiipp deh pokoknya, infonya sangat membantu...
    ehm...sekalian ninggalin jejaka..eh jejak ahh..!!

    BalasHapus
  19. kang, punyaku yang tampil labelnya kok cuma satu? padahal ada lebih dari satu label yang ada di blogku??? tolong dibls ya....

    BalasHapus
  20. mau nanya, ilmu ini udah ku praktikan diblog..
    bisa ga kalo mau ngerubah warna dasar putih menjadi transparan, dan bentuknya dirubah juga dari kotak menjadi bulat..

    cek blog
    http://i-ilmu.blogspot.com
    amail at adekuwedokdewe@gmail.com

    Thank, ditunggu balasannya...

    BalasHapus
  21. cukup menarik tampilannya...tapi berpengaruh terhadap loading blog itu sendiri ga? misalnya jadi agak berat gitu....

    BalasHapus
  22. to BLOG M45-4DY: OB udah ke TKP, keliatannya baik-baik saja atau udah lebih dari satu label yang muncul.

    Wiwin Sugiarto: Biasanya trik ini hanya bisa merubah warna dasarnya saja, klo transparan OB belum ketemu kodenya. Dan untuk ganti bentuk kotak ke bulat, terus terang OB belum menguasai kode javascript. Jd OB ngga bisa, lain halnya kalau menggunakan CSS.

    BalasHapus
  23. mas OB,. hatur tengkyu,. buat optimasi blog nya,.. saya sudah coba,. mantap uy.. minta izin minta link'y ..
    ;;) ;;) ;;)

    BalasHapus
  24. Bagus gan sangat membantu nich.... di tunggu yang laennya.....:D:D:D

    BalasHapus
  25. Wah mantabbbbzzzzzz abies blog saya sedikit menarik, Trim's ya Gan...:D:D

    BalasHapus
  26. mas punya saya udah tak coba dan berhasil tapi kok labelnya cuma 3 tapi seharusnya 4

    BalasHapus
  27. ada yang baru2 lagi g' infonya...
    cz bagu2 sieh...

    BalasHapus
  28. mas aq uda coba tapi ko ngga jadi yach gimana dongggg:p

    BalasHapus
  29. mas aq uda coba tpi ko ngga jadi yach gimana dong:((

    BalasHapus
  30. @wheny @febrilatif[at]mig33.com, coba perhatikan penempatannya lagi apa sudah benar??

    BalasHapus
  31. bos.
    koq eang aku pasang tampilannya pul ijo ea...
    kira2 salahnya dimana? mohon pencerahan....

    BalasHapus
  32. sebaiknya penempatan tag cloud yang paling bagus sebelah mana ya?

    BalasHapus
  33. thnks infonya, skrg labelku kian tinggi terbang di awan...

    BalasHapus
  34. thax mas infonya yang sangat bermanfaat ini..........

    BalasHapus
  35. ini juga bagus bos
    langsung coba:-*

    BalasHapus
  36. aku udah pernah coba si...btw nice deh om OB :)

    BalasHapus
  37. well done.....
    check it out www.mendadakmulang.blogspot.com

    BalasHapus
  38. mantap.....

    http://www.zhay-chynk.co.cc/

    BalasHapus