Thủ thuật tạo Lazy Load mới nhất cho blogspot !

Xin chào các bạn. Hôm nay mình muốn giới thiệu tới các bạn thủ thuật làm thế nào để tạo hiệu ứng Lazy Load cho blogspot. Nếu blogspot của bạn quá "cồng kềnh" với trang chủ hay trong mỗi bài viết thì thủ thuật này sẽ cứu được blog của bạn trong mắt khách hàng và các công cụ tìm kiếm đấy. Ngay bây giờ hãy cùng Viblogging tạo hiệu ứng Lazy Load cho blog của bạn nhé. Cũng khá đơn giản thôi !

1. Hãy vào Blogger.com → Blog của bạn → Teamplate → Edit HTML rồi copy và dán đoạn code bên dưới của mình vào trước thẻ

Jquery<script type='text/javascript'>
//<![CDATA[
// Lazy Load
(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaC1po8XhID8rdwEEOu7OAezMokcwGJeL06lZUJ64bWdpoQ0UzMna1zfxUkEf3e3MptjyTL3Zabk7zlw3f2MFruNyL3oyQUT2IGa9cWsGOTMArEGH632mCP_IR3VQzKy9TdYIh9EsBhvNl/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>

2. Bước cuối cùng là lưu lại và tận hưởng thành quả của bạn vừa làm.

Hãy để lại comment nếu như bạn có bất kỳ khó khăn hay thắc mắc nào khi làm thủ thuật này với blog của bạn nhé. Nếu bạn thấy các bài viết trên Viblogging hay và có giá trị bạn hãy like và subcribe email để nhận tin tức mới nhất từ Viblogging nha bạn. Cảm ơn các bạn rất nhiều !