How to Make Disqus Lazy Loading Scroll on Blogger

Today i wanna share tips about blogger, How to Make Disqus Lazy Loading Scroll on Blogger.

Disqus is an online platform that is quite popular because it 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 comment system on Blogger.

The Disqus comment system is common on sites that embed it. In addition to its complete features, it turns out that Disqus has a weakness that will make the site speed slow.

Well, to overcome this, here I will give 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 section is visible. For those of you who want to apply this method, please follow the tutorial below.

How to Make Disqus Lazy Loading Scroll on Blogger

First, go to Blogger >> Themes >> Edit HTML >> Then look for this code

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

After that add the code below 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 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 Save theme and done!

Also Read:  How to Make Anti Adblock Notifications on Blogger

Leave a Reply