Ads

Lazy Load Untuk Komentar Disqus (Blogger)

Lazy Load Untuk Komentar Disqus (Blogger)
Dagruel

Pertama cari html berikut di dalam template kalian.

<b:include cond='data:post.allowComments' data='post' name='commentPicker'/>
Atau
<b:include data='post' name='commentPicker'/>

Jika sudah ganti kode tersebut dengan html berikut.

<b:if cond='data:view.isPost'>
  <script>
    let disqus_config = () => {
      this.page.url = '<data:post.url.canonical/>';
      this.page.identifier = '<data:post.id/>';
    }
    const disqusLaz = (e) => {
      if (!e.classList.contains('loaded')) {
        let script = document.createElement('script');
        script.src = '//shortname.disqus.com/embed.js';
        document.body.appendChild(script);
        e.classList.add('loaded');
      }
    }
    //Script di bawah Menampilkan disqus saat di scroll silahkan di hapus jika tidak perlu
    window.addEventListener('scroll', () => {
      !document.getElementById('buttonDisqs').classList.contains('loaded') && document.getElementById('buttonDisqs').click();
    });
  </script>
  <div id='buttonDisqs' onclick='disqusLaz(this)'>Show Comments</div>
  <div id="disqus_thread"></div>
</b:if>

Text Yang di tandai silahkan ganti sesuai keterangan.

Kedua pasang css berikut di atas tag ]]></b:skin> untuk mempercantik tampilan nya.

#buttonDisqs {
  background-color: #008c5f; /* Warna tombol */
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 0px;
  text-align: center;
  width: 100%;
  border-width: 0px;
  padding: 20px 10px;
  cursor: pointer;
  transition: all .5s ease;
  border-radius: 3px;
  -moz-border-radius: 3px;
}
#buttonDisqs:hover {
  background: #1d2129; /* Warna tombol ketika disorot */
}
#buttonDisqs.loaded {
  display: none
}

Jika sudah silahkan simpan template dan lihat hasil nya.

2 komentar

Blogger Disqus
  1. Mau nanya bang cara post anime tapi nyatu sama episode kaya otaudesu itu gmna ya, misal kita klik anime mieruko chan eps 12 langsung mucul anime info + eps list 1-12.

    BalasHapus
    Balasan
    1. tambahin post info nya kedalam post eps.

      Hapus
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
  • Gunakan <i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan <em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>
×

Berlangganan

Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!