Show Comment Box above Comments on Blogger

Generally in blogger threaded comment system comment box placed just below the all comments content.If any reader have to comment on that of your post he/she have to scroll at the bottom to make that comment.If your blog post doesn't contain huge comments then it's ok but if if it do contains lots and lots of comments then this is really annoying for any reader after going through all these comment at the bottom and then comment.It is really painful and waste of little time for them also.Why should they do that for you.Another thing is it's your responsibility to always make your blog user friendly so that you can get well traffic and comments.So here we're going to share about how to place that comment box above comments,you may see the screenshot as a demo.



 Must Read : Enable Blogger threaded Comment System

Show Comment Box Above Comments

Step1:

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

• Then go to Dashboard - Template - Edit HTML --> Proceed --> Check the box next to 'Expand Widget Templates' - Find and delete the following lines:

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

<!-- comment form before comment content starts --> <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> <!-- comment form before comment content ends -->

The code in place:

• Now save the template and you are  all done.

Note: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.





 Must Read : Show Comment Message Before Comment Box on Blogger

Hope it'll work on your blog perfectly.if you're facing any kind of problem use the below comment box for help.Thanks for visiting.

Articles You May Like