Cara Memasang Lazy Load di Blogger

Lazy load merupakan salah satu trik optimasi yang berfungsi mempercepat loading blog dengan cara menunda pemuatan objek sampai pengunjung melakukan scroll kedalam konten yang dituju. Efek memasang kode lazy load dapat kalian lihat langsung pada blog ini, kalian pasti akan menemukan animasi titik hitam biru berputar sesaat setelah melakukan scrolling, nah itulah tampilan visual memasang kode lazy load pada blog. Namun untuk saat ini tampilan animasi lazy load pada blog ini hanya dapat dilihat pada mode desktop.

Selain berfungsi mempercepat loading, kode lazy load juga bisa dapat digunakan untuk mempercantik tampilan blog, sehingga blog kalian terlihat lebih profesional dan menarik. Tentu dengan semakin cepatnya loading blog akan membuat visitor betah dan bepotensi meningkatkan posisi blog dimata mesin pencari.

Cara Memasang kode lazy load di platform blogger

• Silakan login ke blogger.
• Kemudian pilih Tema → Edit HTML.
• Selanjutnya cari kode </body>  gunakan Ctrl+f  untuk mempermudah pencarian.
• Setelah itu copy dan pastekan kode dibawah ini tepat diatas kode </body>.

<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(){$(".post img").lazyload({placeholder:"https://3.bp.blogspot.com/-JlJLzxankMY/XH6UGSx3O1I/AAAAAAAACS8/SzjSHZTyWZwYVZ6ri5gT6FhA9oUuRf9VwCLcBGAs/s1600/loading-double-ring.gif",effect:"fadeIn",threshold:"0",effectTime:"2000"})});
//]]>
</script>

• Selesai, silakan klik simpan.

Silakan ganti efek animasi loadingnya sesuai selera kalian dengan cara ganti url yang ditandai warna biru dengan url gambar berformat gif. Demikian tutorial singkat Cara pasang kode lazy load di blog, semoga tutorial ini dapat menambah wawasan kalian tentang dunia blogging.