Thread Comment phân nhiều cấp với CSS cho blogger/blogspot

Thread Comment có thể phân bao nhiêu cấp tùy ý. Nhiều người sẽ nghĩ là không thể vì mặc định  Thread Comment  của blogger chỉ phân tối đa 2 cấp. Như vậy nhiều blogger sẽ muốn phân cấp nhiều hơn. Trong bài viết này Namkna đã thêm tính năng phân linmit cấp cho hệ thống Thread Comment của Blogger. chỉ với 1 đoạn CSS bạn có thể phân bao nhiêu cấp tùy ý. Hãy xem demo bên dưới để thấy rõ hơn.

XEM DEMO

Hình minh họa

Cảnh báo: Trước khi bạn bắt đầu áp dụng bất cứ thay đổi mẫu mã blogger của bạn, Chúng tôi khuyến khích bạn để sao lưu nó, bằng cách nhấp vào liên kết Mẫu => Sao lưu/Khôi phục => Tải về (Download Template Full Version).

☼ Cách tiến hành:

1- Đăng nhập (Login) vào Blog
2- Vào Mẫu (Template)
3- Chọn Chỉnh sửa HTML (Edit HTML). Không cần mở rộng tiện ích mẫu.
4- Tìm kiếm thẻ ]]></b:skin> và thêm vào trước nó đoạn CSS sau:

/* Efek thread-comment bertingkat hanya dengan CSS
 * Level tingkatan dibuat dengan cara menuliskan margin-left dengan nilai yang berbeda
 * By: http://namkna.blogspot.com/2013/01/thread-comment-phan-nhieu-cap-voi-css.html */
.comments .thread-toggle {
  margin-bottom:10px;
}

.comments .comment-thread.inline-thread .comment .comment-block {
  margin-left:52px;
}

.comments .comment-thread.inline-thread .comment {
  margin:0px 0px 5px 30%; /* Level 6+ */
  background-color:#f4f4f4;
  border:1px solid #ddd;
  padding:10px 15px;
  color:#333;
}

.comment .comment-thread.inline-thread .comment:nth-child(6) {margin:0px 0px 5px 25%;} /* Level 6 */
.comment .comment-thread.inline-thread .comment:nth-child(5) {margin:0px 0px 5px 20%;} /* Level 5 */
.comment .comment-thread.inline-thread .comment:nth-child(4) {margin:0px 0px 5px 15%;} /* Level 4 */
.comment .comment-thread.inline-thread .comment:nth-child(3) {margin:0px 0px 5px 10%;} /* Level 3 */
.comment .comment-thread.inline-thread .comment:nth-child(2) {margin:0px 0px 5px 5%; } /* Level 2 */
.comment .comment-thread.inline-thread .comment:nth-child(1) {margin:0px 0px 5px 0%; } /* Level 1 */
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#d80556}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5gbzkMUqGxkZuIUbNKAkj6BObRVNiGu4vJrYp6Oq3yISqCrZgmsCzr2DI1vatTExNaDyGgKqfO02v__-tJwAqrbpcD87AHbAUd_oATLmYsfRZFjPbq0ZaOsgv-EZP81y1bhAQITOeDr0/);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}  

- Đoạn code màu xanh chính là phần xác định phân cấp cho thread comment.

- Nếu bạn đang sử dụng  một trong các style giao diện comment thread mà mình đã giới thiệu tại bài viết Làm đẹp Threaded comments của blogspot  thì chỉ cần thêm nguyên đoạn mã màu xanh trên vào trước thẻ ]]></b:skin> trong template.

5- lưu mẫu lại.

Kết luận!

- Trong quá trình áp dụng nếu gặp bất cứ khó khăn nào hãy comment bên dưới.

- Nếu chia sẽ lại bài viết này hãy để back link tới bài viết này hoặc blog namkna