Membuat Background Efek Slide di Blogspot
Baiklah sobat pada kesempatan ini seocips.com akan membagikan tutorial bagaimana cara membuat background efek slide show di Blogspot. Mungkin saja kamu sudah bosan dengan latar belakang atau background Blog kamu, kamu bisa membuatnya lebih menarik dengan cara ini.

Kamu bisa menambahkan efek slide show jika kamu ingin gambar background blog kamu berubah-ubah. Dengan menambahkan efek slideshow pada gambar Background maka gambar background ini akan berganti-ganti secara otomatis setiap waktu yang telah ditentukan.

Berbicara soal background mungkin saja kamu tertarik untuk mencoba cara membuat sticky/fixed background. Berbicara soal slide effect, sebelumnya juga sudah dibagikan tentang cara membuat artikel rekomendasi terkait efek slide di blog. Ok, berikut adalah cara membuat Background Efek Slide Show.

Background Efek Slide Show

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 seperti ini:
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 Backround Slide Show di bawah 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> 
Silahkan kamu ganti link-link gambar diatas dengan link gambar background yang ingin kamu gunakan.


Membuat efek slide show pada background blog ternyata cukup menarik, tapi dengan penambahan efek ini di blog sobat tentusaja akan semakin memberatkan loading blog sobat. Ok sobat sekian dan semoga bermanfaat.
2 Komentar untuk "Cara Membuat Background Efek Slide di Blogspot"

Ane juga kadang bingung bos..hehehe