Pages

Saturday, 26 November 2011

Cara Nak Letak Kelopak Bunga Berguguran Pada Blog


Salam semua. hari ini admin ingin berkongsi lagi tutorial mudah dengan korang. kali ini admin kongsikan cara nak letak kelopak bunga berguguran pada blog. caranya cukup mudah. korang cuma perlu ikut cara yang admin ajarkan dibawah.

Pertama, korang perlu copy coding tersebut

<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'}).append(a).appendTo('body')});</script>

Kedua, pada dashboard korang klik design > page elements > add gadget > HTML Java Script > paste coding diatas. save dan lihat hasilnya

Add Gadget


HTML/Java Script


Paste coding dan SAVE


Untuk lebih menjimatkan ruang korang boleh add coding diatas dalam HTML Templates. pandai2 lah korang mencuba yer. blogging kena pandai mencuba...huhu.

Semoga berjaya. admin buat page screen untuk memudahkan sesiapa yang belum faham. apa2 komen dan cadangan boleh utarakan disini. admin hanya berkongsi. semoga berguna (^_^)

Suka dengan apa yang admin kongsikan?. sila klik pada button dibawah sebagai tanda sumbangan ikhlas anda untuk duniakongsi.net. hanya sedikit iklan untuk menampung duniakongsi. sumbangan "klik" dari anda sangat admin hargai dengan ucapan terima kasih


3 comments:

  1. Tq tutorial ni... Dh letak pun jom...visit my blog for preview.....hee

    ReplyDelete
  2. hehe . mnjadi lah .. ^_^
    nt follow mollow deh .. :*

    ReplyDelete