Hello folks,Today in this article we are going to explain How to add Disqus comments load on click in blogger template.Now days every blogger knows about disqus this is best platform for commenting system in every website or blog.Disqus comments are 100% responsive wich for sure enahcne each and every website.From Disqus comment system you can moderate comments and there is no issue of spam ,becuase all spams comment first need moderator approval then it's only visible otherwise they will remain pending.There are lot of tricks to customize disqus comments box ,in our next tutorial we will explain how to add most commentator widgets of disqus comments.Disqus comment system is totally free and disqus comments comes with very rich features,which also comes in google search results.In disqus you can recommend your content to show on each and every comments section in your website.they also provide one unique feature which i like the most i.e featured comment.if something you want to tell to your visitors or want's to highlight it just write your comment and select featured comment,it will display on the top of all the comments with the featured comment tag by admin.
However today we are just focusing on custom disqus system load on click,it will also boost your page speed load time and suits every blog niche.So to grab this trick follow the steps mentioned below.
How To install Disqus comments load on click function in blogger template
Installation Steps:
Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.
Step 2. Now Click on -> Template -> Edit HTML.
Step 3. First Search for <head> by Pressing Ctrl+F keys and Copy the below Font Awesome Icons stylesheet and paste it just below the <head> tag.
Step 3. First Search for <head> by Pressing Ctrl+F keys and Copy the below Font Awesome Icons stylesheet and paste it just below the <head> tag.
<link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>Step 4. Now Search for the following below code.
<b:includable id='comments' var='post'>Step 5. Now copy the below highlighted code and paste it just after the above code.
.
.
.
</b:includable>
<b:includable id='comments' var='post'>Step 6. Now Copy the below javascript code and paste it just above/before the closing </body> tag.
.
.
.
</b:includable>
<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>
<script type='text/javascript'>Customization:
var disqus_shortname = "bloggersstand";
!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="bloggersstand";!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>
- Replace bloggersstand with your disqus username.
Step 7. Now Search for ]]></b:skin> or </style> by Pressing Ctrl+F keys.
Step 8. Copy the below CSS code and paste it just before the ]]></b:skin> or </style> tag.
/* Disqus Comments Load On Click By www.Bloggersstand.Com */Step 9. Now Search for the following below code.
#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 #767676;}
#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:"\f0e6";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;color:#FEA280;border-left:1px solid #999;top:0;right:0;padding:12px 20px;position:absolute}
#disqusshow:hover,#disqusshow:active{color:#ff4400}
<div class='comments' id='comments'>Step 10. Now copy the below highlighted html code and paste it just before the above code.
<div id='disqusshow' onclick='load_Comments()'>Load comments</div>Step 11. Now Save your template..Done !
<div id='disqus_thread'/>
<div class='comments' id='comments'>