Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Monday, January 31, 2011

Place Blogger Comment Form Above Comment Blocks

I have already composed and published another tutorial, and I saw a question on this. So I removed the other post and decided to write on this one instead. Since I've just composed the other lengthy post, I'll be brief on this one. So, when you have an embedded comment form, your comment blocks will appear first, followed by your comment form at the bottom of the post.


UPDATE: THIS TWEAK WILL NOT WORK WITH THE NEW BLOGGER REPLY COMMENT SYSTEM. CLICK ON 'REVERT WIDGET TEMPLATES TO DEFAULT' TO UNDO THIS TWEAK.

The doesn't sound so bad, except when you have lots and lots of comments. One would have to scroll all the way down to look for the comment form. So, why not just place it at the top instead, right after the end of your posts?

Step 1:

If you're using the old Blogger interface: Go to Dashboard - Design - Edit HTML - Back Up (Download Full Template) - Check the box next to 'Expand Widget Templates'

If you're using the new Blogger interface: Go to Dashboard - Template - Backup/Restore - Download Full Template - Close -  Edit HTML - Proceed - Check the box next to 'Expand Widget Templates'

Find and delete the following lines:
<p class='comment-footer'>
        <b:if cond='data:post.embedCommentForm'>
          <b:if cond='data:post.allowNewComments'>
            <b:include data='post' name='comment-form'/>
          <b:else/>
            <data:post.noNewCommentsText/>
          </b:if>
        <b:else/>
          <b:if cond='data:post.allowComments'>
            <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
          </b:if>
        </b:if>

      </p>
The lines to be deleted:



Step 2:

Under the same page, find for <a name='comments'/> - Paste the following lines directly below <a name='comments'/>:
<p class='comment-footer'>
        <b:if cond='data:post.embedCommentForm'>
          <b:if cond='data:post.allowNewComments'>
            <b:include data='post' name='comment-form'/>
          <b:else/>
            <data:post.noNewCommentsText/>
          </b:if>
        <b:else/>
          <b:if cond='data:post.allowComments'>
            <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
          </b:if>
        </b:if>
      </p>
Modified structure in place:


Click on Save Template when you are done.

Optional

If there is too much space below your comment form, you can reduce the gap by adding the code below. Feel free to adjust the value.


If you're using the old Blogger interface: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

If you're using the new Blogger interface:
Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

.comment-form{
margin-bottom: -180px !important;
}

That will be all, have fun with this one.

29 comments:

  1. your weblog very usefullymy friend, and so cleary n explanation...nice
    nice to meet you...
    Beben si bloglang anu ganteng kalem tea \m/

    ReplyDelete
  2. @Beben: Glad you find it that way mate. Enjoy your stay here.

    Regards.

    ReplyDelete
  3. Very nice thought...I have scrolling to the bottom!

    ReplyDelete
  4. Very nice thought...I have scrolling to the bottom!

    ReplyDelete
  5. @Doublebanker: No problem at all. Happy to help. Cheers.

    ReplyDelete
  6. This is awesome. I often find it annoying when people host giveaways and I have to scroll ALL the way through the 100+ entries just to leave my own. Thanks a bunch. I think this will make it much easier for readers.

    www.luxeboulevard.blogspot.com

    ReplyDelete
  7. @Stephanie {Luxe Boulevard}: You're welcome. This is a solution that I posted at Blogger Help Forum. Someone had the same problem as you - annoyed to scroll through all the comments just to find the comment-box. Glad you find it helpful.

    Cheers and God bless.

    ReplyDelete
  8. I couldn't ever edit html or edit anything. Can you do it for me?

    ReplyDelete
  9. @Just Cause Just Facts: Yes I will happily do it for you. You'd have to invite me as an author by going to Dashboard - Settings - Permission. When I've accepted the invitation, you have to 'Grant Admin Priviliges' by going to 'Permission' again. Cheers.

    ReplyDelete
  10. @Arti: Kudos to you for finding the right page. And you're welcome. Cheers and God bless.

    ReplyDelete
  11. Works great except if someone adds a comment as anonymous and has to enter verification code the bottom of the verification box overlaps with post underneath

    ReplyDelete
  12. @Anon: Nice spot. You can prevent that from happening by skipping step 3, but that will leave a gap between your form and comments. Unfortunately, the comment form is not built to be adaptive, it has a fixed height.

    ReplyDelete
  13. Hello. You're already helping me with so much! I'm exploring your site and finding sooooo many useful posts. I tried to do this comment post and everything works except the last step...adding the code to the CSS. I keep adding it and "apply to blog" but every time I go to check there is still a large space between the comment box and the first comment. And when I go back to check the CSS, the code is gone. I've attempted it about 5 times now and every time I hit "Apply to blog" and every time when I go back into it, that code is gone like it didn't save it. I don't get it!

    ReplyDelete
  14. That could be the reason why you're having problem adding the 'no-shadown' CSS code as well. I think something is wrong with the browser you are using. If you are using Internet Explorer, switch to other browser and try again. If you're using any other browser, again, use some other browser and try again. I recommend Google Chrome. Cheers.

    ReplyDelete
  15. Thank you Very Much for the post...
    I could now encourage all my readers to post a comment immediately below a post, without necessity of scrolling down!!

    Thank you again!

    ReplyDelete
  16. @AALUNGA: Glad you like this feature. It could come handy in some times, when you have lots of comments already published and one has to scroll all the way down to Davy Jone's locker to look for the comment form.

    ReplyDelete
  17. I've done it using the guide above. But why is there a space below? A huge space between the comment box and the comment form.

    ReplyDelete
  18. @Allen: It seems like you're using a third party comment system. If you tried this on a Blogger comment system, gimme the link your blog. I'll have a look.

    ReplyDelete
  19. Thanks for the tip! @Andrejoy - I had the same issue. I had to add the CSS directly in the HTML for it to work. You might want to try that.

    ReplyDelete
  20. I loved this tweak buI just got one problem, I got so much space between the form and the comments, just wondering how to solve this,
    here is my blog
    LALAINE'S FICBOOKREVIEWS

    THank you!

    ReplyDelete
  21. @lalaine: Your form looks fine from my end, see the screenshot below.



    In any case, you can control the gap between the form and the comments by inserting the followinf CSS to your Template Designer. Play with the value -35px.

    .comment-form iframe{
    margin-bottom: -35px !important;
    }

    ReplyDelete
  22. this is a lovely tweak i have not been able to find something like this in years

    ReplyDelete
    Replies
    1. Glad you find it helpful :)

      Cheers..

      Delete
    2. hello, how can I put recent comment to above??

      Delete
    3. Hi.. Above what? Not quite following..

      Delete
  23. I was the first to your blog. I like it here. I will often come to.

    ReplyDelete
  24. Thanks for sharing this article with us..

    ReplyDelete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.