How To Place Blogger Comment Form Above Comment Blocks

 How To Place Blogger Comment Form Above Comment Blocks 

Blogger is trying to improve there comment system day by day but now also there are lot of error are there to fix.In blogger, comment form is below comment block which is not good for blog because if your blog post is having lot of comment then user need to scroll down for commenting on your blog and it reduces chance of getting more comment.In this post I will give you are easy tutorial by which you can place blogger comment form above comment blocks.

Before

After

In above picture you can easily see that comment form is above comment block, if you want to add this type of system in your blog then follow below steps-

Step 1

• Go To Blogger Dashboard>>Template>>Edit HTML>>Proceed>>Check the box next to 'Expand Widget Templates'
• Now find below code and delete it.

 <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>

 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>

Step 3

• Now find </body> and paste below code just above it.

<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>

huh! Finally click on Save Template button and enjoy the change.