Memasang Lazy Load Effect pada blog


Cara memasang javascript lazy load gambar untuk blog blogger - Effect ini bisa membuat gambar mempunyai delay jika blog di akses melalui computer atau bahkan bisa juga lewat smartphone.Sisi baik dari memasang lazy load ,sering di kaitkan dengan cara agar gambar pada blog lebih mudah untuk di load dan bisa mempercepat loading sebuah blog.Kenyataan ini bisa kamu coba sendiri pada blogmu.Kamu bisa membuktikan nya sendiri dengan memasang effect lazy load ini kedalam template blog.

Karena dengan memasang effect lazyload ini,Mungkin bisa juga mempegaruhi iklan google adsense yang akan tampil dalam sebuah blog.Jika selama ini kamu menemukan sebuah blog dengan gambar yang mempuyai jeda saat tampil,kemungkinan blog tersebut memasang sebuah kode java script lazy load pada templatenya.

Jika kamu ingin tahu kode jsnya,kamu bisa menemukannya di sini dan juga cara untuk memasangnya ke dalam template bloggermu.Berikut ini adalah cara untuk memasang Effect Lazy load gambar untuk blog blogger,Simak cara pasang dan dapatkan kodenya disini.

Cara memasang lazyload untuk blog
Kamu perlu mengetahui kalau effect ini sebebnarnya hany membuat gambar mempunyai tenggang waktu jika di buka atau postingan bergambar blog di akses melalui dekstop maupun smartphone.Dan ini bisa di kategorikan ke dalam bagian modding tampilan blog.Dan ini cara memasangnya di dalam blog.

- pertama silahkan buka dasbhord blogger.
- Klik tema
- Pilih edit Html
- Tekan ctrl f dan ketikan tag </body> dan enter.
- Kemduian pastekan kode lazy load ini tepat di atas tag </body> tadi

<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:"http://1.bp.blogspot.com/-Qg5bi1ZtDdM/VZ5nHAyYBqI/AAAAAAAAChE/exGnasO4oyk/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})});//]]></script>

- Jika sudah ,klik simpan teme dan lihat effectnya di dalam blogmu.
- selamat mencoba dan semoga berhasil


Itulah sebuah kode untuk memasang effect lazy load agar blog mempuyai delay gambar,yang mungkin ingin kamu pasangkan ke dalam template blogmu.Cara di atas cukup sederhana dan cukup simpel.Terim kasih telahberkunjung ,semoga artikel ini bermanfaat dan mohon maaf bila ada kesilapan dalam penulisan penyajian artikel kali ini.sumber kode Cara memasang effect lazy load pada blog

Author

Blogger Awam Blogger Awam Fiksioner is a free template that suitable for personal blogging because the layout is like a journal.

Post a Comment