Setting Lazyload Untuk Template JetTheme

Lazyload Image/Gambar

Pertama anda bisa mengupload di media seperti normal yang dilakukan lalu masuk ke tampilan HTML pada pojok kiri atas.

Cara Simple

Perhatikan code anda, pasti anda mendapatkan code yang tidak beraturan seperti ini

<div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/--aAiL2sNaTU/Xq8NpeHV_-I/AAAAAAAAAFs/n9cz4Z6i2_g37CgGT4Id_3D-tUSCwUAjQCPcBGAYYCw/s2048/lamp.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1371" data-original-width="2048" src="https://1.bp.blogspot.com/--aAiL2sNaTU/Xq8NpeHV_-I/AAAAAAAAAFs/n9cz4Z6i2_g37CgGT4Id_3D-tUSCwUAjQCPcBGAYYCw/s320/lamp.jpg" width="320" /></a></div>

lalu tambahan code <noscript> ... </noscript> diantaranya contohnya menjadi seperti ini:

<noscript>
<div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/--aAiL2sNaTU/Xq8NpeHV_-I/AAAAAAAAAFs/n9cz4Z6i2_g37CgGT4Id_3D-tUSCwUAjQCPcBGAYYCw/s2048/lamp.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1371" data-original-width="2048" src="https://1.bp.blogspot.com/--aAiL2sNaTU/Xq8NpeHV_-I/AAAAAAAAAFs/n9cz4Z6i2_g37CgGT4Id_3D-tUSCwUAjQCPcBGAYYCw/s320/lamp.jpg" width="320" /></a></div>
</noscript>

Cara Manual

Untuk cara manual hal ini dilakukan agar code lebih bersih, pertama ambil code tag image dari gambar yang anda upload di blogger,

<img border="0" data-original-height="1371" data-original-width="2048" src="https://1.bp.blogspot.com/--aAiL2sNaTU/Xq8NpeHV_-I/AAAAAAAAAFs/n9cz4Z6i2_g37CgGT4Id_3D-tUSCwUAjQCPcBGAYYCw/s320/lamp.jpg" width="320" />

Lalu anda bisa masukan di code diantara <noscript> ... </noscript> berwarna dibawah ini, pastikan terdapat width atau data-original-width dan sudah di atur. untuk full size anda bisa membuatnya menjadi width="728"

<noscript>
<img border="0" data-original-height="1371" data-original-width="2048" src="https://1.bp.blogspot.com/--aAiL2sNaTU/Xq8NpeHV_-I/AAAAAAAAAFs/n9cz4Z6i2_g37CgGT4Id_3D-tUSCwUAjQCPcBGAYYCw/s320/lamp.jpg" width="320" />
</noscript>

Lazyload Adsense

Lazyload untuk adsense anda bisa aktifkan pada Tataletak > JetScript Options:

const caPubAdsense = false;

Masukan kode ID adsense anda, contoh:

const caPubAdsense = 1234567890;

Setelah itu cukup masukan code adsense seperti dibawah ini kedalam TataLetak yang sudah di sediakan

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxx"
     data-ad-slot="xxxxxxx"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Pastikan anda TIDAK menanam script manual melalui Tema > Edit HTML dan TIDAK menggunakan atau mengaktifkan Adsense bawaan Blogger

Lazyload Google Analytics

Lazyload untuk google analytics anda bisa aktifkan pada Tataletak > JetScript Options:

const analyticId = false;

Masukan kode ID google analytics anda, contoh:

const analyticId = "U-XXXXXXXX";

Lazyload Iframe, Video, Audio

Untuk Lazyload Selain image seperti Iframe (Youtube, Google map, dll), Video, dan Audio

<iframe class="lazyload" title="Youtube"
  width="400" height="300" allowfullscreen
  allow="accelerometer;autoplay;encrypted-media;gyroscope;picture-in-picture"
  data-style="background: url(https://img.youtube.com/vi/Uz970DggW7E/hqdefault.jpg) 50% 50% / cover no-repeat;"
  data-src="https://www.youtube.com/embed/Uz970DggW7E"></iframe>

<picture class="lazyload">
  <source media="(min-width:800px)" data-srcset="https://picsum.photos/800/1200">
  <source media="(min-width:600px)" data-srcset="https://picsum.photos/600/900">
  <img data-src="https://picsum.photos/200/300" alt="Photo" style="width:auto;">
</picture>

<audio class="lazyload" controls>
  <source data-src="sound.ogg" type="audio/ogg">
  <source data-src="sound.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

<video class="lazyload" width="320" height="240" controls>
  <source data-src="movie.mp4" type="video/mp4">
  <source data-src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Thanks for https://github.com/shinsenter/defer.js/

Next Post Previous Post
9 Comments
  • Sanwitana
    Sanwitana 31 May, 2021

    kalo lazyload MGID gimana mas?

    • Jettheme
      Jettheme 02 June, 2021

      Belum ada yg otomatis untuk MGID, ditunggu update selanjutnya

  • Balung Cilik
    Balung Cilik 13 June, 2021

    Halo mas admin, saya mau tanya. saya sudah lakukan sesuai tutorialnya untuk lazyload adsensenya tp kok iklannya g muncul ia alias nge blank putih ?

    • Jettheme
      Jettheme 15 June, 2021

      coba update lagi, sudah saya fix untuk lazyload adsensenya

    • Admin
      Admin 15 June, 2021

      Sama mas, iklannya juga ga muncul, ngeblank putih doang. Padahal udah saya ikuti tutorial di atas mas.

    • Jettheme
      Jettheme 15 June, 2021

      1. Pastikan jangan memasukan code script adsense pada tema HTML.
      2. Pastikan hapus adsense bawaan blogger pada menu Earnings/Penghasilan.
      3. Cukup masukan nomor ID pada Tataletak JetScript Option contoh
      const caPubAdsense = 1234567890;

      jika masih ada kesalahan, pertanyaan, bisa langsung tanyakan di grup
      t.me/jettheme

  • Restu Kersana
    Restu Kersana 28 June, 2021

    Hallo min, untuk pemasangan google analytic U-XXXXXXXX atau UA-XXXXXXXX ?

    • floatscript
      floatscript 02 July, 2021

      ijin menjawab -> UA

  • Dua lipa.id
    Dua lipa.id 15 July, 2021

    apakah lazload img ini sdh berlaku otomatis pada gambar postingan blog ya

Add Comment
comment url