How to Create Disqus Comment with Onclick Event 2018

How to Create Disqus Comment with Onclick Event - On this occasion I will give a tips on how to create Disqus Comment with Onclick Event on your blog post. Actually this one way is almost the same as I've previously shared about how to create a Show and Hide Comment with Onclick event, but this time that will be hidden is disqus comments.

The button that will appear will only display the disqus comment field only, when the button clicked the button will disappear automatically. But the function is still the same that is to speed up loading when loading pages (onload) posting on the blog. Here's how to apply.

How to Create Disqus Comment with Onclick Event

Go to Blogger >> Click the Theme menu >> Then click the Edit HTML button

Put the following code, just below the code <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>

After that add this code in place under the code <b:includable id='comments' var='post'>

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

Then the result will be like this

<b:includable id='comments' var='post'>
   <div id='disqusshow' onclick='load_Comments()'><i class='fa fa-comments'/> Load comments</div>
   <div id='disqus_thread'/>

Next add this CSS code before the code </head>

<b:if cond='data:blog.pageType != &quot;index&quot;'><style type='text/css'>
/* Onclick Disqus Comment */
#comments{display:none}
.post-comment-link{visibility:hidden}
#disqus_thread{background:#fff;margin:10px 0 0 0;padding:0}
#disqusshow{position:relative;overflow:hidden;display:block;text-align:left;font-weight:700;font-size:18px;cursor:pointer;letter-spacing:0;line-height:20px;margin:10px auto;padding:10px;background:#00b894;color:#fff;transition:all .3s}

#disqusshow:hover,#disqusshow:active{color:#fff}
</style></b:if>

Then add the code below before the code </body> or &lt;!--</body>--&gt;&lt;/body&gt; and replace the code marked khalistablog with username disqus your blog.

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<script type='text/javascript'>
var disqus_shortname = &quot;khalistablog&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>
<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="khalistablog";!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://"+t+".disqus.com/embed.js",(document.getElementsByTagName("head")[0]||document.getElementsByTagName("body")[0]).appendChild(e)}()}
//]]>
</script>
</b:if>

Done and see the results in your blog.

What to note:
1. If the blog already has a widget disqus and all code related to disqus, please delete first. For this tutorial to work properly.
2. In this tutorial there is code that uses fontawesome. Make sure the template already contained a fontawesome link.

For those who have enabled the Google+ commenting system on their blogs, please disable it first so that the code above will work properly and set up blog comment settings in Settings >> Post, comment, and share >> Comments >> Then adjust it to be like the image below.

For yesterday req how to add gradient color like in the top menu of this blog please add this CSS and replace .class-choice with class or CSS ID of your blog as you wish. The point in the marked code you can add in any class or ID in the template.

@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
.class-choice{background:#f24a4a;background:linear-gradient(-50deg,#ee5952,#ea3a7e,#20aadb,#23e0b3);background-size:320% 200%;animation:Gradient 15s ease infinite}

A few tips that I can share this time about How to Create Disqus Comment with Onclick Event. Hopefully with a short enough article this can be useful for us and good luck.

Share :