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 Blog2- 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/AVvXsEhuqYfkM2eQrudGrbCGl9aunhtYx1L9wNmJG0dEF9R5LzqR8VS9ADUy8GwLXtHvsFy45iOIzECmhpcD1R8R-rt0dL_Y4V88ebQ1IDsZdoH1_QnuueAJWU-_J4mea47DVyV7FH1v0FJ5ZK4/);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.
5- lưu mẫu lại và tận hưởng thành quả nhé!- 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.
0 nhận xét:
Post a Comment