Cara membuat Background efek slide di blogspot Kreatif

Cara membuat Background efek slide di blogspot Kreatif

oke sobat kali ini berbagi tutorial bagaimana cara membuat background efek slide show di blog atau di Blogger :D mungkin saja kamu sudah bosan dengan latar belakan kamu yang begitu begitu saja kali ini kamu dapat membuatnya akan lebih menarik lagi

kamu bisa menambahkan efek slide show jika kamu ingin gambar bacground kamu berubah rubah. Dengan menambahkan efek slide show blog kamu akan bisa berganti Bacgroundnya secara otomatis

oke langsung saja yuk.....perhatikan jangan cuman nyimak :D

1.Background efek slide show

Background slide show yang pertama - tama harus di load dengan jquery yang biasanya di pasang di </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>i.

setelah itu dibagian css body minimal seperti ini

body {    background: black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-yRwp9LFYEeMIlgqLDLOc6qri2Whmb3DXPwvFg9hreqJGUigGnT1hZXvefjimLEEImgNYcRYFsXZ9QvKeL4GKbPBlbzVBrqKbRWqnWPTZRZ0FE88MkIUio2ezWbt4G9ni4O1QnwrGTw/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 menambahkan java script background slide show di bawah ini :

<script type='text/javascript'> var ssBG={ gbr:[ "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXfB2tL5YAFKVeNe05YXQtJk-SLSTJol-Go4EMZWAHRl6Qb8Wt2c-zqR5CX81Xwm7fQwDNonsXpiZtoOMNgdU7-nAvy4zS56cN8VASjKimEw_051uaY4tu6Jk5o2YaRMRWbaWWyYiTfA/s1600/3d-desktop-background-hd-of-art-and-design.jpg",  "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwYCjCRni9onRS50Eg1XbdhyEsIwWWQzkZ_dpsexAU_f57B9ps0fLzzl4Bmo6u-M5iZ79iKb7klfIL2Ih8uGI39aCUJnZELyH7YWMn1zOvNS8Z4BUo_nV5WpkbFhVANEopzV0kp3d_Fg/s1600/3D-Background-Ball-Free-Download.jpg", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5dTkjzNRa5ermbO6pisxwF_oyXtOaDNgQZ2b_pZkKbPRTcfKb0xEfpPwHAN979RRE8f40YoyHYWL3KdwWk_xTKI3WcR5_UySM-CbsAL4oPAw-E-BQ3eksQgo5TUVD2CCgPPcVGwejdw/s1600/Snow_leopards.jpg", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn48q4Py_B-dpzj1RAW3DugyH6msltcFs06j44HYWh_CGfrz6n0lXn6_IknFcgY0GoQ3oE-Nd30zFF-YZZ1cEUqpPILwFHLd-XRhQtiL6FBGgRB_yTC7IlI3I7LvW600l13XxCYCueDg/s1600/3d-hd-wallpaper-ja-amazing-wallpaper+%281%29.jpg", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6XtezohkgB_UdYMUsIH3mY_8pU05QvBukj_e1_qDC4covjT3k1pO6OL3hIDrk_UHTb1nmmWbKAsFA9Wi6z9U2o9ZsNS29dJJDvfZLfvflMZ_i53sbG4lyfiqUf4Wv4-VnB8h5yP6VBw/s1600/3d-desktop-backgrounds.jpg", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHB4sYNs39wYgaJY-abCJnCmHQk6Ht1uDPdkwYfjsoyiVRbP93aiIKaO6fcqzqhfC76hVzE1UW28KkadkD8tBp12Zt_sLb027G6rFmE71VN9gDR29jGQQfo486j2c1hjm_bJYxLHXpcw/s1600/3D_desktop_wallpaper.jpg",  "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX3fLd1_kTTYCJk_NIRZRJjFpUJB0aKTvqCHpNh_5pB-LcZ98mMkxHPjZR2J1w7soYPg1uZ2q7xsi4CNdfnSX72bF59HNbRlUKhtxCCxhc-aXCkJi-7ZsKC7KdsPu95420ZJtyE6FbxUk/s1600/China_Country_4+%28wallpapersbay.blogspot.com%29.jpg", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJcKhPHI2IgQKEHMLFaFEld-YYb2_G1H_S_h6n7SGDYvps7ONMF1EN9cf6mlSkke3CPKqZr10jrZnNHEuTdS-uJ_fDceZr1WtCCVpog6aFG_PUTCg89hOXOmDllGJBRjRMgfo_stZCtzc/s1600/Rainbow_Wallpapers_(1)+%28wallpapersbay.blogspot.com%29.jpg", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXtkh5eyK2JQLRwf5lJnPtD2-A9MtLPLu2CwrY-jLx1TpmeLDR4hqRpfABQChkORYVIvhla9_3Hdy2aAqIaP4Fm5TrlyFMHqeyorYNLAsnf-z3WzBQFo0t2N_jmwardEhS07dpR9AHD1k/s1600/Creative-Digital-Animal-Wallpapers-24+%28wallpapersbay.blogspot.com%29.jpg",  "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG2A4SbEQPDc7Wb3ldovrrUzQX5yepxo9gOyrBz3xlXs30Y9ql2ADK80UlRyURkura1DreRVU63NPgqbXMlAr_CwcQgoM6h3fOokiiWtKStyqqhjypEd6HNOr1uZPNkjkyseQu29-KB8Q/s1600/Thunder_Storm_Wallpapers_(37)+%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> 

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: