Membuat Background Efek Slide di Blogspot
Baiklah sobat pada kesempatan ini seocips.com akan membagikan tutorial bagaimana cara membuat background slide show di blogspot. Jadi untuk anda yang bosan dengan tampilan Background template yang itu-itu saja maka anda dapat mencoba ini. Background Slide Show adalah gambar latar belakang yang bisa berganti-ganti secara otomatis setiap waktu yang telah ditentukan.

Berbicara soal background mungkin saja sobat dapat membaca artikel tentang cara membuat sticky background yang dimana walaupun halaman di scroll kebawah gambar backgroundnya tetap menempel tidak ikut ter scroll. Juga tentang cara membuat efek gelembung berwarna di blog.  Ok berikut adalah cara membuat Background Efek Slide Show di Blogspot.

 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 harus ada 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> 
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.
0 Komentar untuk "Cara Membuat Background Efek Slide di Blogspot"