Embedded Comment Form-All comments below Post

Well, you all know the default Blogger Comments appearance...not so nice, right? They open in a new window (or pop-up), and the default design of that page has nothing to do with your template. They are a mess...


So, Blogger decided to give the users the ability to embed the comments below post, so when you open a specific post all the comments will show up in the bottom, together with a quick "post a comment" box for a new one... You've seen this on lots of great sites.
The advantage is, that this style makes it easier for your visitors to read comments, and write them.

Let's do it. First, sign in to your Blogger account (you can do this with Blogger in draft, too: http://draft.blogger.com/.) Then, go to:
SETTINGS ► COMMENTS ►beside COMMENT FORM PLACEMENT, choose Embedded below post. Save Settings.

Now, click on the post title, and you should see your comments (all) of them below your post.
In case you still don't have any comments, write some. Just to test it. You can delete them easily later.

PROBLEMS WITH EMBEDDED COMMENTS
Some problems were reported by users regarding embedded comments. If your Blogger template is quite customized, maybe embedded comments won't appear. Follow these few steps, if you have these problems:

First, back up yor template. Then go to:
DASHBOARD ► LAYOUT ► EDIT HTML ► click on EXPAND WIDGET TEMPLATES in the upper right corner, and find the following part of code (use CTRL + F):

<b:include data='post' name='comments' />

When you have found it, just insert the following line BELOW it:

<b:include data='post' name='comment-form'/>

SAVE Template, and go check if they appear.

If they still don't, try this. Find the following code:

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

You have to REPLACE above code with this one:

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

Thanks to Amanda from BloggerBuster for the great tips...