Membuat Background Slide Show
Membuat Background Slide Show
Background Slide Show adalah gambar latar belakang yang bisa berganti-ganti secara otomatis setiap waktu yang telah ditentukan. Background ini disematkan di bagian body dengan posisi 100%.
Background Slide Show ini pertama-tama harus di load dengan JQuery yang biasanya dipasang di atas </head>
<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, minimal harus ada seperti ini:
body { background: black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKDk6uAsXLebbgyCm0QBZ8YXFIPPf5GrMx_TXCFSxQE5rUKxCanrJnHElMJey0vOh6WDI8zcwklvpPmjrhUaFpkvVV12HJDICiVHBv6B_ngaR-nP0ePvkccC1rIY9Ap-MCHda2mr7qTgI/s320/body-santa.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 Backround Slide Show di bawah ini:
<script type='text/javascript'> var ssBG={ gbr:[ "http://2.bp.blogspot.com/-jXDDlst7GMc/T1SDEQ72L6I/AAAAAAAAMKc/7C4dD51XSNY/s1600/Windows-8-HD-Wallpapers+%281%29.png", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiixx4yazVOQvdzY7lbT8WXZsFNgF45QMFF2l1wMZMivG3MIt40ILFPzN211EluUzofuLS-xmcZmpN8zUf3Xn3uUr-j_cxc-0N2WE_GnTuNMUOx_AM_QtVsHsXTRRScg6AgPhV77hI/s1600/Windows+8+xTreme+Edition.jpg", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7SyBlIgP8N8mWwW2Sp-cFi4NzHfC1SpFQHJzskaOP4FZxd4UfMnPm_84FI9vSUgkJW1qY9eMAb77jcUgFg-u7z1on_Z-cEph9Dak10czfc1ed3wCk-eWSfYDSePfUhbDecXn38hx9bpU/s1600/Windows_8_wallpapers_3.jpg", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifPO93V-9nXG1qt6Kc0GoteehSBQq7lqvu7HfOLPXTCo7M5vqTHWrVezjJ91HpCHnA5q4xjxaps13uVtkI0OuT3iYRxbv-bLG2LinYdZVvBK0zZZoE6Tiku1QQ8lVGQbT7RVkr_sl9DWk/s1600/windows8professional.jpg", "http://www.smartearningmethods.com/wp-content/uploads/2012/03/Scenic-Windows-8-9.jpg", "http://img225.imageshack.us/img225/4564/39003694.jpg", "http://www.deviantart.com/download/243901871/windows_8_3d_by_faisalharoon-d417nvz.jpg", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR2FVPzxBGP7A0GIS2-felCHf24PMqv8i3Wq1kOeoYqgTkXKTHKRTueMvOCTmIVqt9neDVUzpm5WGRLju_l871ejw8Wc_50RJTEC2FDj7jlrh9PQD95lVzADwXxZ-ZWKn6AyYZPEE-fOE/s1600/China_Country_4+%28wallpapersbay.blogspot.com%29.jpg", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie9YWdgAOQ0diRxnSo-uScRElgrXh4EZYNCEvEuwub4pYDIvh9B56j0G6agjxhX6VCbmFeNuFt7o40iC_inT250Gsp5Pi7aht1VF4i2RSNWXRbdv27emjAtngNJWATDgQ79Obpk9JWrL0/s1600/Rainbow_Wallpapers_(1)+%28wallpapersbay.blogspot.com%29.jpg", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB4FB_BKxre-8O-h1SB_XBsb1yGCkHVkKQBkphKjbsTmlyjUBskuOd1dEtNvk3QNGt6zxNW3gEphgMmqQLJziRKdSHh0TrECUUAT2pmdIs3fzJqbekX-VlWtB7pFWkmKsf5UmfCv79jMs/s1600/Creative-Digital-Animal-Wallpapers-24+%28wallpapersbay.blogspot.com%29.jpg", "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>