Blogger now has an inline comment form that is native: http://buzz.blogger.com/2008/10/commenting-made-easier.html
Update 2007-02-08 : Contrary to a bit of a misunderstanding this hack DOES work with the new Blogger out of beta. If you can’t find the code try checking the ‘Expand Widget Templates’ checkbox. I have added a bugfix for the redirection bug some were experiencing.
The old inline comment form is dead to Blogger BETA (or, should I say, the new Blogger). Deader than ever, the form now does absolutely nothing.
Have no fear — there is good news!
Since we must use Blogger’s ugly comment page in some form (because of their new security token system), I wanted to include this in our pages somehow. I thought of making it inline, but discarded this idea because it would look rather dumb (since we can’t style that page) and would be displaying comments twice on the page, etc.
Enter lightbox. The following hack gives you a nice, integrated comment form that still appears somewhat separated (so visitors know you didn’t create that ugliness!). Visitors can close the ‘popup’ without commenting, but if they comment it will close and reload the page automatically. (See a demo on my test blog, but I can’t guarantee it will be there forever. My test blog is for testing and is therefore unpredictable.)
To install the hack, follow these steps:
- Go to the ‘Template’ tab and select ‘Edit HTML’.
- Check the ‘Expand Widget Templates’ box.
- Add this code right before your </head> tag (if you have my calendar hack, or any other Lightbox Gone Wild for Blogger hack, installed, this step in unnecessary):
<script src='http://jscripts.ning.com/get.php?xn_auth=no&id=1093361' type='text/javascript'/>
<script src='http://jscripts.ning.com/get.php?xn_auth=no&id=2655847' type='text/javascript'/>
<link href='http://singpolyma.googlepages.com/lightbox.css' rel='stylesheet' type='text/css'/>
- Find this code:
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
and replace it with this:
<a class='lbOn' expr:href='"#comment-form-" + data:post.id'><data:postCommentMsg/></a>
- If you do not use peek-a-boo comments or have a footer link pointing to the inline comments section (if you don’t know, you don’t) then find this code:
<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>
and replace it with this:
<b:if cond='data:post.allowComments'>
<a class='comment-link lbOn' expr:href='"#comment-form-" + data:post.id'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
- Find this code:
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
And directly after it put this code:
<script type='text/javascript'>
var isLoad<data:post.id = 0;
function checkDeactivate<data:post.id {
if(isLoad<data:post.id > 1) {
//<![CDATA[
document.getElementById('lbContent').innerHTML = '<div style="text-align:center;width:100%;font-size:16pt;font-family:sans-serif;"><br /><br /><br />Reloading...</div>';
//]]>
window.location.reload();
}//end if isLoad
isLoad<data:post.id;++;
}//end function checkDeactivate
</script>
<div expr:id='"comment-form-" + data:post.id' style='display:none;'>
&lt;iframe onload="checkDeactivate<data:post.id src="<data:post.addCommentUrl/>&amp;isPopup=true#commentForm" frameborder="0" style="border-width:0px;width:100%;height:380px;"&gt;&lt;/iframe&gt;
<div style='text-align: right;'><a class='lbAction' href='#' rel='deactivate'><img alt='' src='http://www.ning.com/xnstatic/icn/cross.gif' style='display: inline; width: 10px; height: 10px;'/> Close</a></div></div>
- Save your template