How to Display Disqus Comments on Button Click in Blogger

Disqus script takes longer time to load comments on page, so put button click option to your page to run your page faster. It is good option to load comments in a new way. So how to make it?

1. If you have already add comments widgets through Disqus, remove your comment widgets.
2. Navigate to Editor from your blogger Dashboard >> Template >> Edit HTML
3. Paste the following code just above </head>
4. Relpace digitaldope with your own Disqus Short-name.

<script type='text/javascript'>
         //<![CDATA[
function load_Comments() {
     var hidediv = document.getElementById('disqusdiv');
     hidediv.style.display = 'none';
     var disqus_shortname = 'digitaldope';
     (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>

5. Paste the following code just above //]]></b:skin>

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

6. Now, find <b:includable id='comments' var='post'> and paste the following code below it. This is the place where your comments and button will be displayed.

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

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

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

9. It's done. Save template. Example to see click below comment button.