Loading Disqus Comments with Onclick Event

Loading Disqus Comments with Onclick Event - This time the comments will be hidden are disqus comments, different from the tricks in the article Adding Show and Hide Comments Blogger with the Onclick Event. The button that will appear will only bring up the comment column disqus only, when the button is clicked the button will disappear automatically.

But its function is still the same, namely to speed up loading when loading pages (onload) posts on the blog. Here's how to apply it

Loading Disqus Comments with Onclick Event

1. If the disqus widget already has a blog and all the codes related to disqus, please delete it first. So that this tutorial can be applied properly.
2. In this tutorial there are codes that use fontawesome. Make sure the template has a fontawesome link inside the template.

1. Blogger Login> Editor Template> Search for the code below

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

2. Add the code below just below the code in step 1 above

<b:includable id='disqus-comment' var='post'>
<script type='text/javascript'>
var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;
                if (!disqus_blogger_current_url.length) {
                    disqus_blogger_current_url = &quot;<data:blog.url/>&quot;;
                }
var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;
                var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;
</script>
</b:includable> 

The result will be like this

<b:includable id='comments' var='post'>
.......
.......
.......
</b:includable>
<b:includable id='disqus-comment' var='post'>
<script type='text/javascript'>
var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;
                if (!disqus_blogger_current_url.length) {
                    disqus_blogger_current_url = &quot;<data:blog.url/>&quot;;
                }
var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;
                var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;
</script>
</b:includable> 

3. Then add the code below before </body>

<script type='text/javascript'>
var disqus_shortname = &quot;Wiendhy&quot;;
!function(){var e=document.createElement(&quot;script&quot;);e.type=&quot;text/javascript&quot;,e.async=!0,e.src=&quot;//&quot;+disqus_shortname+&quot;.disqus.com/blogger_index.js&quot;,(document.getElementsByTagName(&quot;head&quot;)[0]||document.getElementsByTagName(&quot;body&quot;)[0]).appendChild(e)}();
</script>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
!function(){var e=document.createElement(&quot;script&quot;);e.type=&quot;text/javascript&quot;,e.async=!0,e.src=&quot;//&quot;+disqus_shortname+&quot;.disqus.com/blogger_item.js&quot;,(document.getElementsByTagName(&quot;head&quot;)[0]||document.getElementsByTagName(&quot;body&quot;)[0]).appendChild(e)}();
//<![CDATA[
function load_Comments(){var e=document.getElementById("disqusshow");e.style.display="none";var t="Wiendhy";!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="http://"+t+".disqus.com/embed.js",(document.getElementsByTagName("head")[0]||document.getElementsByTagName("body")[0]).appendChild(e)}()}
//]]>
</script>
</b:if>

Change the code marked with your username disqus.

4. Then add the code below before ]]></b:skin> or </style>

/* Disqus Comments */
#comments{display:none;}
.post-comment-link {visibility:hidden;}
#disqus_thread {background:#fff;margin:10px 0 0 0;padding:20px;box-shadow:inset 0 0 1px 0 #aaa;}
#disqusshow{position:relative;overflow:hidden;display:block;padding:15px 20px;text-align:left;color:#222;font-weight:700;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;margin:10px 0;background:#fff;border:1px solid #999;transition:all .3s}
#disqusshow:after{display:inline-block;content:"\f086";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;color:#e85e54;border-left:1px solid #999;top:0;right:0;padding:12px 20px;position:absolute}
#disqusshow:hover,#disqusshow:active{color:#f8695f}

5. Look for the code below

<div class='comments' id='comments'> 

6. Add the code below just above the code in step 5

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

The result will be like this

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

7. To display the comment count disqus on the index page and posting, please add the code below on the post meta or post info according to the template used

<a expr:href='data:post.url + &quot;#disqus_thread&quot;' title='Comments Count'> Comments</a> 

8. Save the template.

Thus the tutorial on Cata Contains Disqus Comments with Onclick Event, hopefully useful.