Like Page để cập nhật tin mới ngay trên facebook nhé

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.
Tự động thay đổi ảnh nền cho blogspot bằng Javascript
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.

5 nhận xét:

  1. Không dùng nhưng hay. Thanks man :v

    Trả lờiXóa
    Trả lời
    1. Bỏ câu man đi :D Kiểu chơi khác người ý mà. Họ hay dùng CSS cho nhẹ đây chơi JS đổi kiểu

      Xóa
  2. Sử dụng cái này vào trình duyệt nó ngốn ram kinh lắm... ai sử dụng rồi sẽ hiểu rõ.

    Trả lờiXóa
  3. I search many blog about the How to Use Fennex App but did not get many specific detail about the this topic but your blog have allot of information about my topic which I always searching.
    How to Use Fennex App

    Trả lờiXóa

- Bình luận của bạn sẽ được kiểm duyệt trước khi xuất bản

- Những bình luận mang tính xây dựng đóng góp bài viết mới được duyệt

- Vui lòng KHÔNG bình luận thô tục, không dấu, chèn các liên kết bên ngoài, bình luận không liên quan hoặc quá ngắn

- Hãy là con người văn minh từ những câu nói