Short Comment CSS blogger style v2 - Rút gọn khung nhận xét

Tiếp nối bài viết trước Short Comment CSS blogger - Rút gọn khung nhận xét thì trong bài này tôi sẽ thay đổi một vài css để trông nó cá tính và đẹp mắt hơn nhưng vẫn giữ nguyên yếu tố gọn gàng, sạch sẽ mà tôi muốn có trong khung nhận xét.

Short Comment Style v2 thay đổi những gì?

• Nó không còn là dạng list menu phẳng như v1 (nó đã được thay thế bằng dạng list submenu - mỗi khi bạn trả lời một nhận xét cha thì nó sẽ tạo ra một sub comment con và có avatar nhỏ hơn comment cha)
• Thêm số lượng thứ tự ở mỗi nhận xét (bây giờ mỗi khi bạn nhận xét nó sẽ tạo ra một số đếm theo thứ tự theo nhận xét của bạn)

Cách chèn Short Comment Style v2 vào Blogger

1. Vào Blogger > Mẫu > Chỉnh sửa HTML
2. Tìm kiếm (Ctrl + F) từ khóa </b:skin> và chèn CSS sau vào trước nó.

CSS:

.comments {
  font-size:13px;
}
.comments h4 {
  font-size:14px;
  text-transform:uppercase;
  font-weight:600;
  margin-bottom:10px;
}
.comment-thread ol {
  counter-reset:shine-comments;
}
.comment-thread li:before {
  content:counter(shine-comments);
  counter-increment:shine-comments;
  position:absolute;
  right:0;
  font-weight:700;
  font-family:arial,georgia;
  color:#444;
}
.comment-thread ol ol {
  counter-reset:shine-comments-sub;
}
.comment-thread li li:before {
  content:counter(shine-comments) "." counter(shine-comments-sub);
  counter-increment:shine-comments-sub;
}
.comments .comments-content .comment-thread ol {
  margin:0;
}
.comments .comments-content .comment-thread ol li {
  list-style:none;
}
.comments .comments-content .comment:first-child {
  padding-top:10px;
}
.comments .comments-content .comment {
  margin-bottom:0;
  padding-bottom:20px;
  position:relative;
}
.comments .avatar-image-container {
  max-height:48px;
  width:48px;
  border-radius:3px;
}
.comments .avatar-image-container img {
  max-width:48px;
  width:100%;
}
.comments .comment-block {
  margin-left:58px;
}
.comments .comments-content .comment-header a {
  text-transform:capitalize;
}
.comments .comments-content .datetime {
  margin-left:5px;
}
.comments .comments-content .datetime a:before {
  color:#ccc;
  content:"\f017";
  font-family:FontAwesome;
  font-size:10px;
  margin-right:3px;
  vertical-align:4%;
}
.comments .comments-content .datetime a {
  color:#aaa;
  font-size:12px;
}
.comments .comments-content .comment-header {
  margin-bottom:5px;
}
.comments .comments-content .user {
  font-style:normal;
  font-weight:700;
  color:#444;
}
.comments .comments-content .blog-author a {
  color:red;
}
.comments .comments-content .icon.blog-author:before {
  content:"Admin";
  font-family:Arial;
  font-size:11px;
  padding:2px 5px;
  background:#ff6969;
  color:#fff;
  border-radius:2px;
}
.comments .comments-content .icon.blog-author {
  display:inline-block;
  height:auto;
  width:auto;
  margin:0 0 0 6px;
}
.comments .comments-content .comment-content {
  margin-bottom:5px;
  color:#777;
  text-align:left;
}
.comments .comment-block .comment-actions {
  display:block;
}
.comments .comment .comment-actions a {
  color:#aaa;
}
.comments .comment .comment-actions a:hover {
  text-decoration:none;
  color:#444;
}
.comments .thread-toggle {
  display:none;
}
.comments .comments-content .inline-thread {
  margin:0 !important;
  padding:0;
}
.comments .continue {
  display:none;
}
.comments .comments-content .comment-replies {
  margin-left:58px;
  margin-top:10px;
}
.comments .comments-content .comment-replies .avatar-image-container {
  max-height:36px;
  width:36px;
  border-radius:3px;
}

Trong đó bạn cần chú ý:

.comments - Ở đây các bạn thiết lập các thuộc tính như cỡ chữ, font chữ cho toàn khung nhận xét, nếu không thiết lập gì thì nó sẽ tự nhận font chữ hiện tại của bạn.
.comments h4 - Đây là tiêu đề của khung nhận xét các bạn cũng có thể tùy chỉnh cho phù hợp với giao diện trang của bạn.

3. Lưu Template và xem kết quả.

Lưu ý: Quên mất không nhắc các bạn là ở đây tôi có sử dụng Font Awesome để gọi ra một vài icon và các bạn cần thêm nó vào trang web. Các bạn chưa thêm Font Awesome vào blog thì có thể xem hướng dẫn ở bài viết này Thêm bộ icon CSS Font Awesome cho website, blog.

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