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>Copy
Setelah itu dibagian CSS body, minimal harus ada seperti ini:
body {
background: black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJKea9kkIckML7k1LnFlF7240ieLlbmSv_3aBWvDHLyvG-lCdBg9CodNvWzdn7oGsPo-81XRctk6ljocz5DlLUQglMdSt7E5hlBfaqLjTC3skoeKYaQ-zXrRZ5-Kmk7_QzJQF2uifiuA/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%;
}
Copy
Jika sudah terpasang juga, kita harus menambah JavaScript Backround Slide Show di bawah ini:
<script type='text/javascript'>
var ssBG={
gbr:[
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy0Hr5JP2VK6hNMY8mHqN5uIwzqu-5RLkfxtvgYfHOS909-Zz61_9NlEonxiocgTrOyyjGl1h_xRvYf-hVjYZUzkT6x_KHAEbMU9i6cBrJBrZ4wayyy5VdIf9Jti6gRyfvEyd7u-hHyA/s1600/3d-desktop-background-hd-of-art-and-design.jpg",
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs_AzavG88svcsXsUEZipNU-22l8f0Cxwu44V8TwMzpCYPxX7X2zfh2okQBFW9bhtiBKi45SFw_tQNo1E-dmVCkRYUqL1KDQKUjpGLgepneczGANmSZ4-f9uBjDCN95BnMJhGPlL7E0g/s1600/3D-Background-Ball-Free-Download.jpg",
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9r0szpZPLBFOt_N9SOVzllwumVP1xKUrPLFuLUbq-I33I4YwR5KkYyj1msXLXv01jxwxfLPFm2Fd6fc3yPlkc1rDlWcGNPUxvLDOhYbyinEL3ll5BptDakhWdjSllTSX_FpjKSy0_cA/s1600/Snow_leopards.jpg",
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4vmkconsI5JwpYSGdkHCPYJf-K3EdWaXXO4XyLl2cwynZwxLB_gfgdI6TYfFZixs13sg7mxdt6mx6RusQbUVPZ2M8TVTiOIq2AyripyOvth9mH6wja-qQIxCQ0SmCVrv3CBE2saOirw/s1600/3d-hd-wallpaper-ja-amazing-wallpaper+%281%29.jpg",
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKzLHOa04VtzxXs-ZsGK89D-PFWMNACYL5ctutVxdEmF9LxvNxRmxshyphenhyphenWxBk7pGLahGZPjnvs5VPjtrqtUiKwwrIcwyrgayFQjeM14J9GBmYUEBIoGNClmvymexlSgZzWePcYZAtThNg/s1600/3d-desktop-backgrounds.jpg",
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU7eFOp_bgywk7AL-GtlBnUJBTQmBekdMp9ppr3puZp8A31xIxG8oCOKr7GjwHUXcIvV-XjwPHbO7ftxPbpTCiRhO72pR-BvFMcjlnGIOq583IJj3VUIQKn6ngbSChfzfIDkLnoopLug/s1600/3D_desktop_wallpaper.jpg",
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEQMifxI_fIGlSiNg0C0djX2uVv1OmaHgv0prQzrxnGhmDD2KPRMIa1PSlpbcITd9r1Wzux5gBa31KXQXX5HAA7nyUp-5IOv_c_as4mp-JePd7XbKbih87vG2WhJp_Eqyf0Ynlw-jfPS4/s1600/China_Country_4+%28wallpapersbay.blogspot.com%29.jpg",
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3-EmvhM6G6qm41MY0eQpLi8WQ0t76sqzfXtJRuYl7wkeCA_EEIYJAiRcjGicTq-ZPoSxXue3bUvGnxI_eSHlfhQGnYF3LTZWBLtLt84DnBFw88PNI4t76RhoGuedyEE8Psm8eVA4auWQ/s1600/Rainbow_Wallpapers_(1)+%28wallpapersbay.blogspot.com%29.jpg",
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLE_SyCwA-BjEOCVcMyKZ4Op3UFRdQr_qYPpmqnqff8IeBtegXiGbp4DwWvfrAD2jk1zTufhz9HF9-GUvSne0jzgW760nA6-gYS1kuBWYqjJXbb2s9SwagAlrV__I3YvUZfVSuacLCW7g/s1600/Creative-Digital-Animal-Wallpapers-24+%28wallpapersbay.blogspot.com%29.jpg",
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDIAWdm-qED48XnUliXs-Xgl1q8CphiLoxM3gEixWEPvCyZPNyk-p6v5pMR9tMdyguKGw8dR3XEnUlWUvTBZHm3Q4lwj9_Ay9QX4nZM1HhR25B6_taSw_eiJx5Vas8tH5Y7-PMUuxBxUQ/s1600/Thunder_Storm_Wallpapers_(37)+%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>
Copy
Modal Kecil bisa mendapatkan hasil yg luar biasa...
My life is my message.
jangan lupo mampir ke blog saya ya gan di www.portalcoding.com
Cuma Slidernya tidak bisa jalan ya jika blogspot di alihkan ke dot.ID
Mohon infonya.
Tolong gan !!