DISQUS Comments ONCLICK Event For Blogger

Disqus Comments with on click 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.

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

As usual Login to your Blogger. Go to Template >> Edit HTML:

Find the below code on your blogger template: (Press CTRL + F to search)

]]></b:skin>

Add this CSS before the ]]></b:skin>

.show-comments{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 #e5e5e5;-moz-box-shadow: 0px 0px 5px #BBB;
-webkit-box-shadow: 0px 0px 5px #BBB;
box-shadow: 0px 0px 5px #BBB; transition:all .3s; width:100%}.show-comments:after{display:inline-block;content:"\f086";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;color:#e73138;top:0;right:0;padding:12px 20px;position:absolute}.show-comments:hover,.show-comments:active{color:#e73138}

Then add the following code before </body>

// Requires jQuery of course.
$(document).ready(function() {
    $('.show-comments').on('click', function(){
          var disqus_shortname = 'smartpik'; // Replace this value with *your* username.
          // ajax request to load the disqus javascript
          $.ajax({
                  type: "GET",
                  url: "http://smartpik.disqus.com/embed.js",
                  dataType: "script",
                  cache: true
          });
          // hide the button once comments load
          $(this).fadeOut();
    });
});  <script id='dsq-count-scr' src='//smartpik.disqus.com/count.js'/>

Change smartpik to your disqus shortname, there is three shortname of it.

Then find this code:

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

And add this code before that:

<button class='show-comments'>Load Disqus comments</button>
<div id='disqus_thread'/>

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

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

That’s all. Thank You