Cara Memasang Lazy Loading Disqus on Scroll Di Blogger

Cara Memasang Lazy Loading Disqus on Scroll Di Blogger

Cara Memasang Lazy Loading Disqus on Scroll

AdityaTekno.com
- Cara Memasang Lazy Loading Disqus on Scroll Di Blogger. Disqus adalah sebuah platform online yang cukup populer karena menyediakan sistem komentar yang bisa anda gunakan di berbagai platform website, penggunaan komentar Disqus sekarang sudah menjadi pilihan terbaik karena memiliki fitur-fitur yang lebih baik jika dibandingkan dengan sistem komentar default yang ada di Blogger. 

Sistem komentar Disqus ini sudah umum kita temukan di situs-situs yang menyematkannya. Di samping fiturnya yang lengkap, ternyata Disqus memiliki kelemahan yang akan membuat kecepatan situs menjadi lambat. 

Nah, untuk mengatasi hal itu, di sini saya akan memberikan tips Cara Memasang Lazy Loading Disqus on Scroll yang cara kerjanya adalah kode Disqus tidak akan berfungsi sebelum kita scroll halaman sampai bagian Disqus terlihat. Bagi anda yang ingin menerapkan cara ini, silakan ikuti tutorialnya bawah ini.

Cara Memasang Lazy Loading Disqus on Scroll

Pertama, buka Blogger >> Tema >> Edit HTML >> Kemudian cari kode ini
<b:includable id='comments' var='post'>
Setelah itu tambahkan kode di bawah ini tepat di bawah kode <b:includable id='comments' var='post'>
<b:if cond='data:view.isPost'>
<div id='disqus_thread'>
<div id='disqus_empty'/></div>
<script>
//<![CDATA[
function load_disqus(e){var t=document.getElementById("disqus_empty"),d=document.getElementById("disqus_thread"),n=document.createElement("script"),s=document.getElementsByTagName("head")[0]||document.getElementsByTagName("body")[0];d&&t&&(n.type="text/javascript",n.async=!0,n.src="//"+e+".disqus.com/embed.js",s.appendChild(n),t.remove())}window.addEventListener("scroll",function(e){var t=document.scrollingElement.scrollTop,d=document.getElementById("disqus_thread");d&&t>d.getBoundingClientRect().top-150&&(load_disqus("YOUR-DISQUS-USERNAME"),console.log("Disqus loaded."))},!1);
//]]>
</script>
</b:if>
Maka hasilnya akan terlihat seperti ini
<b:includable id='comments' var='post'>
<b:if cond='data:view.isPost'>
<div id='disqus_thread'>
<div id='disqus_empty'/></div>
<script>
//<![CDATA[
function load_disqus(e){var t=document.getElementById("disqus_empty"),d=document.getElementById("disqus_thread"),n=document.createElement("script"),s=document.getElementsByTagName("head")[0]||document.getElementsByTagName("body")[0];d&&t&&(n.type="text/javascript",n.async=!0,n.src="//"+e+".disqus.com/embed.js",s.appendChild(n),t.remove())}window.addEventListener("scroll",function(e){var t=document.scrollingElement.scrollTop,d=document.getElementById("disqus_thread");d&&t>d.getBoundingClientRect().top-150&&(load_disqus("YOUR-DISQUS-USERNAME"),console.log("Disqus loaded."))},!1);
//]]>
</script>
</b:if>
...
...
</b:includable>
Ganti kode yang ditandai dengan username Disqus blog anda. Selanjutnya untuk kode CSS tambahkan kode di bawah ini sebelum </head>
<b:if cond='data:view.isPost'>
<style>
#disqus_thread{display:block;position:relative;overflow:hidden;padding:20px 0 0 0;margin:20px auto 0 auto;border-top:1px solid rgba(0,0,0,0.08)}#comments{display:none}
</style>
</b:if>
Kemudian klik Simpan tema dan selesai!

Baca Juga :

Demikian tutorial Cara Memasang Lazy Loading Disqus on Scroll Di Blogger. Semoga bermanfaat, terima kasih sudah berkunjung, salam AdityaTekno.com 

sumber :
https://www.arlinacode.com/2020/08/cara.memasang.lazy.loading.disqus.on.scroll.html
https://einzford.net/disqus-lazy-load/