How To Expand/Collapse Blogger Comments

Posted by Lasantha Bandara on February 28th, 2010 File Under : comments, java script17 Comments

Do you like to show and hide your blogger comments?If your blog have large number of comments this will very helpful to you.Because if there are many more comments in your blogger posts, your blog post can be very long.This will be a interrupt to your readers.So if you like add this trick to your blogspot blog,then folow the steps below.

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates".

3.Scroll down to where you see </head> tag .

4.Copy below code and paste it just before the </head> tag .

<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "Show Comments";
}
else {
ele.style.display = "block";
text.innerHTML = "Hide Comments";
}
}
</script>

5.Now find below code block:

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

<b:loop values='data:post.comments' var='comment'>
        <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
          <b:if cond='data:comment.favicon'>
            <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
          </b:if>
          <a expr:name='data:comment.anchorName'/>
          <b:if cond='data:blog.enabledCommentProfileImages'>
            <data:comment.authorAvatarImage/>
          </b:if>
          <b:if cond='data:comment.authorUrl'>
            <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
          <b:else/>
            <data:comment.author/>
          </b:if>
          <data:commentPostedByMsg/>
        </dt>
        <dd class='comment-body'>
          <b:if cond='data:comment.isDeleted'>
            <span class='deleted-comment'><data:comment.body/></span>
          <b:else/>
            <p><data:comment.body/></p>
          </b:if>
        </dd>
        <dd class='comment-footer'>
          <span class='comment-timestamp'>
            <a expr:href='data:comment.url' title='comment permalink'>
              <data:comment.timestamp/>
            </a>
            <b:include data='comment' name='commentDeleteIcon'/>
          </span>
        </dd>
      </b:loop>

</dl>

Note : Blue colored code can be different.Specially consider the Green color code.
( <dl expr:class='data:post.avatarIndentClass' id='comments-block'> and </dl> )

6.Now Replace above code with below code :

<a href='javascript:toggle();' id='displayText'>Show/Hide Comments</a> <div id='toggleText' style='display: none;'>

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

<b:loop values='data:post.comments' var='comment'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
 <b:if cond='data:comment.favicon'>
   <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
 </b:if>
 <a expr:name='data:comment.anchorName'/>
 <b:if cond='data:blog.enabledCommentProfileImages'>
   <data:comment.authorAvatarImage/>
 </b:if>
 <b:if cond='data:comment.authorUrl'>
   <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
 <b:else/>
   <data:comment.author/>
 </b:if>
 <data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
 <b:if cond='data:comment.isDeleted'>
   <span class='deleted-comment'><data:comment.body/></span>
 <b:else/>
   <p><data:comment.body/></p>
 </b:if>
</dd>
<dd class='comment-footer'>
 <span class='comment-timestamp'>
   <a expr:href='data:comment.url' title='comment permalink'>
     <data:comment.timestamp/>
   </a>
   <b:include data='comment' name='commentDeleteIcon'/>
 </span>
</dd>
</b:loop>

</dl>

</div>

7.Now save your template and you are done.

File Under : comments, java script

17 Responses to “How To Expand/Collapse Blogger Comments”

  1. Beben says:

    nice trick...
    by the way if we have the jquery script on the template, we can put a script plugin for make a expand/collapse...

  2. farula says:

    I found that minima template have not
    dl expr:class='data:post.avatarIndentClass' id='comments-block'
    so what do I do?

  3. Anonymous says:

    ...

  4. Anonymous says:

    Very Interesting!
    Thank You!

  5. Anonymous says:

    Visit http://www.dofollowarticles.com to post articles in the following categories: brazilian, multiples, occult, citisimplicity, genes, toolbox, mozilla and more...

  6. أثير العاني says:

    Many Thanks

  7. Seo of Grafis Idea's Creativity Content Writing says:

    maNTAP, ITS WORKS FOR ME ^_^

  8. acacicu says:

    like this,,

  9. Jeweled Chavon says:

    thank you so much!!

  10. Huỳnh Nhật Hà says:

    Hi Thank you

  11. Anna says:

    How do i apply this to bloggers minima template. the minima template dose not have
    dl expr:class='data:post.avatarIndentClass' id='comments-block' in the html

    thank you
    anna

  12. nees says:

    How do i apply this to bloggers minima template.

  13. John says:

    Good post, useful tips.
    Thanks for sharing it.

  14. Civilax says:

    Great..
    Very Useful ..

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.