Tạo Form comment giống Worldpress

Trang chủ » Thu Thuat Blog » Thủ thuật Blogger » Bạn đang xem:

Tạo Form comment giống Worldpress

Thứ Tư, 8 tháng 4, 2009

Form comment

[FD's BlOg] - Bài viết này mình sẽ đề cập đến việc thay đổi (tạo) giao diện của Form comment trong Blogspot cho đẹp hơn, và có phần giống Worldpress, và cho những ai còn dùng kiểu basic (là mỗi khi post comment phải mở sang một của sổ mới).

Nó có dạng như thế này

►Bây giờ bắt đầu tạo :
1. Vào phần chỉnh sửa Code HTML. (Xin vui lòng sao lưu mẫu của bạn trước khi thay đổi bất cứ điều gì --> đề phòng bất trắc)
2. Nhấp vào phần Mở Rộng Mẫu Tiện Ích.
3. Tìm đọan Code sau :



<b:includable id='comments' var='post'><div class='comments' id='comments'><a name='comments'/><b:if cond='data:post.allowComments'>
.
.
.
</b:includable>

4. Thay thế tất cả đọan code trên bằng đọan Code sau:

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>

<!-- jackbook.com part 1 start -->
<!--
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>
-->
<div class='onepx'>
<dl id='comments-block' style='height: 1px;overflow:hidden;'>
b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>

<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
</div>
<!--
<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</p>
-->

<div id='comment-parent' onmouseover='showcomment("hoverme", "comment-child");' style='margin-bottom: 50px;'>
<h3 id='hoverme' style='display:block;'>
<img alt='Your cOmment"s Here! Hover Your cUrsOr to leave a cOmment.' src='http://img229.imageshack.us/img229/5559/htmlcodeleavecommentfi5.gif' title='Your cOmment"s Here! Hover Your cUrsOr to leave a cOmment.'/>
</h3>

<div id='comment-child' style='border:none; display: none; height:750px; width: 440px; margin-bottom: 5px; background: #fff none; border: 1px solid #FCO;'>
<iframe expr:src='data:post.addCommentUrl' height='100%' scrolling='yes' style='border:none;' width='100%'/>
<br/>
<a href='http://www.jackbook.com/2007/06/how-to-make-readers-leave-comment.html' title='Want to have this on your blogger/blogspot?'>Form Comment in blogger/blogspot</a>
</div>

</div>

</b:if>
<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
</b:includable>

5. Chép tòan bộ code bên dưới ngay trên thẻ </body> :

<!-- www.jackbook.com -->
<script languange='javascript'>
function showcomment(a,b){
var
jackbookdotcom = document.getElementById(a);
jackbookdotcom.style.display = 'none';
jackbookdotcom = document.getElementById(b);
jackbookdotcom.style.display = 'block';}

</script>
<!-- www.jackbook.com -->

6. Tìm đọan Code bên dưới:


<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<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>
</b:if>
</span>

7. Thay bằng tòan bộ code bên dưới :

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.url + "#comments"' >
<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>
</span>

8. Sau cùng là lưu mẫu và xem thử thành quả.

Xong thì nó sẽ có hình như bên dưới: