Comment Form Above Comment Contents in Blogger Threaded Comment System

I've done this before. Unfortunately, my old tutorial won't work anymore with Blogger's new comment system. Thus the reason why you're seeing this tutorial. So, comment forms are placed at the end of actual comment contents, right at the very bottom of your individual post pages. It does look alright when you don't have much comments in a given post. But personally, I think it is a royal pain in the derriere to scroll all the way towards the bottom, especially when you have lots and lots of comments in your post page. And honestly, I think it might be a little more encouraging to place the comment form right at the top, so that your readers will see it first before having to actually go through all the previously left comments.

This tweak will bring your comment form towards the top of your comment contents, right below the end of your post. I'm referring to the generic comment form of course. The placing of individual reply comment form will not be changed (the comment form that you'll see when you click on the 'reply' link on an individual comment)

Note 1: It is common for the form to load at its usual place first, before appearing at top. Won't be noticeable if you have a fast internet connection.
Note 2: This IS NOT a dynamic view tutorial. Won't work with Dynamic View templates.

Click here for a video tutorial.

Step 1:

First backup your template by going to Dashboard
- Template
- Backup/Restore
- Download Full Template.

Next go to Dashboard - Template - Edit HTML
-Find and delete the following lines (Use Blogger's built-in Search tool):

<div class='comments-content'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='threaded_comment_js'/>
</b:if>
<div id='comment-holder'>
<data:post.commentHtml/>
</div>
</div>

<p class='comment-footer'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='threaded-comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
</p>

The lines to be deleted:

Step 2:

Paste the following code in place of the deleted lines in Step 1:
<p class='comment-footer'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='threaded-comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
</p>

<div class='comments-content'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='threaded_comment_js'/>
</b:if>
<div id='comment-holder'>
<data:post.commentHtml/>
</div>
</div>
New code in place:

Step 3:

Find for </body> in your HTML --> Paste the following code directly above </body>.

<script src='http://code.jquery.com/jquery-latest.js'/>
<script>
var yob = $(".comment-replybox-thread").closest(".comment-thread").parent("div").children(".comment-thread").children(".comment-replybox-thread");
jQuery('.comment-thread ol').before(jQuery(yob));
</script>


The code in place:

You May Also Like