How to Install Lazy Loading Disqus on Scroll on blogger | dn420

Welcome to the Dn420 blog today I am telling you  about "How to Install Lazy Loading Disqus on Scroll on blogger "

What is Lazy Loading Disqus comment?

Disqus is an online platform that provides the best comment system that you can use on various website platforms, the use of Disqus comments is now the best choice of blogger website.

 because it has the best features when compared to the default comment system on Blogger. The Disqus comment system is commonly found on sites that embed it and I also use it on the Dn420 blog.

With all the advantages, as for the disadvantages, because Disqus is a third-party plugin, Disqus will contribute to the loading load on the blog every time we open an article link. 

To overcome this, here Dn420 provides tips on How to Install Lazy Loading Disqus on Scroll the way it works is that the Disqus code won't work until we scroll every page until the Disqus viewport is visible.

For those of you who want to apply this method, please follow the easy steps below to install Lazy Loading Disqus on Scroll on blogger.

How to Install Lazy Loading Disqus on Scroll?

For this First, open Blogger Dashboard > Click the Theme menu > Click Edit HTML button next to customize > Then look for this code bellow 

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

Then add the code below just below the

<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>

Then your result will look like this below code

<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>

Replace the code marked with your blog's "YOUR-DISQUS-USERNAME"

Next for the CSS code add the code below before </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>

Then click on the Save theme and you're done!

Demo

Make sure you need to Backup your theme before deleting the Blogger comment code.try it at your own risk.

CONCLUSION:

Thanks for reading this post of How to Install Lazy Loading Disqus on Scroll on blogger? for so long. If you have an opinion, don't forget to let us know in the comments. And if the post seems helpful, don't forget to heal your friends. Thanks.

Go to Link