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.
66 Responses
testing again.
The toggle for the “other” radio button doesn’t work on my blog. I’m not sure if it’s because most of my CSS is hosted via a server and therefore not directly in my template, or because the code is incorrect.
At this point, I think I’ve screwed up my code…can you check it to see?
Site: http://whatwomenreallythink.blogspot.com
test
test.
is there any way to leave that “other” optional always open(don’t fold it)?
or is there any way to toggle the radio from blogger to other directly, if someone imput there name and web page in the form
I have seen it done by users of this hack. shouldn’t be too hard actually… remove the radio buttons and make a hidden field for the ‘Other’ button… I may look in to publishing a version that’s like that if many users show interest… but most people want users to be able to use their Blogger account, which is why I haven’t done so yet.
whatever
aeqweqweqwe
Woot
one more imte
Hello!
Lots of cool hacks here. I had to bookmark this page instantly.
Homewer, I’m having some trouble with this one. First, the hack breaks the template I use (which happens to be Tictac Blue), but that’s not a big problem because I think that’s normal and I can fix it myself.
Secondly, the hack doesn’t seem to work. After posting a comment I’m redirected to a “Blog not found” page. I upgraded my blog to BETA but reverted back to classic template to try this hack – but since I already did the upgrade, is that what causes the problem or have I made an error somewhere else?
Unfortunately, this hack plain and simple will not work on Blogger BETA. This is something I hope to at least sort of fix soon, since so many people are still requesting it!
All right, I just thought it might work with a classic template, but guess I shouldn’t have changed to BETA at all 🙂
Thank you for replying so quickly, and keep up the good work!
Hi! I cant get this hack to work in my blog (see the url above). everytime I open the site in IE, the Iexplore.exe uses 100% cpu and hangs, with firefox it works, but when you click submit comment nothing happens. Removing the CO .js file from the script made the IE stop crashing, but no lucky when you click the submit comment.
Btw, what is the service you use here in your site for comments? I really liked this “notify me” option
@TioSolid – This is WordPress. Regarding this hack — due to the fact that old blogger is not supported by Blogger themselves anymore and that they may have changed things to break this since then, I really can’t support this anymore. It simply is too buggy with the say their new system works. For a hack for the new blogger see this page.
wow nice script!