Tutorial Kelopak Bunga Berguguran Di Blog

Ingin menampakkan blog anda kelihatan lebih menarik dengan objek yang berguguran selain daripada salji.?
Apa kata kalau hiaskan blog anda dengan kelopak bunga yang berguguran seperti gambar di bawah.



Anda boleh melihat contoh kelopak bunga yang berguguran di blog demo ini.

Tutorial yang ringkas adalah seperti berikut.

1. Dari dashboard > design > add a gadget > HTML/javascript

2. Copy dan paste kod di bawah ke dalam ruangan HTML/javascript yang anda buka


<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>if(!image_urls){var image_urls=Array()}if(!flash_urls){var flash_urls=Array()}image_urls['rain1']="http://2.bp.blogspot.com/-IQXNv-_CBLE/TpWcK7LL4VI/AAAAAAAAG0I/bcxYcqc_uI0/pinkpetal1.png";image_urls['rain2']="http://4.bp.blogspot.com/-teXCIicWPF4/TpWcLLg0A2I/AAAAAAAAG0U/IPPCr1gponc/pinkpetal2.png";image_urls['rain3']="http://3.bp.blogspot.com/-3JG9HLECCRU/TpWcLZGSYtI/AAAAAAAAG0g/zIJINua93TE/redpetal1.png";image_urls['rain4']="http://2.bp.blogspot.com/-BByhQEK5E24/TpWcLux4xRI/AAAAAAAAG0s/x2hIr1AV_Ac/redpetal2.png";$(document).ready(function(){var c=$(window).width();var d=$(window).height();var e=function(a,b){return Math.round(a+(Math.random()*(b-a)))};var f=function(a){setTimeout(function(){a.css({left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100)}).animate({top:(d-10)+'px'},e(7500,8000),function(){$(this).fadeOut('slow',function(){f(a)})})},e(1,8000))};$('<div></div>').attr('id','rainDiv')
.css({position:'fixed',width:(c-20)+'px',height:'1px',left:'0px',top:'-5px',display:'block'}).appendTo('body');for(var i=1;i<=20;i++){var g=$('<img/>').attr('src',image_urls['rain'+e(1,4)])
.css({position:'absolute',left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100),'margin-left':0}).addClass('rainDrop').appendTo('#rainDiv');f(g);g=null};var h=0;var j=0;$(window).resize(function(){c=$(window).width();d=$(window).height()})});</script>
<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>$(document).ready(function(){var a=$('<img>').attr({'src':'http://2.bp.blogspot.com/-IQXNv-_CBLE/TpWcK7LL4VI/AAAAAAAAG0I/bcxYcqc_uI0/pinkpetal1.png','border':0});$('<a></a>').css({position:'absolute',right:'0px',top:'22px','z-index':'90'}).attr({'href':'http://tutorialuntukblog.blogspot.com/2011/10/tutorial-kelopak-bunga-berguguran-di.html'}).append(a).appendTo('body')});</script>



3. Save dan lihat hasilnya.:)

