Skip to main content

How to Make Show Hide Comment Button For Non AMP Blog

If you use comment in your blog, then you need to use this script to create Open Close Comment Button For Non AMP Blog. This Widget comments in our Blog is very beneficial in addition to communicate us with visitor and also improve our blog performance. Blog will look neat when the comment widget is hidden using the close and open button.

It also helps to improve blog loading and can also maximize the visitors while reading the article on our blog. There are many widgets that you can post for Blogger Comments like blogger comments default, Facebook and Disqus which each have their own advantages and disadvantages.&

Also read : How To Get Matched Content Ads and Myth About it

To prevent comment ads from appearing directly is to hide Widgets and create the Close Comments button. You can see Button Close Comments on iweblogsite blos, is pretty good and looks more neat. For those of you who are interested in modifying Disqus Comment please follow the following way.

How to Make Show Close Comment Button For Non AMP Blog

The first step to make button Show Hide Comment is please find the code below :

<b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comments'/>

Replaced that code into :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
.buka-komen,.tutup-komen{font-family:inherit;background-color:#11589D;color:#fff;font-size:16px;line-height:1.3em;padding:8px 10px;text-align:center;font-weight:700;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-transition:all 218ms;-moz-transition:all 218ms;-o-transition:all 218ms;transition:all 218ms;-webkit-user-select:none;-moz-user-select:none;margin:20px 0 0;cursor:pointer;}
<div aria-label='Buka Komentar' class='buka-komen' id='buka-komen' onclick='document.getElementById(&quot;comments-box&quot;).style.display=&quot;block&quot;;document.getElementById(&quot;tutup-komen&quot;).style.display=&quot;block&quot;;document.getElementById(&quot;buka-komen&quot;).style.display=&quot;none&quot;' role='button' tabindex='0'>Buka Komentar</div>
<div aria-label='Tutup Komentar' class='tutup-komen' hidden='hidden' id='tutup-komen' onclick='document.getElementById(&quot;comments-box&quot;).style.display=&quot;none&quot;;document.getElementById(&quot;tutup-komen&quot;).style.display=&quot;none&quot;;document.getElementById(&quot;buka-komen&quot;).style.display=&quot;block&quot;' role='button' tabindex='0'>Tutup Komentar</div>
<div id='comments-box'>
        <b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comments'/>

You can change the color, font size, button text and more as you wish. The above HTML code actually does not delay loading of the comment widget so your PageSpeed blog will remain unchanged. But if we see it looks neat and nice views. The visitors will feel at home to visit your blog.

How, it is very easy to make Close and Open button on Blog Comment. If you still feel confusing how to set the script, please comment on this article below. With pleasure we will help and hopefully this blog is always useful for you as well, Thank you for visiting.
Comment Policy: Please write your comments according to the topic of this post. Comments containing link will not be displayed before approval
Open Comment
Close Comment