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

Kamu cukup masukan kode seperti yang telah diwarnai pada widget Layout/Tata Letak, kode iklan ini bisa kamu dapatkan Pada sebelah kiri menu halaman Adsense, click Ads/iklan pilih Overview/Ikhtisar, setelah masuk halaman Overview, pilih tab ke2 By ad unit, dan pilih iklan seleramu.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890XXXXXX"
     crossorigin="anonymous"></script>
<!-- adsense -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-1234567890XXXXXX"
     data-ad-slot="2123570380"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

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
26 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

    • Admin
      Admin 24 August, 2021

      Izin tanya min. Saya pengguna templati jettheme.

      JetScript Option yang dimaksud itu gimana ya ?

      Pada saat saya daftar adsense dan menempelkan kode untuk menghubungkan blog ke adsense (script) kecepatan blog drop menurun drastis. mohon solusinya min

    • Jettheme
      Jettheme 28 August, 2021

      bisa tanya kegrup t.me/jettheme kalau masih bingung

  • 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

  • Dzuhalah
    Dzuhalah 08 August, 2021

    Cara supaya gambar itu membentang seperti gambar diatas bagaimana ya?

    • Jettheme
      Jettheme 21 August, 2021

      pakai lazyload image

  • Aji fratama
    Aji fratama 18 August, 2021

    Itu cukup kode ID analytic apa kode pelacakan nya soal nya punya saya gk bisa di lacak di aplikasi Google analytic

    • Jettheme
      Jettheme 21 August, 2021

      sama seperti code ID analytic blogger sebelumnya

  • SiTeDay Exe.
    SiTeDay Exe. 04 September, 2021

    min mau nanya nih ko jettheme 2.7 sama 2.8 beda yah yg v2.7 tiap kitamasukin h2 di atasnya terdapat out of content tp ko yg 2.8 gada out of content yah? padahal bgus klo ada ot of contentya tuh mnrt saya hehe

    • Jettheme
      Jettheme 05 September, 2021

      tetap ada kok

  • Lexa ID
    Lexa ID 11 September, 2021

    Ntahlah, padahal ini sya pake versi terbaru 2.8

    Gada daftar isinya bisa di cek

    https://resepjavanese.blogspot.com/2021/08/resep-gulai-daun-kacang-simpel.html

    • Jettheme
      Jettheme 12 September, 2021

      di postnya ada html yg error, coba di copas ke notepad dulu, trus post di post yg baru

  • Lexa ID
    Lexa ID 14 September, 2021

    Sama aja gan kalo yg < itu lebih huruf aja padahal sya udah Bahan tetep ga muncul

    • Jettheme
      Jettheme 14 September, 2021

      masuk ke grup, biar nanti di lihat apa yang error

  • Lexa ID
    Lexa ID 18 September, 2021

    Grupnya mana mas

  • NathanCreinno
    NathanCreinno 29 September, 2021

    mas saya mau tnya utk lazylod vidio gmn masukn kode
    apa sama kayk buat image ?
    makasih

    • NathanCreinno
      NathanCreinno 29 September, 2021

      pake yotube mas

    • Jettheme
      Jettheme 29 September, 2021

      bisa di lihat contohnya di bagian Lazyload Iframe, Video, Audio, hanya perlu di ganti url nya

  • ཞıʄզı ąƖʄı
    ཞıʄզı ąƖʄı 15 October, 2021

    Mas, kok ga bisa di install ya? Udh coba upload tapi gagal terus coba copas langsung juga eror. Tulisan erornya widget-setting PageList50 mas knp y?

Add Comment
comment url