See this page for a similar hack for the new version of Blogger.
This hack does not work with Blogger BETA.
After considerable use and some feedback from both users and implementors I have redone my inline comments form hack. The new hack should be simpler, cleaner, and XHTML-valid. Previous implementors will have to remove the old hack before continuing.
You might also wish to check out the asynchronous version of this hack 🙂
This hack is now coComment-compatible.
- 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”>
//<![CDATA[function toggleitem(postid,linkid,newtxt,displaytype) {
if(!displaytype) {displaytype = ‘block’;}
var whichpost = document.getElementById(postid);
if (whichpost.style.display != “none”) {
whichpost.style.display = “none”;
} else {
whichpost.style.display = displaytype;
}
if(linkid) {
var lnk = document.getElementById(linkid);
lnk.href = “javascript:toggleitem(‘”+postid+”‘,'”+linkid+”‘,'”+lnk.innerHTML+”‘);”;
lnk.innerHTML = newtxt;
}
}//]]>
</script> - Replace the <$BlogItemCreate$> tag with the following code:
<!– COMMENT FORM –>
<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 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 action=”http://www.blogger.com/login-comment.do onsubmit=”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″></textarea>
<h2 class=”sidebar-title identity”> Choose an identity </h2>
<div>
<div>
<input type=”radio” name=”iden” value=”Blogger” checked=”checked” onchange=”toggleitem(‘cfo<$BlogItemNumber$>’);” />
<label> Your Blogger display name </label>
</div>
<div>
<input type=”radio” name=”iden” value=”Other” onchange=”toggleitem(‘cfo<$BlogItemNumber$>’);” />
<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” onclick=”isSubmit=true;” type=”submit” tabindex=”2″ />
<input value=”Preview” type=”submit” name=”preview” onclick=”isSubmit=true;” tabindex=”3″ />
</p>
</div></form>
</div>
<!– END COMMENT FORM –> - Save your template and republish your blog