Pasang Label Cloud Animasi

Baru juga pasang label cloud dengan animasi, eh...dah ada yang nanyain gimana cara bikinnya. Yawda daripada bingung dan ribet kalian pada nyari kesana kesini ga dapet, aku kasih deh tutornya. widget yang satu ini, merupakan kombinasi dari javascript dan flash. Kalo boleh jujur, saya dapatkan widget ini dari blogger buster (versi english). Nah...berhubung blog saya ini bahasa indo, jadi saya kasih tutornya pake bahasa indo juga biar pada ngerti. Gimana....dah ga sabar pengen pasang ya...?! yawda langsung aja simak langkah - langkahnya di bawah ini : Setelah kalian login di blogger, langsung saja menuju tata letak kemudian edit html. Jangan kasih tanda centang pada kolom expand template widget, karena hanya bikin bingung doang. Selanjutnya cari kode html ini di template blog kalian. Kalo ga ada, ya...yang mirip2 aja deh.

<b:section class='sidebar' id='sidebar' preferred='yes'>

Nah...kalo dah ketemu, tambahin dibawahnya kode html berikut :

<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>

....kalo udah copy pastenya, klik pratinjau....trus kalo hasilnya dah keliatan di sidebar blog kalian , berarti beres deh. Tinggal bagaimana kalian memberikan sentuhan lain untuk widget tersebut supaya keliatan klop dengan blog kalian. Kustomisasi Label Cloud Animasi Nah...untuk masalah yang satu ini, perlu saya kasih tahu bahwa sesuai kode yang tadi kalian masukan seperti diatas, bahwa widget ini mempunyai settingan defaultnya seperti dibawah ini : 1. Panjang widget = 240px 2. Lebar widget = 300px 3. Background = putih 4. Warna huruf = abu 5. ukuran huruf = 12 untuk merubah settingan diatas supaya lebih cocok dengan blog kalian, ikuti petunjuk berikut : 1. untuk merubah panjang (merah) dan lebar (biru) widget, kalian cari kode seperti berikut, lalu ganti angkanya :

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

2. untuk merubah warna background, tinggal ganti saja kode hexa yang berwarna hitam sesuai kode diatas. 3. untuk merubah warna huruf, cari kode berikut lalu ganti angkanya (merah) sesuai kode hexa warna yang kalian kehendaki

so.addVariable("tcolor", "0x333333");

4. untuk merubah ukuran huruf, cari kode berikut lalu ganti angka (warna merah) sesuai ukuran huruf yang dikehendaki

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>");

Nah...gampang kan...?! atau masih pada bingung...?? Selamat berbingung ria aja deh...

