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/AVvXsEiU01DgUChuCPbfP_pS2uu3W1JJ_A9iHJjbGsEnaTS9sY3D8yLvqZ1xATIB9EdOVtfHJq-y9GkTm2rTQC8xON55NCDwerrl2mi37PD19kSDBIpvPONMHwl2lgYUNzaSm1EZCol2NtzwFg/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/AVvXsEisIqpZY4ZOnbxgIZtaWKeSBaXtoalOc3F1G78wBY2cSwknI6JJuAtp38o1BhC7rNwvOzx82qIXUElVH0i44prXKu-JoC7ixlPHbL4OxDT-YyBMItMps0FaKEzhQ99tkPlKJNH7dzhoXA/s1600/3d-desktop-background-hd-of-art-and-design.jpg", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBN-oWFiXinIZnEDJojjAFlRJ6f4txjdh5k2g2ZqOC6VtZfG74-OR49I2yKeh5p89LMMf-vIxwBZd6YqY7PAVSt0vkkxKTdZzGTCL-wv28KvAFQho7dbBMlb6QCZ7OYErEG2Ec9puGWA/s1600/3D-Background-Ball-Free-Download.jpg", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_MIFXl2DRenxF6v11Y9-hR8F_8dZwcdBJEGWKrTl72Ky8IHaL3yT3uZYH0R670BSCdXPbzrLnwkbxGCUNbzKSuKe-PlWg1bQeRsa6sxNy1qE42esYq_5R2dbabwlshhcYk8EhzGqcwQ/s1600/Snow_leopards.jpg", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR-xwcb9Us6DraZ62sQmE-VneqJ0KuKHJTeyCWiLzROHhLl8ljxRrgRlb4ApgeMis92clp5Qhhu7AC4miPm7Luu2NsOrByOfGZV5CsEQHoFz67pP1ZLH-2TslIA3WOtPtLH7WWQysiNA/s1600/3d-hd-wallpaper-ja-amazing-wallpaper+%281%29.jpg", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzYJIJ7QF7q5jlnCszlLZvk11sgB5htvqQmqcJaFunExcHhXQPq54iMzE-Iv5ZlggR4eubTt1QRRtvPCaXA8sl1Uwv-BLUJtVzTMkesEAo3C4IDvK7vBz5EJptgBBHAPPQZP8NBowyug/s1600/3d-desktop-backgrounds.jpg", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjafQmz-KqW8_8HdzJGdu0BlT-cJKFzyL4mzT6c2a7s0gqhBZgO4DnRJd2ss5QzTPle9tKDVhFsFjUCcDFyyv-e-Uqrtli-WccrJ5Oxw1_ZVgWUji9xCQORPR7R2OIOkRN8CsZM9D13vg/s1600/3D_desktop_wallpaper.jpg", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbfPWIgYO1ANAZVxOdUaKapLm1KYv5Bq1JnNIjy5U1IYqjqDG97uWWuH2mvyJEZPx3d_huSSxcsBwDXGtDCGQA0cUovDgdxHhVWTqRV_wBeYZD4B2xjSqVP8XoXypOBzr4y1SsOexceCk/s1600/China_Country_4+%28wallpapersbay.blogspot.com%29.jpg", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7vperop81UyFKSgF-lw5AaHMZ7P649BOU-92D25eax-FQzkoLcOQC-eivnTQNI-GJA_ACIJrIJ6lTxdm_Nb2mXULFmknEzgVbloS9S_bsHMkZqC516O1jdq2r_c-a_vfRU_79wWKAg_Y/s1600/Rainbow_Wallpapers_(1)+%28wallpapersbay.blogspot.com%29.jpg", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL1Qaf8ks9-zZ_5VzaFYEhc6ALI7FPMZ5HWpktBne7hLuo6GnZz_S3zJXfpWtjE3MIno_3qAN1fhll74m0gkfCJ6tj1ADPAp-aoGE0-JFM0E9ZvwVvqcp_9N3hwzUxMm2c70q2OH-qKSI/s1600/Creative-Digital-Animal-Wallpapers-24+%28wallpapersbay.blogspot.com%29.jpg", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhklqmXgoqCqhY-B1qtTwdaKp-FX21jvnUe1VXseftQdeNHUuKF6R_pEoeomvCVHp-z79XzqZCAs4a9LwGSxVf9XtkEdVnEW3cBgHjWlIdNa-pYiHsfmTIfsQUuKY7dND733J2QOLN_wJk/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>
jika bisa tinggalkan komentar atau ada pertanyakan silahkan ajukan utamakan bicara terimakasih
keren sekali tutorialnya boleh dicoba juga untuk memperkaya tampilan background nya
ReplyDeletesilahkan di coba untuk membuat seo blog agan
ReplyDelete