Pada kesempatan ini saya akan membagikan cara membuat gambar background blog berubah-ubah atau berganti-ganti secara otomatis.

Gambar Background blog yang berubah-ubah bisa membuat tampilan blog semakin menarik, menarik untukmu walupun belum tentu menarik bagi pengunjung, karena tentu saja, yang paling penting bagi pengunjung adalah dia bisa mendapatkan info sesuai yang dia cari. Tapi, yah gitulah gan, buat tampilan lebih menarik aja, biar kreatif gitu..wkwwkw..ok berikut..

Cara Membuat Gambar Background Otomatis Berganti-ganti di Blogger


Cara Membuat Gambar Background Otomatis Berganti-ganti di Blogger
Cara Membuat Gambar Background Otomatis Berganti-ganti di Blogger


1. Di Blog Blogger 😊
2. Pilih menu Template ➔ Edit HTML
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 Blog Berganti Secara Otomatis"