Blogspot : làm sao để có một Comment Form đẹp ?

Đây là vấn đề mà khá nhiều người đã đề cập, Comment Form là thành phần quan trọng của bất cứ blog nào, việc có một khung nhận xét đẹp mắt sẽ góp phần giúp tăng lượng comment trên blog của bạn. Nếu bạn không hài lòng với Comment Form của mình, hãy tự hỏi là: tại sao nó lại chưa đẹp ? Nguyên nhân chủ yếu là do template bạn đang dùng, đa số các blogger template làm ra đều ít được chăm chút cho khung nhận xét.

Tuy vậy, vẫn có một số tác giả chịu khó trang trí cho Comment Form (mình là một trong số đó). Với kinh nghiệm "đầy mình" trong việc edit template, trong bài viết này Noct sẽ hướng dẫn bạn cách trang trí khung nhận xét của blog sao cho đẹp nhất. Lưu ý đây chỉ là hướng dẫn chứ không nêu ra code cụ thể bởi vì mỗi template có phong cách thiết kế khác nhau nên không thể dùng chung một mẫu nhận xét được.

Vào phần chỉnh sửa HTML của template, chọn mở rộng mẫu tiện ích, tìm dòng sau:
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
comments-block chính là id của khung hiển thị nhận xét theo chuẩn Minima.
Trong comments-block này bạn sẽ thấy có các thành phần sau:
<b:if cond='data:comment.authorUrl'>
Đây chính là phần hiển thị tên và profile của người comment, ta đặt cho nó một class tên là comments-meta như thế này:
<div class='comments-meta'>
<b:if cond='data:comment.authorUrl'>
.....
</b:if>
</div>
Lưu ý là phải chèn thẻ đóng </div> đúng chỗ nếu không sẽ báo lỗi khi save. Tiếp theo, bạn sẽ thấy:
<b:if cond='data:comment.favicon'>
Đây là phần hiển thị avatar của người nhận xét, ta đặt cho nó một class tên là comments-avatar, bạn làm tương tự như với comments-meta.
Tiếp tục:
<dd class='comment-body'>
...
</dd>

Đây là phần hiển thị nội dung comment. Tiếp theo là:
<span class='comment-timestamp'>
Cái này chính là thời gian đăng nhận xét. Cuối cùng là khung để viết nhận xét, nó sẽ có id là comment-form.

Nếu để ý, ta sẽ thấy có các thành phần dl, dd, dt, ol... trong khung nhận xét. Đây là các thẻ kiểu list trong CSS, chúng sẽ khiến vấn đề trở nên phức tạp hơn nếu bạn chưa quen dùng. Vì vậy, ta sẽ xóa chúng đi và thay thế bằng các thẻ div quen thuộc để dễ dàng tùy biến. Tìm tất cả các chữ tô đậm màu xanh ở trên rồi đổi thành div hết, và đừng quên chèn thẻ đóng </div>. Ví dụ:
<div class='comment-body'>
.......
</div>
Từ giờ, công việc của chúng ta trở nên cực kì đơn giản, sử dụng CSS trên từng id và class của Comment Form (color, background, border, font...) để trang trí theo ý thích:
#comments-block { ... }
.comments-meta { ... }
.comments-avatar { ... }
.comment-body { ... }
.comment-timestamp { ... }
#comment-form { ... }
Để dễ hình dung thì bạn xem ảnh này.
Chúc bạn làm được một khung nhận xét đẹp.