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.