Memasang disqus di blogger menggunakan event scroll javascript

Memasang disqus di blogger menggunakan event scroll javascript

Script ini berfungsi untuk menampilkan komentar disqus jika ada yang scroll ke bawah sampai akhir postingan. Dengan script ini blog pun akan semakin cepat.

Berikut cara pasang nya kalian hanya perlu menambahkan script berikut ke dalam template kalian.

<div class='disqus-blogger-comment-block' />
<script type='text/javascript'>
  //<![CDATA[
  window.disqus_blogger_current_url = document.querySelector('link[rel=canonical]').href;
  window.disqus_shortname = 'shortname_disqus';
  const _callDisqus = () => {
    let el = document.querySelector('.disqus-blogger-comment-block');
    if (el) {
      if (el.getBoundingClientRect().bottom <= window.innerHeight) {
        let script = document.createElement('script');
        script.type = 'text/javascript';
        script.async = true;
        script.src = `//${disqus_shortname}.disqus.com/blogger_item.js`;
        (document.head || document.body).appendChild(script);
        console.log('loaded');
        window.removeEventListener('scroll', _callDisqus);
      }
    }
  }
  window.addEventListener('scroll', _callDisqus);
  //]]>
</script>

Kalian hanya perlu mengganti code shortname_disqus dengan shortname disqus kalian.

Untuk tempat memasang nya kalian cari tag yang ada attribute id dengan value comments. Seperti berikut.

<div id='comments'>
  <!--Tempel Disini-->
</div>

Jika sudah di tempelkan ke dalam tag tesebut simpan template dan lihat hasil nya.

Artikel Terkait

1 komentar

Ikuti format penulisan berikut untuk menyisipkan elemen tambahan.
  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong>

Emoticon

  • Mangenak
    22 Juli 2022 13.32
    Profil: https://www.blogger.com/profile/16844503105431258165
    Mantap, jadi nggak ribet lg pasang komen disqus