Update: This blogger trick is now depreciated. There is a new much better way here: Comment Form Under Post On Blogger, The New Way. Thanks.

Comment Form Under the Post in Blogger

Sorry if the title is a little bit too long, well, i don’t know what should i titled it :)
Finally i changed the title, thanks Ms Kumiko for your idea ;)

We know that in blogger.com / blogspot.com readers must click on the new page or new popup window just to leave a comment on our articles. that sometime just make them (well at least to me) too lazy to leave a comment, even they want to.

it’s true that blogger/blogspot is not like wordpress, in wordpress, we can just leave a comment on the post page. so, why can’t we have the same too on blogger/blogspot ?

we can actually :)

here is the step.

if you are looking for this same hack for old blogger / classic blogger, please go to this post created by Avi Alkalay.

Please backup your template first before changing anything.

1. Go to your dashboard - > control panel - > edit html
2. Tick the Expand Widget Templates
3. Find this html code below

<b:includable id='comments' var='post'><div class='comments' id='comments'><a name='comments'/><b:if cond='data:post.allowComments'><h4><b:if cond='data:post.numComments == 1'>1 <data:commentLabel/>:<b:else/><data:post.numComments/> <data:commentLabelPlural/>:</b:if></h4><dl id='comments-block'><b:loop values='data:post.comments' var='comment'><dt class='comment-author' expr:id='"comment-" + data:comment.id'><a expr:name='"comment-" + data:comment.id'/><b:if cond='data:comment.authorUrl'><a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a><b:else/><data:comment.author/></b:if><data:commentPostedByMsg/></dt><dd class='comment-body'><b:if cond='data:comment.isDeleted'><span class='deleted-comment'><data:comment.body/></span><b:else/><p><data:comment.body/></p></b:if></dd><dd class='comment-footer'><span class='comment-timestamp'><a expr:href='"#comment-" + data:comment.id' title='comment permalink'><data:comment.timestamp/></a><b:include data='comment' name='commentDeleteIcon'/></span></dd></b:loop></dl><p class='comment-footer'><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a></p></b:if><div id='backlinks-container'><div expr:id='data:widget.instanceId + "_backlinks-container"'><b:if cond='data:post.showBacklinks'><b:include data='post' name='backlinks'/></b:if></div></div></div></b:includable>

4. replace all code above with this new html code below

Get The COde Here

(Right click - Save target as or Save link as)


Note: sometime, somehow, if you copy that code, the single quote ‘ character will change to this symbol `
i really have no idea how could that happen. but if it so, please change it back to single character again ‘ to make it work.

Update:
in the code above, you’ll see this line :

http://lifewg.googlepages.com/html-code-leave-comment.gif

That is this image source
image source

You can change that image with your own image if you want to.

5. copy all this html code below on top of your </body> it’s usually second last line of your html code.

<!-- www.jackbook.com --><!-- this to hide and show el --><script languange='javascript'>function showcomment(a,b){var jackbookdotcom = document.getElementById(a);jackbookdotcom.style.display = 'none';jackbookdotcom = document.getElementById(b);jackbookdotcom.style.display = 'block';}</script><!-- www.jackbook.com -->

6. Find this code below:

<span class='post-comment-link'><b:if cond='data:blog.pageType != "item"'><b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a></b:if></b:if></span>

7. Change or replace with this code below:

<span class='post-comment-link'><b:if cond='data:blog.pageType != "item"'><b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.url + "#comments"' ><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a></b:if></b:if></span>

8. then after you did step #7, say thank you to me ;)
9. and then click on the “Save Template” button.
10. Look at your blog now, it should now has a commenting system under each post.

how is it? cool isn’t it :)

There are 2 formats of blogger commenting look,
One is in a new popup window and the other is not.

Make sure to set it on a popup window to have a same format as mine on this blog.

(I bold and highlighted it because seems not everyone paying attention on this :)

Popup Window will let you have all submitted comments placed on top of the comment form, so it’s good rather then have those placed on the left side of the comment form, so your readers have to scroll it to right first if they want to leave a comment.

But you can try both of them to see the differences anyway.

Update:

If you still have any trouble with this hack, you can download this template. This is an example of template already installed by this hack.

Update:
Please Read here about the new simple and great way to have a comment form under post in blogger with haloscan. (with HaloScan)

Update for above update:
I really disappointed using haloscan on my site. i wish i didn’t install it on the site :( please read here: should we use Haloscan if you wanna know why. thanks

Facts, some cool with this hack:

1. because it uses iframe, so it works in it’s own area, in other words, it’s like use an AJAX on our comments. so readers / commenter can see their comments immediately after they click on the submit comment button. isn’t that cool?! :)

2. Because this feature usually only exists on wordpress, some people think this blog powered by wordpress. they wrong! :)

3. found another one ? please tell us on the comment below, and i will added it with your link ;)

Thanks for trying this.

Have Our Articles Sent To Your Email, Free!

Blogging Related Only:


All Articles:

Readers who viewed this page, also viewed: