Khung comment đẹp cho Blogger

Lang thang trên mạng, lạc vào nhà bác Noct có bài làm khung comment giống Wordpress khá dễ, có sẵng nút reply. Mialui rinh về đây làm vốn.

Chú ý là màu sắc chỉ thích hợp web/blog nền trắng nhé.

Đầ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/AVvXsEgKw-9wo2n0P5Gjo00OeMyFnA55jP-UIpVQRlj5Rpg0UCjlAYPOpoon-YXRMyz8S7MdxRhyFfUJJtYZDJJpqwHsg3amzyFL0P1MB8dSE0TZrjBWS3anWidMahL6K7ceCNMisiGr36K_n3U/) 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/AVvXsEifvk6c5BLkuhdopGBBwI6BIGtks6zW_MZC6REkm0FQY3wUir60nnVxD4y4IbYPRJYMsUy-oCma1hyphenhyphenDoMDcSbpI5Cf98DobQ6aLbSjncvj-hUbGf1D2pA5EvsPaxdI_E_xZT6PsKyJ-3t4/) 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/AVvXsEi9EWeJl6dYhPijwku_UkBZ8r8PH0N_nVAo2NCabyEIFNiT9PxZe8sM0uA-SsYBxObg4Pd8WUy3p4KRJz5TUjyfkiVwQKp3MHdtaJ8satG2c1x69TgIx7qrDECKEDoquR7DCFK1yJ13i84/'/></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ả.

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

* Bài viết của tác giả Noct, các bạn có thể tham khảo thêm bài của tác giả trên Noct Blog.