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

241 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. tenkiuuuuu sooo much ! chantek :)

    ReplyDelete
  15. canteekkk! ikut kesesuaian blog

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

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

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

    ReplyDelete
  18. KALAU NAK TUKAR WARNA LAIN BOLEH TAK?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    ReplyDelete
  35. 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
  36. cantik la....thkzzzz u soooo muchhhh.....

    ReplyDelete
  37. 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
  38. cantik sgt2x,thank sebb kasi tutorial ni..

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

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

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

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

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

    http://titisanhatiku.blogspot.com

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

    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. asalamualaikum, nak promod sikit ye.., sape-sape awek yg nak bekawan ngan saye silakan hub saye ke fb saye ye. mzikri15@yahoo.com

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

    ReplyDelete
  49. eh tak jadi :( kenapa eh ?

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

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

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

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

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

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

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

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

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

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

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

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

    ReplyDelete
  63. 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
  64. i like !!!!!!!!!!!!!!!!!!!!!!!!! thanxzzzzzzzzzzzzzzzzz

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

    ReplyDelete
  66. terima kasih ^^ menjadi sangat ..

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    ReplyDelete
  81. Cantik. ...dah lama kuidamkan...tq

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

    ReplyDelete
  83. da buat dan menjadi....tq.....

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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