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

238 comments:

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

    ReplyDelete
  2. 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
  3. cocok untuk blog cewek nih, bunga-bunga berguguran :D

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

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

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

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

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

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

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

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

    ReplyDelete
  12. canteekkk! ikut kesesuaian blog

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

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

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

    ReplyDelete
  15. KALAU NAK TUKAR WARNA LAIN BOLEH TAK?

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

    ReplyDelete
  17. serius cantek..!!
    thanks alot..

    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. Saya suka buat kelopak bunga..Tq kerana berkongsi..:)

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

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

    http://titisanhatiku.blogspot.com

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

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

    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. 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
  46. tq..mmg cntik..n da letak da kt blog syA..

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

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

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

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

    ReplyDelete
  51. 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
  52. boleh kasi tahu saya x
    yg mana perkataan yg dekat dashboard tu hah?

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

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

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

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

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

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

    ReplyDelete
  59. cantik :) da jadi . terime kasih ^^

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

    ReplyDelete
  61. 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
  62. i like !!!!!!!!!!!!!!!!!!!!!!!!! thanxzzzzzzzzzzzzzzzzz

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    ReplyDelete
  78. Cantik. ...dah lama kuidamkan...tq

    ReplyDelete
  79. da buat dan menjadi....tq.....

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

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

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

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

    ReplyDelete
  84. 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
  85. salam...cantik sgt.tq krn memudahkan.....

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

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

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

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

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

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

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

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

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

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

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