How To Install Lazy Load Disqus on Scroll Blogger

Disqus is an online platform that provides a comment system that you can use on various website platforms, the use of Disqus comments is ...
How To Install Lazy Load Disqus on Scroll Blogger

Install Lazy Loading Disqus on Scroll

Disqus is an online platform that provides a comment system that you can use on various website platforms, the use of Disqus comments is now the best choice because it has better features when compared to the default How to Install Lazy Loading Disqus on Scroll system on Blogger.  The Disqus comment system is commonly found on sites that embed it and I also use it on the Blog Faters blog.

With all the advantages, as for the disadvantages because Disqus is a third party plugin, therefore Disqus will contribute to the loading load on the blog every time we open an article link.  To overcome this, here Blog Faters provides tips on How to Install Lazy Loading Disqus on Scroll, the way it works is that the Disqus code will not work before we scroll the page until the Disqus viewport is visible.

For those of you who want to apply this method, please follow the easy steps below.

How to Install Lazy Loading Disqus on Scroll In Blogger

First, open Blogger > Click the Theme Menu > Click Edit HTML > Then look for this code

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

Then add the below code just below the 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>

Then the result will look like this

<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 Disqus Username.

Next for CSS code add below code 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 Save Theme and you're done!


Backup theme before deleting Blogger comment code

That's How to Install Lazy Loading Disqus on Scroll that Can Design can share on this occasion. Thank you for visiting and greetings.

Words can inspire, thoughts can provoke, but only action truly brings you closer to your dreams.

Post a Comment

© Blog Faters. All rights reserved. Developed by Jago Desain