DISQUS COMMENTS: DISQUS ONCLICK EVENT FOR BLOGGER CLEAN INSTALL

Disqus Comments with onClick event is tutorial about how to add Disqus comments form for Blogger's users. This blogger's tips can can make pages loading faster because only loads the comments when visitors clicked on show & hide button. In this tutorial there is a code that using Font Awesome. Make sure the template already have Font Awesome installed.

DISQUS COMMENTS: SHOW & HIDE WITH ONCLICK EVENT

If the template already have there Disqus widgets, in order for this tutorial can be applied properly. please remove Disqus widgets and all the code relating to Disqus first.

Login to your Blogger.
Go to Template Editor.
Then follows the tutorial steps by steps.

JAVASCRIPT: ONCLICK DISQUS COMMENTS

#1. FOR BLOGGER TEMPLATES WITH DISQUS WIDGET ALREADY INSTALLED

If you have Disqus already installed on your template, simply stops this tutorial and continue reads on: How to change Disqus widget with OnLoad for Blogger.

#2. FOR BLOGGER TEMPLATES WITHOUT DISQUS WIDGET INSTALLED BEFORE.

Clean installations of Disqus widget for Blogger - If your template already Disqus's script inside the template, just remove all the code relating to Disqus before continue this tutorial..

Now, find this similar code:

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

Add this code after the previous code. Remember do not replacing it :

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

And then add this JavaScript too before </body> tag:

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

IMPORTANT! CHANGE THIS ...

Change YOUR_DISQUS to your disqus username, there is two username of it.

HTML: CALLED DISQUS FUNCTIONS

Then find this (CTRL+F):

<div class='comments' id='comments'>
<b:if cond='data:post.allowComments'>

And add this code before that <div class='comments' id='comments'>

<div id='disqusshow' onclick='load_Comments()'>LOAD COMMENTS</div>
<div id='disqus_thread'/>

CSS: ONCLICK DISQUS COMMENTS

Add this CSS code before </style> or ]]></b:skin> or at CSS stylesheet area. This is using origins style, for more style reads also Disqus Style Box Collections.

/* Disqus Comments */
#comments{display:none;}
.post-comment-link{visibility:hidden}
#disqus_thread{background:#fff;margin:10px 0 0;padding:20px;box-shadow:inset 0 0 1px 0 #aaa;margin-bottom:-75px}
#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}

EDIT CUSTOM HEIGHT:

From the CSS tag #disqus_thread, you can delete margin-bottom:-75px.

OPTIONAL: DISQUS COMMENTS COUNTS

To show Disqus comment count in the index page and posting, please add the code below to post meta or post information in accordance your template.

Add this rel tag:

title='Comments Count'

And the result would be similar like this:

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

INTRODUCING BLOGGER