Dapatkan diskon: Template 50% hanya bulan ini! Beli sekarang! Harga diskon Template: 50% hanya bulan ini! ×

Cara Memasang Lazy Load Image di Blogspot dengan Mudah

Cara Memasang Lazy Load Image di Blogspot dengan Mudah Images @rian_seo
12 Share
Cara Memasang Lazy Load Image di Blogspot dengan Mudah

Apa itu fungsi lazy load? dan sebagai apa perannya di blog yang Anda kelola? Kita akan coba membahas bersama fungsi dan manfaat lazy load ini lewat tulisan kali ini.

Lazy load image bisa di sebut artinya males untuk menunggu, dan pastinya maksud dari kata tersebut adalah menahan loading suatu tampilan.

Contohnya disini kita ambil sebagai acuan adalah sebuah blog, dimana bila blog yang menggunakan fiktur / plugin Lazy load ini akan menahan suatu loading tampilan halaman jika di akses oleh user (pengguna).
Baca juga — Pelajari tentang Cara Membuat Slider Caraousel Image di Blogspot.
Fungsi dari lazy load itu sendiri adalah memberikan kecepatan akses tanpa harus memakan file / mendownload dalam tampilan blog yang Anda kelola.

Jika Anda salah satu pengelola blog, maka wigdet / plugin lazy load ini sangat cocok untuk kamu gunakan demi mendapatkan nilai kecepatan yang sempurna di tampilan halaman website.

Untuk memasang lazy load ini juga, kamu tidak perlu pusing atau ahli dalam masalah ilmu coding dan HTML, sebab kami sudah menyediakan kode script ini dengan gratis dan pastinya mudah untuk digunakan.
Kekurangan dari lazy load image ini adalah tidak bagus untuk kenerja SEO, sebab gambar tidak akan terbaca secara baik dimata pencarian Google karena terhambat akan suatu loading saat gambar tampil di halaman mesin pencari.

Lebih dari itu, semuanya tergantung keperluan dan kepentingan kamu masing-masing. Jika kamu mementingkan kecepatan tampilan blog, maka sangat cocok menggunakan script lazy load ini.

Memasang Scipt Lazy Load di Blogger

Salin / Copy kode script dikotak bawah ini.
<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://www.spruko.com/demo/pinlist/demo/img/loader.svg",effect:"fadeIn",threshold:"-50"})});
//]]></script>

NB: Warna tanda merah itu adalah tampilan gambar saat gambar blog kamu masih belum ada aktifitas scroll. Kamu bisa ubah gambar sesuai gambar milik kamu sendiri.

Buka Dashbor > Tema > Edit HTML > CTRL+F masukan kode </body>

Letakan kode script lazy load diatas tepat di atas kode </body>

Klik " SIMPAN "

Script Lazy Load Ads / AdSense Blogger


<script type='text/javascript'>
// Lazy Load AdSense
var lazyadsense=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyadsense||0!=document.body.scrollTop&&!1===lazyadsense)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyadsense=!0)},!0);
//]]></script>
Pasang kode script lazy load ads diatas diatas kode </body>

Lalu, hapus kode JS Google AdSense yang sebelumnya terpasang di template blog kamu.

Sebagai contoh kode iklan Google AdSense dibawah ini akan memberikan kamu kemudahan dalam memahaminya.
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-123456789"
     data-ad-slot="123456789"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Akhir Kata


Selesai sudah cara pemasangan plugin atau wigdet lazy load image untuk blog basis blogspot, Jika ada pertanyaan lain jangan ragu untuk menulisnya di kolom komentar blog ini.
Bagaimana reaksi Anda tentang artikel ini?
Previous article
Next article

Komentar (0)

Post a Comment

Kami memiliki kebijakan dalam berkomentar di blog ini :

- Dilarang promosi suatu barang
- Dilarang memasang link aktif di komentar
- Dilarang promosi iklan yang berbau judi, pornografi dan kekerasan
- Dilarang menulis komentar yang berisi sara atau cemuhan

Kebijakan komentar yang bisa Anda temukan selengkapnya disini

Dukungan :

Jika menyukai dengan artikel blog kami, silahkan subscribe blog ini

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Subscribe now

Signup now to my exclusive newsletter