Yee's Blog

以前介绍过Webleon的Blogger页内评论方法，但是升级到Blogger Beta后这种方法也就随之失效了。别郁闷，世界上还有很多人和你一样在忍受着Blogger Beta自带的那个难看又烦人留言系统，不过当高手们试图通过修改以前的JS代码使之适用于新系统时，却被更加Blogger Beta那更加先进的防Spam程序难住了。原来的路走不通了，所以 Singpolyma 另辟蹊径，用一种很巧妙的方法实现了页内评论－Lightbox！（关于Lightbox的Blog应用实例请参看这里）

先解释下原理：Blogger Beta原有的评论方式是点击post a comment，然后进入（可选弹出新窗口）评论页面。Singpolyma 的新思路是，点击post a comment后，让评论页以Lightbox效果的形式（周围全黑，中间是输入框），发完评论后自动恢复到当前页，虽然跟原来的js调用大法有点区别，但这种方式也确确实实实现了“页内评论”。至于实际效果如何，请到这里测试。

实现这个功能，请严格按照以下步骤操作：

1. 进入后台，选“模版“－“修改HTML“.
2. 选中“扩展窗口小部件模板“一项前面的小格子，打钩。
3. 将以下代码插入到模版中的</head>标签的正前方：

   <script src='http://jscripts.ning.com/get.php?xn_auth=no&amp;amp;id=1093361' type='text/javascript'/>
<script src='http://jscripts.ning.com/get.php?xn_auth=no&amp;amp;id=2655847' type='text/javascript'/>
<link href='http://singpolyma.googlepages.com/lightbox.css' rel='stylesheet' type='text/css'/>

4. 查找代码

   <a expr:href='data:post.addCommentUrl' expr nclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>

   替换成

   <a class='lbOn' expr:href='"#comment-form-" + data:post.id'><data:postCommentMsg/></a>

5. 查找代码

   
<b:if cond='data:post.allowComments'>
   <a class='comment-link' expr:href='data:post.addCommentUrl' expr nclick='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 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>

6. 找出以下代码

   <b:loop values='data:posts' var='post'>
   <b:if cond='data:post.dateHeader'>
      <h2 class='date-header'><data:post.dateHeader/></h2>
   </b:if>

   紧接其后加入

   <script type='text/javascript'>
   var isLoad<data:post.id/> = 0;
   function checkDeactivate<data:post.id/>() {
      if(isLoad<data:post.id/> &gt; 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;'>
<iframe expr nload='"checkDeactivate" + data:post.id + "();"' expr:src='data:post.addCommentUrl + "&amp;amp;isPopup=true"' frameborder='0' style='border-width:0px;width:100%;height:380px;'/>
<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>

7. 保存模版，完成！

This entry was posted on 星期四, 十二月 21st, 2006 at 6:17 下午 and is filed under Blogger Hack. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.