Cara Memasang Dan Memakai Lazy Load Di Blog - Brosense Cara Memasang Dan Memakai Lazy Load Di Blog | Brosense

Cara Memasang Dan Memakai Lazy Load Di Blog

Cara Memasang dan Menggunakan Lazy Load di Blog- Salah satu impian semua blogger yaitu mempercepat loading pada blog yang dimilikinya, terutama dengan blog yang mempunyai gambar dengan ukuran besar dan kualitas tinggi.

Cara Memasang dan Menggunakan Lazy Load di Blog Cara Memasang dan Menggunakan Lazy Load di Blog
Ukuran gambar yang mempunyai kualitas pixel yang tinggi memang sangat elok untuk tampilan blog, namun pada blogspot hal tersebut sanggup mensugesti kecepatan loding pada blog terutama blog yang menngunakan banyak gambar dan script.

Terkadang dengan loading yang lambat, selain mengesalkan juga sanggup menciptakan lari atau kabur pembaca blog anda sebab malas untuk menunggu loading pada blog tersebut.

Salah satu cara yang sanggup mempercepat loading pada blog yaitu dengan memasang sebuah isyarat Script yang di letakkan pada template blog tersebut dengan cara edit HTML.

Manfaat dari Lazy Load pada blog yaitu untuk mendahulukan tampilnya konten dahulu dan menampilkan gambar secara perlahan dan belakangan, jadi blog akan terasa cepat dalam melaksanakan loading, dan menutup gambar sementara sebelum terlihat oleh pembaca.

Telah terbukti dengan memasang Lazy Load sanggup meningkatkan kecepatan pada loading blog secara baik dan dalam hal Seo kecepatan blog ialah salah satu syarat supaya konten kita di sukai oleh mesin pencari.

Selain itu blog yang mempunyai loading yang cepat juga sangat disukai oleh pembaca dan menerima peringkat atau rangking yang baik di mata google atau search engine.

Lalu bagai mana cara memasang Lazy Load pada blog ? Berikut Cara Memasang dan Menggunakan Lazy Load di Blog .

1. Buka Blogger anda, Kemudian >> Template >> Edit HTML

2. Lalu Cari Kode </body> Untuk mempermudah gunakan CTRL+F dalam pencarian di Edit HTML

3. Setelah ketemu Kode </body> letakkan isyarat berikut ini sempurna di atas isyarat </body> 

Kode script
 <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/AVvXsEia3otajGGfOmYneFOtyeTLs7GPnqmIxGVy3D5swnXi1HrEQl3Go_JOY7wlICwIsaYP8KjPupEMh2Naq6E5l2SghWZiNG-qmm_cesrB5B27eH_cdZ9TzjNzZGHKbDmr7Yx9L0KQpyV6APfc/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})}); //]]> </script>

4. Simpan Template
Setelah simpan template silahkan anda coba buka beranda blog anda, apakah berfungsi atau tidak script nya. aku coba sih berfungsi dengan baik.

Demikianlah artikel dikala ini tentang Cara Memasang dan Menggunakan Lazy Load di Blog , biar membantu dan juga bermanfaat.

Related Posts