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

43 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. salam kenal pak?

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

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

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

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

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

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

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

    BalasHapus
  14. Mantap Infonya Nih Tapi susah juga ngertinya

    BalasHapus
  15. 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
  16. 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
  17. 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
  18. sama nih.....sepertinya ga berlaku ke xml yah....atau berlaku ke HMTL classic aja atau gimana??minta pencerahannya buat template baru dong

    BalasHapus
  19. 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
  20. Sip...langsung ditindaklanjutin...thanks sharingnya Om

    BalasHapus
  21. 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
  22. 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
  23. gmn cara bikin form komentar kek gini ya, punya koq gak mau?

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

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

    BalasHapus
  25. good post bro..

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

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

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

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

    BalasHapus
  30. tHx bWt infonya

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

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

    BalasHapus
  33. 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
  34. kalo ngutip, baiknya di sebutkan aza sumbernya biar gak jadi plagiat

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

    BalasHapus
  36. It is safe to say that you are confronting issues while making a Blockchain account? So as to get to the guide How to make a record on Blockchain,You can connect with the experts who are dependably there to help you.You should simply dial Blockchain Support Number 800-665-6722 and get the ideal and reasonable arrangements from the specialists at all conceivable time. The experts are dependably there to prompt you and convey quality-driven arrangements at whatever point clients ask them.

    BalasHapus

blogger