Cara membuat background slide show ~ blog sepot

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%.

DEMO

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/AVvXsEjyPH40pfRIfKyNAgWiBukbvaOBWpyKmykthMaGm15CUiRxkaPCbU11sawdEjAmsFmbJ32iohLm7EJuxkliT_9VyupyzrwR0XIoPc4aVO-sqa1MAzDXEdWZq4YmTrHpzjN1f1t4qLI-9w/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 Backround Slide Show di bawah ini:

<script type='text/javascript'>
var ssBG={
  gbr:[
    "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi37IH8FYfhJPNMYzI1a3_GssQfwedm76Og0edwBw7sJFjqFjx2xMvcPTOceGAKfGZft6gQ_9fbyXgpTXwDIMJK0246Lf7qXkM6i9IoKFJ6r_3NVU0YDsf-KO3VeiHux0G48Xh0EyJuw/s1600/3d-desktop-background-hd-of-art-and-design.jpg",    
    "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlTeoVFZWCZSPEHg4Xqv5qQEw37WT9SFrgXArD3zp4E_kJ7CYfnPLSTAHcSr8GbZEBUVxxWH-1kDunLakFIXmLk8ddd5ofVRDb_7QnJM8YmhSdWpw-E3MinoVl0xb4HhQZCau_3c94iw/s1600/3D-Background-Ball-Free-Download.jpg",
    "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL2n7obB-XHfUwzw7lQc1nuPReYUWggc2M8-qrqCLR8NAhZazhlCgS3IAjOnElO7pec9f-yMDE6eB4Qcl9d3cG_ifDeKBm2JH8nuIbrdNZNXajSz-XphqDpH_tOGpshCG3y19HcxP-_w/s1600/Snow_leopards.jpg",
    "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh7rcaipcKJC2ADB_Y89BEIkkOGnsKN9F7wWnouG6PmW4QyG1bnfVe8Ap9K3blQqS5kbraTzC7GtHNaOYQjfdE4E0u1t5yedXstW5Sbc3ad9kj3GzCiEt9c5bluscDddGeXh2RlXPmPg/s1600/3d-hd-wallpaper-ja-amazing-wallpaper+%281%29.jpg",
    "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivUQsbRnnusyAn4cjCq9g1EAeTWImlLFTQhKppmsSSLO0LNo0Mf_RC6njPMjRQP7YjyHRXbNRveT_-l1IESoi0TQmA4a6CQjx0mXcNbqimvlSWCv5f1eR369zv19SF08eRAgd-rX5-_Q/s1600/3d-desktop-backgrounds.jpg",
    "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd_nXSwKeJr-NL6AAn2tk6hQOHU3xVBtS7m_4oIq0Fi5gL0xBz9AGo89IyTn9jkHTw5GnHFJv-BhMg-kcku-iloCjUT7XQopujyKAGi8OJdS-9L07RSlro7EUlwb0bBBr_Ir0aIkYimA/s1600/3D_desktop_wallpaper.jpg", 
    "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLi13-eC2faCTeoRq7_BrvQYJGn9J8x0qTEjIcJRbBil3XELLXNrJgDxTogniJomJhMT-3kreC0aOr6RvH5Gh002D19KB7KyVBmWSekDRm8tkaSmLsfgwyY6gzrNDg89DBp5Lvfp1uGbo/s1600/China_Country_4+%28wallpapersbay.blogspot.com%29.jpg",
    "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCe8_9jIQ0o7NcT3qaKUpqzqxo7X9fnYxstW-zQ5ydLdMSvZ3kLMJScvMq7njA7aYqC2b_ebtYnxyRxuKQDhWwTpaFvnGM5iRtIOjhtc4T9imQAFYlFkeiO_x015yOX5LI5vxOQUvzVsE/s1600/Rainbow_Wallpapers_(1)+%28wallpapersbay.blogspot.com%29.jpg",
    "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI_OzijNHLszHS0lnuRPfecaiDKQr3hTazbt_SMq86_yc4fRE2fbD5JZf-HJ8BCI-OFsQmw4oEMqqHlj-Cr65BIeKJ5RtdU6iS5qnVwKPxYVncE4RkbilQ8q3V27Z66F6lWlvHmc26WO4/s1600/Creative-Digital-Animal-Wallpapers-24+%28wallpapersbay.blogspot.com%29.jpg", 
 "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhny7ihEFWdj3LG_PYJzZf958ShEcD727A5_3avXEIm8GDHInwXyRCRENlRTng0NoTtevTYJKWRPABkZSWZlQzY7kigavSYM6JFlfF4StYYBB_yax3oGCXX13CtuBWjA3rR_ocHX0v-CNE/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>

Terima kasih telah membaca artikel tentang Cara membuat background slide show di blog blog sepot jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini diwebbroswer anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.

blog sepot

Cara membuat background slide show

Artikel terbaru :

Artikel Terpopuler

Label