Inline Comments for Blogger

Finally Blogger has developed the long awaited inline (embedded) comment form for Blogger, a cool feature that previously Bloggers could only envy to Wordpress blogs. The inline comment form reduces one step of a mouse click, and (hopefully) will encourage visitors to leave comments in a post.

I learnt from Amanda at Blogger Buster, on how to make it in a modified Blogger template. First attempt was a failure, so were a few others. After giving up, I decided to give it another try, and finally succeeded after adding a missing tag.

Then came another problem, the form looked weird. Apparently it was designed for template with a white background. The words "Comment as:" was not visible. After Googling around with no luck, finally I got the answer at the original posting at Blogger in Draft. It was JohnF's comment at the posting that gave me the solution. Thanks John!

The inline comment form is available at Blogger in Draft. For those who did not modify their templates, it's quite straight forward. Just go to your Dashboard, Settings, Comments, scroll down to "Comment Form Placement", check "Embedded below post", hit Save, and you are done.

If you customized your templates, here's the step from Amanda that you need to follow:
  1. Go to Layout, Edit HTML, click "Download Full Template" to backup your template


  2. Check "Expand Widget Templates" box, and find the following codes:
    <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>

    Replace the entire codes with the following:
    <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>


  3. Now, if you have a black background, here's the step you need to take: copy-paste below codes just above "/* Sidebar Content" or anywhere in the "/* Comments" section.

    .comment-form {
    background:#333333;
    border:2px solid #444444;
    padding-left:4px;
    padding-right:4px;
    }
    You can do some experiments by changing the numbers to suit your taste.


  4. Hit "Save Template", and see whether it works.

You won't, however, be able to see the inline comment form in a template using expandable post, such as Hans' Super Pee-A-Boo Post, unless you click the title or go to a single page.
Like | Tweet |