Sunday, August 03, 2008

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.

13 comments:

  1. interesting. will have to try this eventually. thanks for the heads up. :)

    ReplyDelete
  2. Great news, but I am not sure if I want to migrate from Disqus that has everything I want.

    ReplyDelete
  3. @scatterhaiku: it is interesting indeed... The good thing about Blogger is that there's always a chance for doing some small modifications

    B-a-r-r-y: yeah right, I learnt Disqus from your blog. It seems very nice and has everything, as you said.

    ReplyDelete
  4. Makasih mas udah SHARING ilmunya lagi, aku mo nyoba ahhhh... :P Btw tampilannya jadi lebih manis dan PEMBACA juga bisa langsung ninggalin comment-nya

    Warm regards,
    Noer

    ReplyDelete
  5. Heloooo... (^_^) pardon me to leave an un-related comment here, it's because i need to say sorry for disappointing you with my previous post last week Farewell to COT Readers i was having a major breakdown at that time, but thanks to your motivational comment, i've re-think about leaving my best buddy, you or internet world.

    So, I'm back and been missing your blog like hell or any blogosphere news. I know i must catch up and promise will get back to your blog again, do my routine as usual (^_^)... and if you're wondering the reason why i almost left, you can read it in my latest post...

    ~^_^~
    Cheerio!

    Trisna's last blog post..Guess what? I'm Back!

    ReplyDelete
  6. @Noer: ho'oh nduk, selamat mencoba ya... smoga berhasil :)

    @Trisna: welkom bek ya nduk... All the best for the project...

    ReplyDelete
  7. nice tutorial. thanks for the tips.

    ReplyDelete
  8. It's a bit out of topic, but I hope you can shade some lights. Still around commenting -- do you (or does anyone) know how to migrate from HaloScan to just regular Blogger Comment? Thanks much.

    ReplyDelete
  9. BigBaNG11:41 PM

    Zttt..., istirahat sejenak. Rasakan "pencerahan" dari buku terbitan kami, MUSLIMONOT dan PASTI ADA JALAN. Silakan mampir!

    ReplyDelete
  10. I am so glad that blogger has decided to do thist! My blog's commenting area is so much nicer now because of that. The whole pop-up thing and CAPTCHA were just so annoying.

    ReplyDelete
  11. Sementara nyobain ngisi form komen-nya dulu. Ternyata enak ya, nggak nyusahin. Lain waktu akan saya coba juga.

    ReplyDelete
  12. Technology Tricks: it's a pleasure...

    bleu: have googled with different key words a couple of times, with no luck... it seems that there's no such hack at the moment. Just be patient for a while, or you need to do manual work...

    BigBaNG: suwun mas...
    An American in France: love it very much...
    Syam AG: dah dipasang kah?

    ReplyDelete
  13. i just stop and read this blog due to this article for me is great article thanks for sharing

    ReplyDelete