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

<p>&nbsp;</p><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><br />&nbsp;<p></p>

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

<noscript>
<p>&nbsp;</p><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><br />&nbsp;<p></p>
</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>

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
No Comment
Add Comment
comment url