Cara Membuat Gambar Background Berganti-ganti di Blogger
Sebelumnya saya sudah membagikan cara membuat warna background blog berubah-ubah, nah pada kesempatan ini saya akan membagikan cara membuat gambar background blog berubah-ubah atau berganti-ganti. Background blog yang berubah-ubah bisa menarik perhatian pengunjung, tentunya bisa digunakan untuk menunjang tampilan blog jika digunakan pada blog yang tepat.

Membuat Gambar Background Blog Barganti-ganti

1. Masuk di Blog kamu di Blogger
2. Pilih Template kemudian Edit HTML
Cara Membuat Background Gambar Blog Berubah-ubah

3. Background ini harus di load dengan JQuery, 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>
4. 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%; }
5. Jika sudah terpasang juga, kita harus menambah JavaScript Backround Slide Show di bawah ini (bisa di letakan di atas </head> atau </body>):
<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> 
6. Kamu dapat ganti link-link gambar diatas dengan link gambar background yang ingin kamu gunakan.


Sekian cara membuat gambar background berganti-ganti di Blogger. Semoga bermanfaat.
0 Komentar untuk "Cara Membuat Gambar Background Berganti-ganti di Blogger"