Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Saturday, October 20, 2012

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

60 comments:

  1. Comment left for demonstration purposes..

    ReplyDelete
    Replies
    1. HI,
      YOGA HOW CAN WE DRAW VERTICAL LINES TO MAKE PARTITION IN BETWEEN THE TEXTS.FOR EXAMPLE YOUR YOU MIGHT ALSO LIKE THIS.... THERE ARE FOUR PARTITIONS. HOW DID YOU DO THAT?
      THANK YOU.

      Delete
    2. Hi Chaudhary,

      It depends. The 'You might also like this' widget in my blog is called Link Within widget. If you want lines between other elements, we can add it easily using some CSS, but we need to inspect and find out the ID of that element. If you could be more specific on where you'd like to add a separator line (in your blog), I could provide you with the code that you need.

      Sorry for the late reply btw.

      Cheers.

      Delete
  2. This comment has been removed by the author.

    ReplyDelete
  3. Replies
    1. That's great! Thanks for feedback Hootin Anni :)

      Delete
  4. its work and your all post work for me
    i have another problem it was my blog only shows one post but in setting shows 8 post why is this happen ?
    Do you have any suggestion

    ReplyDelete
    Replies
    1. Hi Jiban,

      Could be due to auto-pagination. What's your blog's address?

      Delete
    2. www.samjhanakophool.blogspot.com

      Delete
    3. I've got two theories:

      1) Your pages might have been affected by the auto-pagination feature. Read more here.
      2) Your template is made that way and/or is erroneous.

      Unfortunately, I couldn't find out which one of these two theories is correct. You could do a little trial-and-error though.

      If it is auto-pagination, you could try to remove the amount of HTML in your blog that needs to be loaded, so that more posts can be fetched. Trimming down your sidebar and gadgets might be a good idea.

      If this is a template-related problem, I won't be able to help much - it'd be best if you could contact the author of the template.

      All the best!

      Delete
  5. Hi Yoga,

    I know this tutorial is not for dynamic vue, but I'd like to know if it's possible to resolve my little problem in the comment form.
    I have a piece of grey background, and I don't know how to remove it.
    I'd like a white background, in all the comment form, in fact.

    Thanks a lot for all your help.

    ReplyDelete
    Replies
    1. Hi Valerie,

      Sorry for the late reply. Paste the following code to your 'Add CSS' box:

      .blogger-comments .comments-content .comment-replies{
      background-color: white !important;
      }

      Let me know how it goes. Cheers :)

      Delete
    2. Thanks a lot Yoga, it works !

      I have learned a lot with your blog, so in the future, if you need something that can help you, don't hesitate to ask me.

      All the best !

      Delete
  6. Hi Yoga, thanks for this tutorial: it worked immediately! Compliments for your job.

    ReplyDelete
  7. Good morning everyone.
    Is there a way to write Merry Christmas on the first post?
    Thank you very much and merry christmas;)

    ReplyDelete
    Replies
    1. Hi Francesco,

      Are you referring to comment posts? I'm afraid we can't change the order of comments.

      Delete
  8. Thanks a lot, its work very well.

    ReplyDelete
  9. Hi! Thank you for this article. It's very helpful. I'm just wondering if you could also help me. I want to remove the message "No comments" and "____(indicating the number of comments) Comments" on top of the comment form. Do you know how I can do that? By the way, I'm not using Dynamic View template. Thank you so much.

    ReplyDelete
    Replies
    1. Hi MC,

      Try this. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      .comments h4{
      display: none !important;
      }
      #comment-post-message{
      display: block !important;
      }

      Cheers :)

      Delete
    2. It worked! You're a genius! Thank you so much, Yoga. :)

      Delete
    3. Hiya - I'd also like to do this but seems as if Google changed the Template Designer so I'm not sure how to find out where to paste the code?... Could you please explain based on the new designer?

      Thanks :)

      Delete
    4. Hi Martin,

      This tweak is still relevant, unless if you're using a Dynamic View template of course. What's your blog's address btw?

      Delete
  10. I share your tutorials on my blog, :)

    ReplyDelete
  11. Hi Dear
    I tried to do this. But I have a problem when I arrive at the PROCEED, when I click on Edit HTML I don't have a PROCEED option or buttom ?? How can I do this then?? Would be great if you could help me!!!! Thank you very much!!!!

    www.limaswardrobe.com

    ReplyDelete
    Replies
    1. Hi Lima,

      Blogger change their interface all the time. They've gotten rid of the 'Proceed' button now. Just ignore that and follow the rest of the steps as it is..

      Cheers :)

      Delete
    2. Hi Yoga, it seems the 'Expand Widget Templates' option is gone too. I can't apply the steps. What should I do? Thank you.

      Delete
    3. Hi Maris,

      Blogger is constantly changing these stuffs, it's becoming increasingly hard to keep track with them. Anyways, just ignore the 'Expand Widget Template' part and go ahead finding the lines above :)

      Cheers!

      Delete
    4. That's my problem though. When I search for the lines, it finds nothing in the code.

      Delete
    5. Hi Maris,

      I've just tried the steps above in one of my test Picture Window blogs to see if the tutorial is still valid, and it's still working:
      http://yoboytestblog17.blogspot.com/2013/04/transformers.html

      I suggest you use Blogger's built-in search-tool to find the line. And search only for the first line of the code, as the search-tool won't work well with multiple line search queries. In other words, search for <div class='comments-content'> , and once you're 'jumped' to the code's location, manually highlight the rest of the lines and delete them (to perform Step 1). Carry on with the rest of the steps from thereon.

      Cheers!

      Delete
    6. Thank you so much Yoga. I overlooked your instruction to use Blogger's built-in Search tool that's why I couldn't find the lines. You're a real lifesaver!

      Delete
    7. No biggie. Glad you go it sorted :)

      Delete
  12. Hi Yoga,

    Thanks for the tutorial - it's been super helpful. I have another question - how do you customise the generic embedded comment form (blue publish button, grey preview button, notify me)?

    I have tried looking into the source code and trying to alter the CSS for #postCommentSubmit {
    background-color: #4d90f0;
    border: 1px solid #3079ed;
    color: #fff;
    font-weight: bold;
    margin: 8px 0 0 18px;
    }
    (which is the blue publish button) but I am getting no results.

    Thanks!! :)

    ReplyDelete
    Replies
    1. Hi Judy,

      Unfortunately, the new comment form is embedded within an iFrame element. I've had no luck altering elements within an iFrame box :(

      Delete
  13. I am in serious trouble Yoga, i just followed your prompt to change the comment position and I must have deleted something or done something wrong in the process, and not my whole blog is not loading at all. Please Help…I know it is not your fault but i must have done something wrong. I backed up my template but even that is not loading, it is having an error message. Can you help me. My blog is www.comfortnotes.org and I can send my a copy of my HTML code by email. what email to use?

    ReplyDelete
  14. Hi Yoga, I am off panic mode and I was able to try again and restore my blog by using the template I had saved…i did not read your bold blue print that said not for dynamic views…so disregard my comment, problem solved and thanks for all your help…love this blog a true life saver. Thank you and God bless you Yoga for your work and patience.

    ReplyDelete
    Replies
    1. Ah.. Glad you have got it sorted Sheila :)

      Delete
  15. Hi there! I know my question may be on the wrong area. I have a problem with my comments area in my blog. When I respond/ reply to comments my icon (the one that appears on the left) is way too big, like 300x300 pixels and it does not appear on the left anymore, it appears above my response because it is too big.

    ReplyDelete
    Replies
    1. That's disastrous. More than one thing could be broken in your comment. I suggest we restore the comment structure to its default, before we attempt any manual fix. First, backup your template by going to Dashboard - Template - Backup/Restore.

      Next, go to Dashboard - Template - Edit HTML - Revert Widget Templates to Default - select 'Blog1' - then click on 'Revert selected widgets'.

      Let me know how it goes.

      Delete
  16. Hi there! I just have a question though, if I revert the widget to templates default, will it remove everything I have done with the template like the color changes in the sidebar, the header etc. This is what I am also concerned about and I am starting to freak out. Thanks for your previous response.

    ReplyDelete
    Replies
    1. There's a big chance it might. But usually it only removes hard-coded changes - means the changes/mods that you have done by accessing the Edit HTML page. In any case, make a backup of your template before making any changes. That way, you can always restore to your existing template in case you lose your changes.

      Delete
  17. Hi there! Did exactly what you said and it worked, none was changed except my problem! Thanks a lot!

    ReplyDelete
  18. Hi, it worked well but I have one problem... There's supposed to be a border (an image separatiing the post and the comments to be exact) after the linkwithin but now it's gone.. The comment form is overlapping it.

    here's my blog http://www.goddessindisguise.com

    ReplyDelete
    Replies
    1. Hello,

      This should fix it. Add it to your CSS:

      .post-outer .comments{
      position: relative;
      top: 200px !important;
      }

      Delete
  19. Nice!! Thanks for your tweak.. :-D

    ReplyDelete
  20. It seems funny that this article promotes the advantages of an "add comment" box preceding the comments, but its own box is at the end as usual. Nevertheless, I think it will be good on my blog even though I get only a handful of comments for each of my posts.
    Thank you for the info.

    ReplyDelete
    Replies
    1. I had to put it at the end of the posts to discourage questions being asked here in the comment section. The number of comments you get can be overwhelming sometimes.

      Delete
  21. Thanks c:

    http://reyhanrainbow.blogspot.nl/

    ReplyDelete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.