Cara Memasang dan Menggunakan Lazy Load di Blog
Cara Memasang dan Menggunakan Lazy Load di Blog

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

Cara Memasang dan menggunakan Lazy Load di Blog
Ukuran gambar yang memiliki kualitas pixel yang tinggi memang sangat bagus untuk tampilan blog, namun pada blogspot hal tersebut dapat mempengaruhi kecepatan loding pada blog terutama blog yang menngunakan banyak gambar dan script.

Terkadang dengan loading yang lambat, selain mengesalkan juga dapat membuat lari atau kabur pembaca blog anda karena malas untuk menunggu loading pada blog tersebut.

Salah satu cara yang dapat mempercepat loading pada blog yaitu dengan memasang sebuah kode 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 melakukan loading, dan menutup gambar sementara sebelum terlihat oleh pembaca.

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

Selain itu blog yang memiliki loading yang cepat juga sangat disukai oleh pembaca dan mendapat 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 kode berikut ini tepat di atas kode </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:"http://1.bp.blogspot.com/-Qg5bi1ZtDdM/VZ5nHAyYBqI/AAAAAAAAChE/exGnasO4oyk/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. saya coba sih berfungsi dengan baik.

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

Loading...

Berlangganan update artikel terbaru via email:

0 Response to "Cara Memasang dan Menggunakan Lazy Load di Blog"

Post a Comment

Terimakasih telah berkunjung,Berkomentarl dengan sesuai topik dilarang berkomentar dengan tidak sopan, tidak senonoh ,por*ografi dan Sara,menyertakan link aktif akan otomatis terhapus

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel