Gudang Tutorial Blog

Agar kelihatan atraktif para sobat blogger pasti tertarik dengan efek slide pada background.
Background tidak statis itu-itu saja tapi berganti gambar lain.

Jika sobat ingin mengetahui Cara Membuat Background Slideshow pada Blog simak yang berikut:

1. Siapkan 3 sampe 5 url wallpaper/background seukuran desktop
2. Load background dengan jquery dengan cara, letakkan kode berikut 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>

3. Ubah css body minimal menjadi,

body {

background: black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYt3gvrmkGwEFFpzssPWYVA8kwxzJk5ZclYt91ZSlFEBbher2IAjuUxv3m2Z0Ll-ZTPEgQHXeEKVOGGkTF5rMVYHmkuWeAvll7wC2Sk_6WtsAwKICEqeteBC8znoZefLm8K3CWKSbL6mI/s1600/eagle.jpg)
repeat-x fixed top
center;
-moz-background-size:100%;
-webkit-background-size:100%;
-o-background-size:100%;
background-size:100%;
}

3. Letakkan script berikut pada elemen layout "html/javascript"

<script type='text/javascript'>
var ssBG={
gbr:[
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwKX3FTEbLyFYLaU3oprAbyOTZPSLMnTPuRPpNKFfgSYFeRdE_YGgTMAK_ljfTwCm30oeAZq8vBgufRWywCcbq__LBAw1GcmkQA8K95aS4Q7Aa0cZY1jmgDKFivGF_q6PJS6L9Ls1dpP8/s1600/eagle1.jpg"

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEXMy8EGy2AWlBOOC9fNtDUR-90A2nCf-UUSgaBBjidB3HL9Wd-VPjRkNOtPV2RNYgj4BizFSLocdnLsc-dhV2_tv_S2Fly2NKQC8YEzV-u6mITosTdZx_xUpWqXbB-Nfbn2GaYpLFN_M/s1600/eagle2.jpg",

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTrmpS_j66ASs1P33Bz74CfzSvUPjzat9hHXKQsI55tLk9D2Yzffe4AlzKIgtMf7xvMVfnMKJBwzuutAOjZMDtQk1UWcwS1KxlLmzRSsazTptqnzyRxYvPtPG2GB0IsVneEXreO59G7GA/s1600/eagle3.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>

4. Langkah terakhir save dan lihat hasilnya.

Tambahan: agar background blog terlihat tidak kabur, pasanglah background
seukuran wallpaper desktop.