Loading post navigation ...
 
 

Pro page

11
Nhận xét

Tạo Form comment giống Worldpress

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

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:

Chúc các bạn thành công.


Enter your mail address:

11

Ngankvn ®

Khó làm quá , ngay cái bước đầu đã ko tìm ra nổi đâu là cái /b:includable rồi :(

FanDung làm một cái Demo cho mình xem với , thấy hấp dẫn thì mới cố gắng đc !!!!

fandung

Thực ra thủ thuật này tạo form comment giống như của blogger hiện giờ thôi. không khác nhiều đâu Ngân,

Thủ thuật này hình như dành cho các blogger bản cũ, không có form comment. Bây giờ đa số các bản beta đều có sẵn form comment, nên thủ thuật này có lẽ không cần thiết cho lắm.

Thủ thuật này là 1 trong những thủ thuật đầu tiên của mình. Hồi đó chỉ nghĩ là post lên để lưu trữ thôi, sau này có gì lôi ra coi lại, chứ đâu nghĩ sẽ làm 1 blog thủ thuật như bây giờ. :D

Ngankvn ®

À !!! Cứ tưởng làm cho cái comments Form của Blog giống đc như ở trên thì tuyệt quá :)

fandung

:D

Ngankvn ®

Buồn :(

vnblognet [dot] com

Cái này dùng cho mẫu blog cổ

Robert

Good, very good! ! ! Thank you to let me see these articles and pictures, it's cool, I'm very excited, which to me is incredibly, I finally found the soul mate and your works not only real, and vivid! I love to see you as soon as possible, hope you update of work!!!yves saint laurent eyewear

Linh Dung VnMart

Cái này em nghĩ nếu mình thiết kế đc cái ảnh cho form comment thì xài ko tồi đâu! Nhưng mà em test thử thì nó ko hiện khung comment chứ! Ko biết bị làm sao?

Linh Dung VnMart

Anh có thể vào xem thử được ko ạ! http://test-blogldv.blogspot.com/2011/05/test.html

Jun Ta

Tôi không nghĩ là nó tối ưu. Có cách nào cho người comment có ảnh đại diện không ? Ý tôi là người dùng không có tài khoản blogspot ~x(

Jun Ta

It is not pretty. :|



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home