Cara Memasang Lazy Loading Disqus on Scroll

Cara Memasang Lazy Loading Disqus on Scroll

Snippet Tips Blogger

Arlina

8/13/2020

Disqus merupakan sebuah platform online yang menyediakan sistem komentar yang bisa sobat 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 dan di blog Arlina Code pun saya menggunakannya.

Dengan segala kelebihannya, adapun kekurangannya karena Disqus merupakan plugin pihak ke tiga maka dari itu Disqus akan menyumbangkan beban loading pada blog setiap kali kita membuka tautan artikel. Untuk mengatasi hal itu, di sini Arlina Code memberikan tips Cara Memasang Lazy Loading Disqus on Scroll yang cara kerjanya adalah kode Disqus tidak akan berfungsi sebelum kita scroll halaman sampai bagian (viewport) Disqus terlihat.

Bagi sobat yang ingin menerapkan cara ini, silakan ikuti langkah mudah di bawah ini.

Cara Memasang Lazy Loading Disqus on Scroll

Pertama, buka Blogger > Klik menu Tema > Klik Edit HTML > Kemudian cari kode ini

<b:includable id='comments' var='post'>

Kemdian 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 sobat.

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!

• Result

Nah, bagi sobat yang ingin benar-benar menghapus semua kode dari sistem komentar default Blogger dan ingin menggunakan sistem komentar Disqus secara permanen di blognya. Sobat bisa simak video di bawah ini :

Backup tema sebelum melakukan penghapusan kode komentar Blogger

Itulah Cara Memasang Lazy Loading Disqus on Scroll yang bisa Arlina Code bagikan pada kesempatan kali ini. Terima kasih sudah berkunjung dan wasssalam.

Arlina