Tự động thay đổi ảnh nền cho blogspot bằng Javascript

Trong bài viết này mình sẽ hướng dẫn các bạn có thể dễ dàng thay thế tự động ảnh nền blog của bạn, thay vì một ảnh cố định, hay là một màu sắc cố định, thủ thuật nhỏ sau đây sẽ giúp blog của bạn trở nên sinh động, bắt mắt hơn đối với người đọc, thay đổi mới. 

Trước khi tiến hành bạn có thể XEM DEMO để hiểu rõ hơn.

Thủ thuật này chúng ta sử dụng Javascript là chính, sẽ có một chút ảnh hưởng tới tốc độ của bạn, tuy nhiên vì đẹp có thể bỏ qua vấn đề này 😅

Bắt đầu tiến hành:

Bạn đăng nhập vào Blogspot -> Chủ đề -> Chỉnh sửa HTML
- Tại đây bạn sử dụng tổ hợp phím: Ctrl + F và gõ </body> sau đó copy toàn bộ code phía dưới và dán trên thẻ vừa tìm.

<script type='text/javascript'>
//<![CDATA[
(function($){
 $(document).ready( function(){
  // Add background slideshow
  $.backstretch([
            'http://i.imgur.com/eg2YHZu.jpg',
   'http://i.imgur.com/fPCq6hE.jpg',
            'http://i.imgur.com/eFud9Vs.jpg'
  ], {
   fade: 750,
   duration: 6000
  });
 });
 
})(jQuery);

//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
/*
 * Backstretch
 * http://srobbin.com/jquery-plugins/backstretch/
 *
 * Copyright (c) 2012 Scott Robbin
 * Licensed under the MIT license.
 */
