Home » Blogger Tutorials, Tricks and Hacks » Blogger Comments Tricks » How To Show/Hide The Comments Section In Blogger

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

How To Show/Hide The Comments Section In Blogger

How To Show/Hide The Comments Section In Blogger

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

2,298 views

This great trick is by Wajahat Khan Niazi (a.k.a. lemonadeflirt) from FAQBloggerTricks. It shows you how you can hide your blog’s comment section. This is very helpful if you want to save space on your web page reducing its length thereby minimizing far the user has to scroll down to reach the bottom.

Basically what this trick’s code does is hide the content of the DIV element that contains your blog’s comment section which is only revealed once you a click of the mouse button while hovering over it.

Follow the instructions below to try it out on your blog. As always, it is good practice to back up your template first before proceeding on making any changes to the code.

  1. From inside your Blogger Dashboard, go to ‘Template
  2. Click on ‘Edit HTML’ then the ‘Proceed’ button
  3. Check the ‘Expand Widget Templates’ box by clicking on it
  4. Look for the <head> tag by pressing Ctrl+F and then copy/paste the following code below it
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.toggle_container&quot;).hide();
$(&quot;h3.trigger&quot;).click(function(){
$(this).toggleClass(&quot;active&quot;).next().slideToggle(&quot;slow&quot;);
});
});
 </script>

5. Next, by pressing on ‘Ctrl+F’ again, look for ]]></b:skin> in the code

6. Paste the following CSS code before and above it

/*----- Comment Box by www.MybloggerTricks.com ----*/
h3.trigger {
background: url(http://mybloggertricks.googlecode.com/files/comment-boxbg.png) no-repeat;
height: 44px;
line-height: 46px;
width: 518px; border-radius:4px;
font-family:Arial;
font-size: 1.4em; font-weight: bold;
text-align:left;
color:#A1A1A1;
float: left;
cursor:pointer;
box-shadow: #333 0px 1px 3px;
padding:0 0 0 50px;
margin:10px 0px 10px 10px;
}
h3.active {
background-position: bottom left;
color:#ddd;
}
.toggle_container {
padding-left:10px;
overflow: hidden;
clear: both;
 }

You can change the length of the button by editing 518px. Also, just change the values of the highlighted portion of the above code to change the font color, size, and style of the text.

Next is too provide the text over the bar that hides the comment section.

7. Again, using ‘Ctrl+F’, look for the following code:

<b:includable id='comment-form' var='post'>

8. And then paste the following code below it:

<h3 class='trigger'>Click Here To add Comment</h3>
<div class='toggle_container'>
 <div class='block'>

Now look for </b:includable> and then paste the following code above it:

<p style=' line-height:0px; font-family:Arial; font-size:8px; font-weight:bold; text-align:right;'><a href='http://faq-blogger.blogspot.com/2012/06/how-to-remove-blog-title-from-google.html' style='color:#CAC8C8;'><i>Blogger Widgets</i></a></p>
</div>
 </div>

9. Now hit ‘Preview’ to see the result, and if you’re satisfied, save your template.

And congratulations, you’re done!

Liked It ? Please Share

Comments

8 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. Jessie Basu says:

    nice option to hide comment box… well its not always good as its a way to get real feedback from readers… now its up to you that what exactly you want… nyvez thnx for sharing this info… keep it up… :)

  2. I just looked for something like that.or something that after 5 comment,pass another page…

  3. aPetrov says:

    ooo…. thanks for your nice information ..great blog.I have to change it to embedded just to get the threaded reply. Seems like there are lot of bugs still yet.my blog site is Free music

  4. aPetrov says:

    Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it’s all about avoiding a growing comment spam problem. See our most recent posts where you can comment here

  5. aPetrov says:

    Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it’s all about avoiding a growing comment spam problem. See our most recent posts where you can comment here

  6. JimBim says:

    his great trick is by Wajahat Khan Niazi (a.k.a. lemonadeflirt) from FAQBloggerTricks. It shows you how you can hide your blog’s comment section. This is very helpful if you want to save space on your web page reducing its length thereby minimizing far the user has to scroll down to reach the bottom.

    Basically what this trick’s code does is hide the content of the DIV element that contains your blog’s comment section which is only revealed once you a click of the mouse button while hovering over it.

    Follow the instructions below to try it out on your blog. As always, it is good practice to back up your template first before proceeding on making any changes to the code.
    Software
    From inside your Blogger Dashboard, go to ‘Template’
    Click on ‘Edit HTML’ then the ‘Proceed’ button
    Check the ‘Expand Widget Templates’ box by clicking on it

  7. Bension says:

    nice .love it

  8. Hello it’s me, I am also visiting this web site on a regular basis, this website is genuinely nice and the viewers are actually sharing pleasant thoughts.

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here