How to load and display Disqus comments on button click in Blogger?

[Updated On October-6-2014]: The Blogger users will now not face any problem when the comments will be loaded in mobile.

Recently, I found that Disqus have a very heavy script that takes too much time to load every comment worth size means more the comments on page more the time it will take. So I recommend to use buttons instead.

How to make it?

Step 1

• Go to Blogger > Template > Edit HTML
• Find </head>
• Paste the following code just above it

<script type='text/javascript'>
        //<![CDATA[
function load_Comments() {
    var hidediv = document.getElementById('disqusdiv');
    hidediv.style.display = 'none';
    var disqus_shortname = 'bloggerever';
    (function () {
        var dsq = document.createElement('script');
        dsq.type = 'text/javascript';
        dsq.async = true;
        dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
}
//]]></script>

Replace bloggerever with your Disqus short-name.

Step 2 

Okay now, find  <b:includable id='comments' var='post'> and paste the following code below it.

<div id='disqusdiv' onclick='load_Comments()'>Load comments</div>
<div id='disqus_thread'/>

This is the place where your comments and button will be displayed, if you want them to be on some different place you can do that.

Step 3

• Now find  //]]></b:skin>
• Paste the following code just above it

#disqusdiv{
display:block;
padding:15px 0;
text-align:center;
width:100%;
color:#fff;
font:400 15px 'pt sans',sans-serif;
text-transform:uppercase;
cursor:pointer;
margin:10px 0;
background:#DD4C39;
}
#comments{
display:none;  // To hide default comments
}

Step 4

• Find <b:includable id='post' var='post'>
• Paste the following code just below it 

 <script>var disqus_url = &quot;<data:post.canonicalUrl/>&quot;;</script>

Done. Save template and see the effect.