See this page for a similar hack for the new version of Blogger.
This hack does not work with Blogger BETA.
This is a new, partly experimental, upgrade to my inline comments form. Credit goes to Aditya of The Last Word for inspiring this hack. Comments are posted without ever leaving the post page and then the page is reloaded. You never see the Blogger comment page unless there is an error. The form is still coComment compatible and supports posting using your Blogger account 🙂
- Word verification for comments must be turned off (to do this go to the ‘comments’ tab in your blog settings, scroll to ‘Show word verification for comments?’ and select ‘No’)
- Turn comment posting by anonymous users on (to do this go to the ‘comments’ tab in your blog settings, scroll to ‘Who Can Comment?’ and select ‘Anyone’)
- Insert the following code into the <head> section of your blog template :
<script type=”text/javascript” src=”http://jscripts.ning.com/get.php?xn_auth=no&id=1338954;
<script type=”text/javascript”>
//<![CDATA[
var comment_form_template = ‘<div class=”comment-poster”>[[AUTHOR]]</div>\n’
+ ‘<div class=”comment-body”><div class=”innerCmntBody”>[[BODY]]</div></div>\n’
+ ‘<div class=”comment-timestamp”><a href=”[[PERMALINK]]” title=”comment permalink”>[[DATE]]</a></div>\n’;
//]]>
</script> - Insert the following code directly after your <body> tag:
<iframe id=”comment_form_target” name=”comment_form_target” style=”display:none;” onload=”if(comment_form) {check_comment_posted();}”></iframe>
- Replace the <$BlogItemCreate$> tag with the following code:
<div id=”comment_form_preview<$BlogItemNumber$>”></div>
<ItemPage>
<script type=”text/javascript”>var blogTool = “Blogger”;
var blogURL = “<$BlogURL$>/”;
var blogTitle = “<$BlogTitle$>”;
var postURL = “<$BlogItemPermalinkUrl$>”;
var postTitle = “<BlogItemTitle><$BlogItemTitle$></BlogItemTitle>”;
var commentAuthorFieldName = “anonName”;
var commentAuthorLoggedIn = “false”;
var commentFormID = “cformtag<$BlogItemNumber$>”;
var commentTextFieldName = “postBody”;
var commentButtonName = “post”;
var cocomment_force = false;</script>
<script id=”cocomment-fetchlet” type=”text/javascript” src=”http://www.cocomment.com/js/cocomment.js </script>
</ItemPage><ItemPage><a href=”javascript:toggleitem(‘cform’);”>Post a Comment</a>
<div style=”display:block;” id=”cform”></ItemPage>
<MainOrArchivePage><a href=”javascript:toggleitem(‘cform<$BlogItemNumber$>’);”>Post a Comment</a>
<div style=”display:none;” id=”cform<$BlogItemNumber$>”></MainOrArchivePage>
<form target=”comment_form_target” id=”cformtag<$BlogItemNumber$>” action=”http://www.blogger.com/login-comment.do onsubmit=”comment_form_submit(this);isSubmit=true;” method=”post”><div>
<input type=”hidden” name=”blogID” value=”<$BlogID$>” />
<input type=”hidden” name=”postID” value=”<$BlogItemNumber$>” />
<div>
<h2 class=”sidebar-title form-title”><label class=”cbody”>Leave your comment </label></h2>
<h2 class=”sidebar-title”> You can use some HTML tags, such as <b> <b>, <i>, <a> </b> </h2>
<textarea name=”postBody” class=”comment” rows=”8″ cols=”40″ onkeyup=”comment_form_preview(this.form);”></textarea>
<h2 class=”sidebar-title identity”> Choose an identity </h2>
<div>
<div>
<input id=”idenBlogger<$BlogItemNumber$>” type=”radio” name=”iden” value=”Blogger” checked=”checked” onchange=”toggleitem(‘cfo<$BlogItemNumber$>’);comment_form_preview(this.form);” />
<label> Your Blogger display name </label>
</div>
<div>
<input type=”radio” name=”iden” value=”Other” onchange=”toggleitem(‘cfo<$BlogItemNumber$>’);comment_form_preview(this.form);” />
<label>Other</label>
<div style=”display:none;” id=”cfo<$BlogItemNumber$>”>
<table style=”margin-left: 4em;” cellpadding=”0″ cellspacing=”0″>
<tr> <td colspan=”2″ style=”padding-top:.4em;position:relative;left:-4em;” align=”left”> These fields are optional, but I would appreciate it if you filled them out. </td></tr>
<tr> <td> <label> Name </label> </td>
<td> <div class=”errorbox-good”> <input type=”text” name=”anonName” value=”” maxlength=”100″ class=”text” /> </div> </td> </tr>
<tr> <td> <label> Your web page </label> </td>
<td> <div class=”errorbox-good”> <input type=”text” name=”anonURL” value=”” maxlength=”100″ class=”text” /> </div> </td> </tr>
</table>
</div>
</div>
<div class=”diff-user”> Or you can sign in <a href=”http://www.blogger.com/login.g?r=http%3A%2F%2Fwww.blogger.com%2Fcomment.g%3FblogID%3D;$BlogID$>%26postID%3D<$BlogItemNumber$>”> as a different user</a>.</div>
</div>
</div>
<div class=”errorbox-good”> </div>
<p class=”buttons”>
<input style=”margin-right:.3em” name=”post” value=”Publish Your Comment” class=”publish” type=”submit” tabindex=”2″ />
<input value=”Preview” type=”submit” name=”preview” tabindex=”3″ />
</p>
</div></form>
</div> - Save your template and republish your blog
Note to advanced users : The variable set in step 3 is the template used by the script to generate previews. You can modify it to be closer to the code generated for comments on your blog so that users get a better preview 🙂 Some may also wish to browse the JavaScript source.