Chia sẻ thủ thuật blogspot - blogger

luat1x1

11/21/2011

Khung comment đẹp cho Blogger

blogger comment form
   Hôm nay mình xin giới thiệu tới các bạn đoạn code của một khung comment khá đẹp, phong cáchWordpress, có sẵn nút Reply. Code này đã được chuẩn hóa để có thể áp dụng trên mọi template.

Demo

Đầu tiên, bạn xóa hết các đoạn CSS của khung comment cũ trong template, chúng thường có dạng:





#comments-block {...}
.comment-body {...}
.comment-footer {...}
......
Tiếp theo, chèn đoạn CSS sau phía trên </b:skin>

.comments-block a,.comments-block p,.comments-block a img{margin:0;padding:0;outline:none;border:none}
.comments-block{width:600px;background:#fff;padding:10px;font-family:Arial;line-height:18px}
.comments-block .arrow{float:left;margin:22px 0 0 6px;display:block;width:8px;height:16px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioz7wp26v6UEt9ekbuRpmhaF245EKO4VagAVhl5_GhaMNPOanw-uO_yHoPZIVf4vKwxGAeQ44Lg-J7zPTy6rDleegZ6F9P8W8VihazS3-UhoHoa6p7BkMg7jHrN0Hc2bzJM8O43hA18Tw/) no-repeat}
#comments-box{float:right;width:510px;margin-bottom:10px;border:5px solid #e3e3e3;border-radius:8px}
.comments-avatar{float:left}
.comments-meta{padding:5px;background:#F1F1F1;border-bottom:1px solid #E3E3E3}
.comments-meta{font-size:18px}
.comments-meta a{font-size:18px;color:#0E6284;text-decoration:none}
.comments-timestamp{color:#0E6284;font-size:12px}
.comments-body{font-size:13px;padding:5px;background:#fff}
a.comments-reply{margin:10px 10px 0 0;display:block;width:68px;height:28px;float:right}
.avatar-image-container{width:60px;height:60px;padding:2px;border:1px solid #ccc}
.avatar-image-container img{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNddXm1epz9_vWEwqs86h_B08PVn6JfnHBMs1Tpj9goslLNzC-YHGd9Z8FsYtkxrgr_bJII536Wq6WBk2WTHPd7OlKEy7HVUh42F1Kvk8vrCKYpyGJKl_DYz4OmXsOhXg0tbwrkZE95mc/) no-repeat;width:60px;height:60px}

Tiếp tục click chọn mở rộng mẫu tiện ích, tìm đến đoạn sau:
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
...........
</b:loop>
</dl>

Đoạn code này khá dài và có thể khác đôi chút trên từng template, thay thế toàn bộ đoạn ở trên bằng:

<div class='clear'/>
<div class='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<div class='comments-avatar'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
</div>
<div class='arrow'/>
<div id='comments-box'>
<a class='comments-reply' expr:href='&quot;https://www.blogger.com/comment.g?blogID=6885746016973304322&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E%20%3A#form&quot;' onclick='javascript:window.open(this.href,&quot;bloggerPopup&quot;,&quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=650,height=450&quot;);return false;' rel='nofollow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUc_w5-_h0FTT-vTtRoGPf32PF7Hh32vdQkXxYAGItYYzWGCehm543ukGtIWVNYdONV8yJgQirwlnNtI3E7H7gI2Q8N6F_YIGYNPmrw40Ng8AM7K1xCZE0uy2k6jAv58DKLrkUzrQidOM/'/></a>
<div class='comments-meta'>
<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/>
<div class='comments-timestamp'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div></div>
<div class='comments-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if></div>
</div>
<div class='clear'/>
</b:loop>
</div>

Thay Blog ID của bạn vào trên để kích hoạt nút Reply. Lưu lại và xem kết quả. Hy vọng khung nhận xét này thỏa mãn được phần nào nhu cầu chém gió của bạn.
Share this post
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Evernote
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

1 nhận xét

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
© 2011 Luat1x1
Designed by BlogThietKe Cooperated with Duy Pham
Released under Creative Commons 3.0 CC BY-NC 3.0
Posts RSSComments RSS
Back to top