Tạo Form comment giống Worldpress

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).

Demo:


►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 :

Code:

<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:

Code:

<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> :

Code:

<!-- www.jackbook.com --><script languange='javascript'>function showcomment(a,b){varjackbookdotcom = 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:

Code:

<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 :

Code:

<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:

Nguồn bài viết:

Code:

http://mothuthuat.com

Hẻo ơi! Post một bài giới thiệu sơ cái blogger. Minh newbie mà nói kiểu này chắc chết >.<"

hsv007 vào box kiến thức cơ bản nhé.