(function(e,t,n){"use strict";e.fn.backstretch=function(r,s){if(r===n||r.length===0){e.error("No images were supplied for Backstretch")}if(e(t).scrollTop()===0){t.scrollTo(0,0)}return this.each(function(){var t=e(this),n=t.data("backstretch");if(n){s=e.extend(n.options,s);n.destroy(true)}n=new i(this,r,s);t.data("backstretch",n)})};e.backstretch=function(t,n){return e("body").backstretch(t,n).data("backstretch")};e.expr[":"].backstretch=function(t){return e(t).data("backstretch")!==n};e.fn.backstretch.defaults={centeredX:true,centeredY:true,duration:5e3,fade:0};var r={wrap:{left:0,top:0,overflow:"hidden",margin:0,padding:0,height:"100%",width:"100%",zIndex:-999999},img:{position:"absolute",display:"none",margin:0,padding:0,border:"none",width:"auto",height:"auto",maxWidth:"none",zIndex:-999999}};var i=function(n,i,o){this.options=e.extend({},e.fn.backstretch.defaults,o||{});this.images=e.isArray(i)?i:[i];e.each(this.images,function(){e("<img />")[0].src=this});this.isBody=n===document.body;this.$container=e(n);this.$root=this.isBody?s?e(t):e(document):this.$container;var u=this.$container.children(".backstretch").first();this.$wrap=u.length?u:e('<div class="backstretch"></div>').css(r.wrap).appendTo(this.$container);if(!this.isBody){var a=this.$container.css("position"),f=this.$container.css("zIndex");this.$container.css({position:a==="static"?"relative":a,zIndex:f==="auto"?0:f,background:"none"});this.$wrap.css({zIndex:-999998})}this.$wrap.css({position:this.isBody&&s?"fixed":"absolute"});this.index=0;this.show(this.index);e(t).on("resize.backstretch",e.proxy(this.resize,this)).on("orientationchange.backstretch",e.proxy(function(){if(this.isBody&&t.pageYOffset===0){t.scrollTo(0,1);this.resize()}},this))};i.prototype={resize:function(){try{var e={left:0,top:0},n=this.isBody?this.$root.width():this.$root.innerWidth(),r=n,i=this.isBody?t.innerHeight?t.innerHeight:this.$root.height():this.$root.innerHeight(),s=r/this.$img.data("ratio"),o;if(s>=i){o=(s-i)/2;if(this.options.centeredY){e.top="-"+o+"px"}}else{s=i;r=s*this.$img.data("ratio");o=(r-n)/2;if(this.options.centeredX){e.left="-"+o+"px"}}this.$wrap.css({width:n,height:i}).find("img:not(.deleteable)").css({width:r,height:s}).css(e)}catch(u){}return this},show:function(t){if(Math.abs(t)>this.images.length-1){return}else{this.index=t}var n=this,i=n.$wrap.find("img").addClass("deleteable"),s=e.Event("backstretch.show",{relatedTarget:n.$container[0]});clearInterval(n.interval);n.$img=e("<img />").css(r.img).bind("load",function(t){var r=this.width||e(t.target).width(),o=this.height||e(t.target).height();e(this).data("ratio",r/o);e(this).fadeIn(n.options.speed||n.options.fade,function(){i.remove();if(!n.paused){n.cycle()}n.$container.trigger(s,n)});n.resize()}).appendTo(n.$wrap);n.$img.attr("src",n.images[t]);return n},next:function(){return this.show(this.index<this.images.length-1?this.index+1:0)},prev:function(){return this.show(this.index===0?this.images.length-1:this.index-1)},pause:function(){this.paused=true;return this},resume:function(){this.paused=false;this.next();return this},cycle:function(){if(this.images.length>1){clearInterval(this.interval);this.interval=setInterval(e.proxy(function(){if(!this.paused){this.next()}},this),this.options.duration)}return this},destroy:function(n){e(t).off("resize.backstretch orientationchange.backstretch");clearInterval(this.interval);if(!n){this.$wrap.remove()}this.$container.removeData("backstretch")}};var s=function(){var e=navigator.userAgent,n=navigator.platform,r=e.match(/AppleWebKit\/([0-9]+)/),i=!!r&&r[1],s=e.match(/Fennec\/([0-9]+)/),o=!!s&&s[1],u=e.match(/Opera Mobi\/([0-9]+)/),a=!!u&&u[1],f=e.match(/MSIE ([0-9]+)/),l=!!f&&f[1];return!((n.indexOf("iPhone")>-1||n.indexOf("iPad")>-1||n.indexOf("iPod")>-1)&&i&&i<534||t.operamini&&{}.toString.call(t.operamini)==="[object OperaMini]"||u&&a<7458||e.indexOf("Android")>-1&&i&&i<533||o&&o<6||"palmGetResource"in t&&i&&i<534||e.indexOf("MeeGo")>-1&&e.indexOf("NokiaBrowser/8.5.0")>-1||l&&l<=6)}()})(jQuery,window)
//]]>
</script>

Chỉnh sửa:

Bạn thay toàn các đoạn màu đỏ thành link ảnh nền.
(Lưu ý: Sử dụng ảnh có độ phân giải cao để ảnh không bị nhoè khi xem trên nhiều thiết bị khác nhau)

Thêm ảnh nền:

Nếu bạn muốn nhiều hơn 3 ảnh so với code mình chia sẻ bạn có thể thêm bằng cách sử dụng code dưới đây. thay thế cho đoạn lấy ảnh phía trên

<script type="text/javascript">
//<![CDATA[
(function($){
 $(document).ready( function(){
  // Add background slideshow
  $.backstretch([
            'http://i.imgur.com/eg2YHZu.jpg',
            'http://i.imgur.com/fPCq6hE.jpg',
            'http://i.imgur.com/eFud9Vs.jpg'
            'http://i.imgur.com/eFud9Vs.jpg'
            'http://i.imgur.com/eFud9Vs.jpg'
  ], {
   fade: 750,
   duration: 6000
  });
 });
 
})(jQuery);

//]]>
</script>

Thêm bao nhiêu ảnh cũng được nhé!!!
Cuối cùng lưu mẫu lại và xem thành quả. Chúc bạn thành công với thủ thuật nhỏ này, nếu thấy có ích hãy chia sẻ tới bạn bè cùng thực hiện.

Download Here

Live Demo

Download

huhu