13 February 2013

Show Comment Box above Comments on Blogger

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


    • 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

    13 comments: Leave Your Comments

    1. This would be a nice customization to make the comment box look better.

    2. Thanks for the tip! Helpful, as always! :)

    3. will this work with the new reply to comment feature? I was reading another tutorial for the same topic and saw that it wont work for the feature. Just want to make sure.

    4. how do you make the comment box appear at the end of the posting like how it shows now, showing on the home page. It now shows the word comments at the bottom and you have to click on it.

      Ex: bestfbkl.blogspot.com

    5. I found that using only step three worked perfectly

    6. thnx a ton....works just perfect