Add Disqus Comments widget on Blogger.

#How to add Disqus Comments widget on Blogger?

Install Loading Disqus on Scroll on Blogger ? (New Version in 2021)

Hey my Blogger Friends, Welcome to my new post on How to Install Fully Responsive Lazy Loading Disqus on Scroll on Blogger for free in 2021.
Here are you know how to implement it with very easy step .

Let's Start our Blogspot Widgets,

How to Install Lazy Loading Disqus on Scroll on Blogger ? (New Version in 2021)

Disqus is an online platform that provides a comment system that you can use on various website platforms, using Disqus comments is now the best choice because it has better features compared to the default comment system on Blogger. Including Disqus you will see Facebook, Twitter and Instagram Comments easily.And This is Trending Blogger Widgets for Free in 2021. This Disqus comment system is commonly found on sites that embed it and Many Blogger use it on their blog .

With all its advantages, there are also drawbacks 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 and it is not Good News For Blogger. To overcome this, here CNL OFFICIAL will provides tips on How to add Lazy Loading Disqus on Scroll in Blogger 2021(Update Version) the way it works is that the Disqus code will not work until we scroll the page until the Disqus viewport is visible.

For those of you who want to apply this method on their Blogger website than  please follow the easy steps below.

#How to Install Lazy Loading Disqus on Blogger?

First, open Blogger > Click the Themes menu >Backup Your Template>Click Edit HTML and Backup Them > Then find this code

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

Then 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 Change 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 you're done!

Well, for those of you who want to completely remove all code from the default Blogger comment system and want to use the Disqus comment system permanently on their blogspot. You can see the video below:

Backup the theme before deleting the Blogger comment code and never try to edit this code.This code is fully responsive and user friendly.

That's the way to install Lazy Loading Disqus on Scroll that CNL OFFICIAL can share on this occasion.

 
CNL OFFICIAL is only For Blogger Widgets and Fully Responsive Template For Blogger Free. If any problems including this code or implement this code just comments and get quick solution.

Thank you for visiting and greetings.