232 comments:

  1. slain kelopak bunga.. ada jenis pe lg?

    ReplyDelete
  2. very2 beautiful..hehe,cantik!!!

    ReplyDelete
  3. cantik sangat2....ummi dah apply kat blog ummi...tengkiu...
    ada x tutorial camner nak letak tumb follower ngan dashboard kat atas sekali....kalau ada, leh tolong tunjukkan x.....tengkiu

    ReplyDelete
  4. cocok untuk blog cewek nih, bunga-bunga berguguran :D

    ReplyDelete
  5. cantekkk sgt...dah apply dah kt blog..hihihi..;p thanks for the tutorial...

    ReplyDelete
  6. cantiknya.....nie le yg sy cari.....tq

    ReplyDelete
  7. mekasih ye..sy suka sangat..^____*

    ReplyDelete
  8. wahhh..cantik sgt..thx 4 daa tutorial :)

    ReplyDelete
  9. cantiknya...thanks for the tutorial ya...ade x color lain untuk bunga2 tue...apapun suka sangat...hehee

    ReplyDelete
  10. weeeee ! jadi2 ! suke2 ..lawa je.. thanx :)

    ReplyDelete
  11. cantik... dah guna dah... tq.. :)

    ReplyDelete
  12. suke2...dah guna pon...thanks ^_~

    ReplyDelete
  13. cantikkk!!
    tapi ade kaler lain tak??
    :)

    ReplyDelete
  14. da copy paste...tp xjd...=( please help me...

    ReplyDelete
  15. saya pon x bleh nk buat mengapa ye???

    sy dah ikut langkah2 yg diberikan.. boleh beri tunjuk ajar???

    ReplyDelete
  16. KALAU NAK TUKAR WARNA LAIN BOLEH TAK?

    ReplyDelete
  17. terima kasih dengan info ilmiah ini...

    ReplyDelete
  18. datang sini curik kelopak munge.. heheh.. thanks.. @~@

    ReplyDelete
  19. Tq , tabur kelopak bunga di blog saya juga...

    ReplyDelete
  20. suka!!!!!sy dh try dh..best sgt2..tq <3

    ReplyDelete
  21. cantik sangat.akak baru je letak kat blog.walaupun blog akak ni jarang2 update.TQ

    ReplyDelete
  22. cantik!kalau durian yg gugur lagi cantik >_<

    ReplyDelete
  23. omeyyyyyyy nyer ... tq ... :)) sy amik tw :))

    ReplyDelete
  24. it cool..sye nk try kat blog saye lah..hehe

    ReplyDelete
  25. suke2,,,,,hihi,,,,,,,tq ek,,,,
    <3<3<3

    ReplyDelete
  26. semakin cute plak blog saya lps ada kelopak mawar nie..thanks a lot sbb sudi ajar..

    ReplyDelete
  27. law nk buat yg lain b0leh x?c0nt0h tukar jd bntuk bear 0r l0ve..

    ReplyDelete
  28. cantik...thanks yee..sy dah wat pon..:)

    ReplyDelete
  29. saya ambil tutor ni.. cantik sangat.... terima kasih

    ReplyDelete
  30. dah cuba..tp x bole tak tau pasai apa...ke cek tak gheti nk buat....adoihaiiii ^_^

    ReplyDelete
  31. copy katne ek?sape yg dah pandai tolong la ajar..tak reti ni..:(

    ReplyDelete
  32. tq ek,,dah jd dah nk wt klopak bnge ur..bkan susah sgat un,,kacang giler..

    ReplyDelete
  33. sye nk tkar kpd salji plak tpy x d dh kt java script/html edit..yg laen2 adelah..tpy yg pasal bunge2 nih memg x d dh..how??

    ReplyDelete
  34. cantik la....thkzzzz u soooo muchhhh.....

    ReplyDelete
  35. please!!!..tkde pon bar html dkt add a gaddet tu....nk ltk kt mnew javascript tu.....klu nk lbih sng bg snap shot jew..xpon video...ak buat x leh nk buat nie...please all

    ReplyDelete
  36. cantik sgt2x,thank sebb kasi tutorial ni..

    ReplyDelete
  37. terbaek lha
    lawanye .. terharu ney
    heeeeee ^_^

    ReplyDelete
  38. > design > add a gadget > HTML/javascript

    ReplyDelete
  39. canteknyerrr...thanks...

    ReplyDelete
  40. Saya suka buat kelopak bunga..Tq kerana berkongsi..:)

    ReplyDelete
  41. xda pn add a gadget hbs tkn design tu...help me...:(

    ReplyDelete
  42. thanks for the tips. Sukke sangat. Tapi camner pula nak tukar object tu pada yang lain?

    http://titisanhatiku.blogspot.com

    ReplyDelete
  43. slain klopak bunga..ada x love??

    ReplyDelete
  44. asalamualaikum, nak promod sikit ye.., sape-sape awek yg nak bekawan ngan saye silakan hub saye ke fb saye ye. mzikri15@yahoo.com

    ReplyDelete
  45. asalamualaikum, nak promod sikit ye.., sape-sape awek yg nak bekawan ngan saye silakan hub saye ke fb saye ye. mzikri15@yahoo.com

    ReplyDelete
  46. memang lawa , tap , kenapa kadangg kadang saya bukak bog , kelopak bunga tuh tak turunn ?? pelikk .. tepaksa saya emove dan copy balikk code tuhh .. can answer my qustion , plz ??/

    ReplyDelete
  47. tq..mmg cntik..n da letak da kt blog syA..

    ReplyDelete
  48. eh tak jadi :( kenapa eh ?

    ReplyDelete
  49. camner nAk msuk kn mp3 ??pless ajar sy

    ReplyDelete
  50. terima kasih.. sangat sangat ..
    blog saya jadi cantik bila banyak bunga bertaburan..
    ... ^_^

    ReplyDelete
  51. macam mana pulk nak letak salji?
    ^_^

    ReplyDelete
  52. thanks,saya buat jadi....cantik sgt2 sebab saya pun suka bunga.

    ReplyDelete
  53. makasih gan...
    saya udah banyak ambil tutorial dari blog ini,
    buat temen-temen yang lain,yg mau liat hasil dari blog ini,,,liat di blog saya :

    htpp://antskaka.blogspot.com

    terima kasih sekali lagi... :)

    ReplyDelete
  54. boleh kasi tahu saya x
    yg mana perkataan yg dekat dashboard tu hah?

    ReplyDelete
  55. boleh kasi tahu saya x
    mana perkataan yg dekat dashboard tu?

    ReplyDelete
  56. mana perkataan add a gadjet yg dekat dashboard tu?
    harap leh bantu

    ReplyDelete
  57. cantik la ckit blog sy..thank ea..

    ReplyDelete
  58. Thankx I am going to use this on my blog:)

    ReplyDelete
  59. emmm so nice...dah bubuh di blog Zana...Thanks

    ReplyDelete
  60. wahhh cun..terima kasih banyak2..ilmu berguna..

    ReplyDelete
  61. thanks, sangat2 suka..nak try tutorial yg lain lak..

    ReplyDelete
  62. memang cantik sgt.. sy ni memang kene buat HTML sendiri.. tp bila sy bukak kat l.p org lain kenape kelopak bunga x jatu pnn???

    ReplyDelete
  63. i like !!!!!!!!!!!!!!!!!!!!!!!!! thanxzzzzzzzzzzzzzzzzz

    ReplyDelete
  64. Yess jadipun.. tq yea..
    http://beautybizzskincareproducts.blogspot.com/

    ReplyDelete
  65. terima kasih ^^ menjadi sangat ..

    ReplyDelete
  66. horayyy cantik tenkiuu sgt
    http://onlinehijabs.blogspot.com/p/tudung.html

    ReplyDelete
  67. ijin copy codenya yah
    --------------------------
    Kumpulan Info dan Tutorial Blog Lengkap diFree Plex

    ReplyDelete
  68. Makasih, tambah cantik Blog gua yang masih sederhana ini

    ReplyDelete
  69. Thanks bgt......kunjungi blog kita ya http://vilamutiaraciujung.blogspot.com

    ReplyDelete
  70. menjadi jua ..,
    yessssssssss ..,
    http://ceritakedaiaku.blogspot.com/

    ReplyDelete
  71. thanks....hehehe..jom bg komen kat blog sy yg xseberapanya...

    ReplyDelete
  72. jadik..,yess..hai...new here...jadik sudi2 lah ye... encikgemok.blogspot.com (jgn lupe follow xD)

    ReplyDelete
  73. tak menjadi r... mcm mana ia hehheehe

    ReplyDelete
  74. nape ni di blog ai tak da menu desain :(

    ReplyDelete
  75. follow me at http://azskelfaiz.blogspot.com

    ReplyDelete
  76. BOLEH X BUATKAN..NANTI SAYA KASI EMEL

    ReplyDelete
  77. SAYA X RETI...SO LEH TOLONG..PLZ...

    ReplyDelete
  78. Minta izin guna code ni..saya tukar jadi falling star...sangat cantik...hasilnya adalah spt yg sy idam2kan..Tq saudara

    ReplyDelete
  79. Da buat da.. Menjadi... Cantik , terima kasih ....

    ReplyDelete
  80. Cantik. ...dah lama kuidamkan...tq

    ReplyDelete
  81. cantiiiik...:-)
    makasih ya

    ReplyDelete
  82. da buat dan menjadi....tq.....

    ReplyDelete
  83. sue da apply kt blog, cantik..sgt cantik..thanks ;)

    ReplyDelete
  84. wih keren nih , makasih banyak untuk infonya sob..

    ReplyDelete
  85. cantikkk..... kalau kelopak bunga ni nak tambah dengan yg lain, mcm daun berguguran boleh ke?

    ReplyDelete
  86. why??? tell me why?? kenapa tak boley buat!!! nak kelopak bunga nie!! someone help me please!!

    ReplyDelete
  87. ok.. penat selongkar blog baru jumpa cara2 dia.disebabkan saya punyer yg baru so payah sikit,, sumpah comel sangat bunga berguguran nie.. hehehe.. suka sangat dapat buat..;)

    ReplyDelete
  88. salam...cantik sgt.tq krn memudahkan.....

    ReplyDelete
  89. best...mudah.. senang..xde basix IT pun boleh. Tq.

    ReplyDelete
  90. Dah macam salji blog saya, walaupun bunga2.. comel sgt2, tq2!!!!

    ReplyDelete
  91. waahhhhhhhhhh saya suka sangat !!!
    saya amik tau ... tq

    ReplyDelete
  92. macam mane?? sorry,saya pengguna baru..

    ReplyDelete
  93. paste kat mana.Paste kat coding yg sedia ada tu ka atau buang yg itu dulu. Help me.....dh try x menjadi pun.

    ReplyDelete
  94. thank you ya.. http://nadanajiaaaa.blogspot.com/

    ReplyDelete
  95. HELP! i tried it but it wont work!

    ReplyDelete
  96. salam..mcme nak masukkan story dlm box tu..anyone help me.. :(

    ReplyDelete
  97. Terimakasih infonya sis, mampi ya ke blog saya

    ReplyDelete
  98. nak copy paste kat mna? xde ada pun design..ataupun letak kat layout?

    ReplyDelete
  99. thanks..blog saya kelihatan lebih menarik..jika dapat daun kering yang berguguran seperti ini..saya mahu kodnya..yg udah ditemui tidak berjaya..dan kurang byk gugurnya..tq2

    ReplyDelete
  100. nice... it's working... hehe cantekk la... tqvm

    ReplyDelete