July 7, 2011

How to Move Comments Below the Embedded Comment Form in Blogger

Commenting is compulsory to communicate with your readers especially on a blog. As a communication tool, you can let them express ideas or contact you through the comment feature. Sometimes you would like to customize the formation of displaying comments. So if you display embedded comment form below each post on past pages, you may find that comments submitted by readers were appearing above the comment form. But what if you prefer displaying comments below the comment form?

Is there any solution to move comments beneath the comment form? Yes, absolutely. If you are using embedded comment form on your blog, you can move comments section and comment form appeared on your comment-enabled pages. So here we gonna alter your template and display comments beneath the comment form. It would be convenient for your visitors, if you have huge sum of comments on your pages. So they don't need to scroll down to the end of page to find your comment form and leave a comment. So if you prefer that way, let's figure out how to move them below embedded comment form. If you are not sure about the comment form you are using is embedded comment form, you can read and find it easily. However this applies only to the embedded comment form.


2. Now click on your Blog Title.

3. Jump to Template tab.

Note: Before editing your template, you may want to save a copy of it. Read How to Back Up Your Template.

4. Click on Edit HTML tab.

5. Now find the code snippet of embed comment form similar to below in your template and remove that code snippet after taking a copy of it.

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>

6. Now find the snippet similar to below in your template and add the embed comment form code snippet right after this code snippet.

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.numComments == 1'> 1 <data:commentLabel/>:

7. Now Save template and Preview your post pages for made changes.

Enjoy :-)

Awesome! Thanks for coming by and taking your time to read this post :) I hope you have learnt something today. Now you can share it with your friends and I'd love to hear from you too.

Related Posts and Categories

Category, , , , ,


* Make sure your comment is genuine and comply with our commenting guidelines.

* Review your email and reply notification settings to receive replies via email.

Unknown said...

did exactly as you described, followed every step - not working, the comments are still above comment box

Mayura De Silva said...

Hi Eugeniu,

Are you using Embedded comment form on your blog? :) And I hope you are not using threaded comments feature. Right?


Artemisia Moltabocca said...

How can I get this to work with threaded comments. I'm trying to style the comment form, but threaded comments won't let me. I've styled the rest of my comment forms on other pages, but not on the threaded embed post page.

Can you help? I've explained the problem on Google Forums:https://productforums.google.com/d/topic/blogger/NfqSlN3VMGU/discussion

I'm going to give your code a try by trying to hack it in between the threaded comments. I hope it works.

Mayura De Silva said...

Hi Artemisia,

I had a post for threaded comment form earlier :) It worked initially at the time that threaded comments has been introduced. But unfortunately the functionality changed again and the trick didn't work out after then. So I had to remove that post from my blog after all.

Threaded comment form is built upon JavaScripts as it's not single level comment form, so as I know we can't change the functionality explicitly dear. You can try applying same steps here for threaded comments, but it won't work out.

But if you wanna revert back to single-level commenting, I can help you out :)


moltabocca said...

Thanks for your quick reply! Actually, I'm trying out this Disqus thing. I noticed it your blog. :)

If I can't change the threaded comments, I might as well use a commenting system that has more features. Actually, your comment popped up on my Disqus dashboard. I hope my comments import correctly though. *fingerscrossed*

If things go SNAFU, I may take you up on your generous offer. Again, thank you.

Mayura De Silva said...

That's a great choice dear :) Personally I recommend Disqus on Blogger too, as it has all the options if you wanna revert back to Blogger default comment system.

The reason my reply shown on Disqus dashboard, 'cause you registered with Disqus and comment here :) It doesn't necessarily mean you have imported your existing comments to Disqus.

If you need you can check this out if you wanna make sure things are OK with Disqus migration ~ How to Install Disqus Comment Platform on Blogger


moltabocca said...

Could you direct me to a post where I can change back to single level commenting on an embedded comment form? I've tried some hacks I found online, but they don't work. Thank you for your continued help.

Mayura De Silva said...


You need to navigate to Other settings in Blogger, and select "Custom" option for Allow Blog Feed setting. Then make sure Per-Post Comment Feeds is set to "None".

You will see single-level comments again :)