42 komentar:

  1. Jadi tambah berat nggak ya kalo blog saya, dikasih beginian? Seberapa kb-kah penambahan beratnya? Soale pake fplash juga ya?

    BalasHapus
  2. @tukang sapu... : ga kok, coba aja....

    BalasHapus
  3. jah dodol lo bisanya njiplak punya orang... lo gak kreatiff... lo sok yang nyiptain... padahal lo cuma njiplak... plakk... plak...

    BalasHapus
  4. sekalipun njiplak, tapi dia tetap membagikan ilmu ke orang lain, pokok eee maz mizwar is the best.. maz mizwar pantas jadi seorang guru.. dosen aja mengajari siswanya harus baca buku dulu, nah buku itu dari mana..??

    BalasHapus
  5. javascrpit ya?lage rada males ne mas, bikin loading berat?? well thanks infonya ;))

    BalasHapus
  6. thx infonya ... save dulu :)

    BalasHapus
  7. hiks ntr blog saya tambah berat om, skr aja klo loading berat banget.sy smp bingung mo ngurangin yg mn.minta saran dunk.

    BalasHapus
  8. nah, ini dia yang saya cari..

    BalasHapus
  9. Ha ha ;)) saya udah pernah buatin tutornya dan pasang... :d yah bagus sih,... Tapi Lemot ...

    BalasHapus
  10. mas adee kayaknya udah pernah bahas juga,,, mas mizwar.. mantep deh pokoknya... terus berkreatifitas... dan salam kenal

    BalasHapus
  11. klo munculin emoticons untuk Comment gimana ya???
    :D

    BalasHapus
  12. klaw backgroundnya biar transparant gimana yah :D tolong ya juragan ;)

    BalasHapus
  13. Mantap Infonya Nih Tapi susah juga ngertinya

    BalasHapus
  14. Mas, Mbak, Mbah, atau siapa deh, saksikan kalau saya telah berterima kasih pada kursus-blog ini karena telah mambantu saya!!:|
    Mapir dunx, banyak game nih!!b-(

    BalasHapus
  15. saya pake template cool x yg di download dari blognya mas, trus gimana car merubah backroundnya saya mau backroundnya warna hitam tulisannya putih. saya udah coba edit warna tapi gak bisa, atau harus masukkan kode lagi ya.. mohon penjelasannya mas. trima kasih

    BalasHapus
  16. saya mau pasang label cloud animasi, tetapi pesan yg keluar seperti ini.

    Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
    Pesan error XML: The element type "b:widget" must be terminated by the matching end-tag "".

    mohon penjelasannya mas, makasih sebelumnya

    BalasHapus
  17. sama nih.....sepertinya ga berlaku ke xml yah....atau berlaku ke HMTL classic aja atau gimana??minta pencerahannya buat template baru dong

    BalasHapus
  18. coy e masa ga bisa masukin codeyangnu kasi kanapa ya pasti ada tulisan seperti ini :

    Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
    Pesan error XML: The element type "b:widget" must be terminated by the matching end-tag "".

    mohon penjelasannya mas, makasih sebelumnya
    u bisa bantu w ga

    BalasHapus
  19. Sip...langsung ditindaklanjutin...thanks sharingnya Om

    BalasHapus
  20. iaa om , adha tulisan : Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
    Pesan error XML: The element type "b:widget" must be terminated by the matching end-tag "".

    BalasHapus
  21. salam kenal mas miswar,,,
    pertanyanku mungkin g berhubungan dg tema ini,,tp mo nanya dimana lg klo g disini:
    mhn dibantu gmn cara seting widget agar jarak antar widget tdk terlalu jauh/berdekatan/berdempetan (seting manual dr add widget hasil yg didapat jaraknya msh jauh),,,
    matur nuwun

    BalasHapus
  22. gmn cara bikin form komentar kek gini ya, punya koq gak mau?

    BalasHapus
  23. Kok biingung yaaa. . . .
    (=3=)a . . .

    Eh ada tutorial yg gmpg d ngertin loh . . Di hakimtea.blogspot.com kalu ga sala . . .

    BalasHapus
  24. vos kurang secrptnya
    /b:widget

    BalasHapus
  25. @mukri : thanks you muh....

    BalasHapus
  26. nice blog!
    sukses selalu dan artikelnya ditambah yang makin berguna yah!

    BalasHapus
  27. kak mizwar, aku uda ngopi kodenya tapi belum jadi.
    apanya yang salah y....

    BalasHapus
  28. my blog http://automotivefordummies.blogspot.com/

    BalasHapus
  29. tHx bWt infonya

    BalasHapus
  30. masss kenapa ga bisa2 yahhh ud di coba berulang kali....engga leluar tuh Cloud animasinya

    BalasHapus
  31. kok gak jalan yah di aku tapi ku ambil dari blogbusternya langsung jalan :)

    BalasHapus
  32. mana contoh hasilnya??
    ah..ribet ah...ni pake script gue aja..
    dijamin tokcer..
    http://www.agielweb.info/2010/08/membuat-tag-cloud-3d-untuk-blogger-baru.html

    BalasHapus
  33. kalo ngutip, baiknya di sebutkan aza sumbernya biar gak jadi plagiat

    BalasHapus
  34. Wohh exactly what I was looking for, thanks for putting up.
    Essay Help service

    BalasHapus

blogger