Skip to main content
FANCYBLOGGERTRICKS

follow us

How To Add Show/Hide Comment Button To Blogger Comments

Sometimes it's best to choose a simple and clean design for your blog than using a complex design that may get your readers confused. Your goal is to make your site as user friendly as possible, one of this is learning how to show and hide comments box on blogger.

Today's tutorial focus mainly on using show /hide button to hide and show the comment box. This will make your readers concentrate more on the post content before the "Show Comment Button" which will make the comments section appear.


Are you running a  blog using more than one comment box? Like disqus, blogger, facebook or googleplus comments. You can easily using this tutorial to hide all your comment box's and make the show in blocks . One click on each box automatically opens the comment box clicked.


I have made this tutorial very easy to use, you don't need much coding knowledge to carry this out. Follow the guide below to learn How To Add Show and Hide Comment Button To Blogger Comments

1. Login to your blogger dashboard .
2. Goto Templates>> Edit Html 
3. In your Html codes, search for the below code or something similar to it...


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


4. Now replace the above code with the following code



<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style>

.open-comment,.close-comment{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;}

.open-comment{display:block;margin-bottom:20px}

#comments-box{display:none}

</style>

<div aria-label='Open Comment' class='open-comment' id='open-comment' onclick='document.getElementById(&quot;comments-box&quot;).style.display=&quot;block&quot;;document.getElementById(&quot;close-comment&quot;).style.display=&quot;block&quot;;document.getElementById(&quot;open-comment&quot;).style.display=&quot;none&quot;' role='button' tabindex='0'>Open Comment</div>

<div aria-label='Close Comment' class='close-comment' hidden='hidden' id='close-comment' onclick='document.getElementById(&quot;comments-box&quot;).style.display=&quot;none&quot;;document.getElementById(&quot;close-comment&quot;).style.display=&quot;none&quot;;document.getElementById(&quot;open-comment&quot;).style.display=&quot;block&quot;' role='button' tabindex='0'>Close Comment</div>

</b:if>

<div id='comments-box'>

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

          </div>

5. Save your template and please check its appearance on the post page.

If you want to adjust the background color of the button and the color of the writing, please adjust the code background-color:#11589D;color:#fff;as I marked in the code above.

That's all..... Happy blogging. ...

You Might Also Like:

Comment Policy: Please write your comments in accordance with the topic of this page post. Comments that contain links will not show up before they are approved
Open Comment