Disqus Comment Update with Onclick Event | Droidnur123

For those of you who have done a tutorial on how to load Disqus Comments with Onclick Events in the last Droidnur 123 post and for some reason these tips don't work on your blog template, here I will provide improvements or updates so that these tips can work properly.

For an explanation of how the Disqus Comment button works with Onclick Events, you can check the link Loading Disqus Comments with Onclick Events. Well, here are the steps.

Disqus Comment Update with Onclick Event?

( 1 ) Open Blogger > Click the Theme menu > Then click the Edit HTML button next to customize and add this code just below the HTML 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>

Next add this code just below 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 look 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 </head> tag

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style type='text/css'>
/* Onclick Disqus Comment by droidnur123*/
#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>

Set CSS according to your Templates.

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

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<script type='text/javascript'>
var disqus_shortname = &quot;Droidnur123&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="arlinacode";!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>

All Done and see the results on your blog.

Addition

For those who activate the Google+ comment system on their blog, please disable it first so that the code above can work properly and set the blog comment settings in Settings > comments > Then adjust it to be like the image below.

Useful Tricks

For those who asked yesterday how to add a gradient color like in the top menu of this blog, please add this CSS and replace it .class-pilihanwith your blog's CSS class or ID as desired. The point is that the marked code can be added to 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-pilihan{background:#f24a4a;background:linear-gradient(-50deg,#ee5952,#ea3a7e,#20aadb,#23e0b3);background-size:320% 200%;animation:Gradient 15s ease infinite}

That's the tutorial of Disqus Comment Update with Onclick Event, hopefully, it's useful thanks for visiting.

Go to Link