Cara Membuat Background Efek Slide

Jika anda bosan dengan background yang itu-itu saja, ada baiknya anda membaca tips ini sampai habis. Background slide show adalah latar belakang yang bisa berganti-ganti secara otomatis setiap waktu. 

Petama Background slide show ini harus di load dengan JQuery yang biasanya dipasang di atas kode </head>

KODE 1

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js' type='text/javascript'></script>

<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js' type='text/javascript'></script>

Setelah itu dibagian CSS Body, harus ada seperti ini

KODE 2

body {    background: black url(http://4.bp.blogspot.com/-gfmEpSwgz6g/UqsDt6wqbsI/AAAAAAAACi0/_MQndHNtGlk/s1600/free-wallpaper-2.jpg) repeat-x fixed top center;    -moz-background-size:100%;    -webkit-background-size:100%;    -o-background-size:100%;    background-size:100%; }

Jika sudah terpasang juga, kita harus menambah JavaScript Background Slide Show dibawah ini :

<script type='text/javascript'> var ssBG={ gbr:[ "http://1.bp.blogspot.com/--a3RLzG1fWE/UqsFa16TCDI/AAAAAAAACjE/tp85G_D7kDU/s1600/3d-desktop-background-hd-of-art-and-design.jpg",  "http://4.bp.blogspot.com/-omF6IF_dCWQ/UqsFXR6SpRI/AAAAAAAACi8/Oa_8Nzi8N0A/s1600/3D-Background-Ball-Free-Download.jpg", "http://3.bp.blogspot.com/-Suit_VTEjzE/UqsDqVlJXiI/AAAAAAAACiY/25IJsF5wi7s/s1600/Snow_leopards.jpg", "http://2.bp.blogspot.com/-0TLS8ntE0b8/UqsDsPwuC7I/AAAAAAAACik/0ea-pNHzI0s/s1600/3d-hd-wallpaper-ja-amazing-wallpaper+%281%29.jpg", "http://1.bp.blogspot.com/-wQVVYgFWz30/UqsDrxKNVlI/AAAAAAAACig/g-iet1b0Itg/s1600/3d-desktop-backgrounds.jpg", "http://2.bp.blogspot.com/-PlVEbSvOqvI/UqsDmfRX0nI/AAAAAAAACiQ/SObwckxV9kg/s1600/3D_desktop_wallpaper.jpg",  "http://1.bp.blogspot.com/_KjKudOQDFIw/TIBYyADOwKI/AAAAAAAADbo/uuGxtubijJE/s1600/China_Country_4+%28wallpapersbay.blogspot.com%29.jpg", "http://2.bp.blogspot.com/_KjKudOQDFIw/TIBRITYy3fI/AAAAAAAADSA/cZXzlv-rgZs/s1600/Rainbow_Wallpapers_%281%29+%28wallpapersbay.blogspot.com%29.jpg", "http://4.bp.blogspot.com/_KjKudOQDFIw/TICHoDt9rwI/AAAAAAAAEI0/BKgogEknRCY/s1600/Creative-Digital-Animal-Wallpapers-24+%28wallpapersbay.blogspot.com%29.jpg",  "http://1.bp.blogspot.com/_KjKudOQDFIw/TIBQjNvqJHI/AAAAAAAADRo/g_FBWqwMKAw/s1600/Thunder_Storm_Wallpapers_%2837%29+%28wallpapersbay.blogspot.com%29.jpg"  ], now:0, SlideMyBG:function(list,style,speed,bgPos,bgSize,bgRep){ if(!ssBG.SlideMyBG.hasRun){ssBG.SlideMyBG.hasRun=true; if(list==null||list==''){list=ssBG.gbr}else{if(typeof list!='object'){list=ssBG.gbr}} if(style==null||style==''){style='random'} if(speed==null||speed==''){speed=5000} if(bgPos==null||bgPos==''){bgPos='top center'} if(bgSize==null||bgSize==''){bgSize='100%'} if(bgRep==null||bgRep==''){bgRep='repeat'} ssBG.gaya=style;ssBG.jeda=speed;ssBG.gbr=list;ssBG.pos=bgPos;ssBG.size=bgSize;ssBG.rep=bgRep; ssBG.opt={'background-attachment':'fixed','background-repeat':ssBG.rep,'-moz-background-size':ssBG.size,'background-size':ssBG.size}; } if(ssBG.gaya=='random'){ssBG.gbr=ssBG.gbr.sort(function(){return 0.5-Math.random()})} var img=new Image();var brp=ssBG.gbr.length;if(ssBG.now>=brp){ssBG.now=0} var gbrSkrng=ssBG.gbr[ssBG.now];ssBG.now++; if($('#bg-fader').length==0){$('body').prepend('<div id="bg-fader" style="opacity:0.0;top:0;left:0;width:100%;height:100%;background-color:'+$('body').css('background-color')+'"></div>');$('#bg-fader').css(ssBG.opt);$('body').css(ssBG.opt)} $(img).load(function(){ $('#bg-fader').css({'background-image':'url('+gbrSkrng+')','background-position':ssBG.pos}).animate({opacity:1.0},'slow','linear',function(){ $('body').css({'background-image':'url('+gbrSkrng+')','background-position':ssBG.pos}); $(this).animate({opacity:0.0},'slow','linear'); setTimeout("ssBG.SlideMyBG()",ssBG.jeda); }); }).attr('src',gbrSkrng).error(function(huh){ssBG.SlideMyBG()}); } }; </script>  <script type='text/javascript'>$(window).load(function(){ssBG.SlideMyBG()})</script> 

Kemudian Save. Semoga bermanfaat.