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/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.
5- lưu mẫu lại.- 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.
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
Nhận xét
Ồ
Trả lờiXóaThank to post, i love you.
Trả lờiXóatruyen sex, truyen sex hay, anh sex, truyen dam, truyen sex, anh sex
Vẫn chỉ là 2 cấp mà bạn (T_T)
Trả lờiXóaStyle nó là phân cấp. CHỉ có điều không di chuyển nút reply và bõ theo từng comment thôi.
Xóanghệ thuật trá hình :-d
XóaThay đổi giao diện cho khác biệt với mẫu thông thường :-d
Xóanói gì thì nói về commment thì thua bác Tiến hết :D
XóaAi dám so sánh với bác Tiến Nguyên chứ :( . Search chỉ có dte và bác tiến có mẫu commnet đó thôi :) Chỉ có điều cái Bacode đó mã hóa hơi kỹ :P
XóaBạn dùng thủ thuật khác không phải bài này.
Xóavẫn 2 cấp thôi bạn ơi :((
Trả lờiXóaStyle nó là phân cấp. CHỉ có điều không di chuyển nút reply và bõ theo từng comment thôi.
XóaBạn có hướng dẫn thêm nút like facebook vào blogger ko vậy, blog mình nè, tks nhé http://yeutienganh123.blogspot.com/
Trả lờiXóaRất nhiều: CHÈN LIKE FACEBOOK VÀO BLOG
XóaBạn xem lại id: 4486072018930286729 có đúng không nha.
Trả lờiXóaNhận xét này đã bị tác giả xóa.
Trả lờiXóaNhận xét này đã bị tác giả xóa.
Xóaanh namkna cho em hỏi sao blog của em ko chèn đc comment phân cấp vậy anh hướng dẫn em với em làm theo như anh hướng dẫn nhưng nó vẫn giữ nguyên. Hay là phải xóa comment mặc định đi anh. anh chỉ hộ em với nhé thanks anh.
Trả lờiXóaBlog của em
Blog của em đang dùng mẫu comment cũ khoongphair thread comment của blogger nên em phải xóa comment cũ đi em ak.
XóaNgoài ra em có thể xem bài này nha:
http://namkna.blogspot.com/2013/06/thread-comment-nhieu-cap-cho-blogspot.html
Xóa ở phần nào vậy anh . Anh chỉ em với em ko biết xóa chỗ nào nữa
XóaEm mời anh quản trị rồi . khi nào anh on anh sửa hộ em với nhé
XóaXóa ở phần nào vậy anh . Anh chỉ em với em ko biết xóa chỗ nào nữa
Trả lờiXóaEm chỉ cần xóa toàn bộ đoạn code ở giữa 2 thẻ <b:includable id='comments' var='post'> và </b:includable> và lưu lại blogger sẽ tự động cập nhật link mới em ak.
Xóasao em xóa xong nó ko còn cho comment nữa anh ạ.
Xóaem chèn đc rồi nhưng muốn nó ko đánh số với lại avartar hiển thị sang bên phải thì làm thế nào anh
Xóakiểu như của anh đó. Hoặc hơn tí nữa thì Comment của Admin thì Avartar bên trái của khách thì bên phải :D. Sorry vì em hỏi hơi nhiều nhé
XóaAnh đã giới thiệu rất nhiều cách cải tiến em có thể kiểu mình thích ở đây nhaL XEM NGAY
XóaNếu trong phần cài đặt thì có thể bạn truy cập đúng lúc đang bảo trỳ thôi, bạn đợi một lúc rồi truy cập lại sẽ thấy hết lỗi đóa bạn ak.
Trả lờiXóaBạn có thể mời mail của mình để mình vào xem blog của bạn xem sao vì đây là phần cài đặt của google không thể tự ý thêm hoặc xóa đi đâu bạn ak. mial mình là: tavannam01@gmail.com
Trả lờiXóaOKE ĐỂ MÌNH CHECK MAIL
Trả lờiXóaMÌnh tìm trong blogspot thể skin ko có làm sao bạn @@
Trả lờiXóaBình thường nó ẩn đi dạng <b:skin>....</b:skin> bạn dùng chức năng tìm kiếm nội tuyến trong ô mẫu là được thôi. Bạn có thể xem cách tìm kiếm ở bài viết giới thiệu này nha:
XóaBlogger thay đổi giao diện Edit HTML - Thêm chức năng tìm kiếm nội tuyến
Mình muốn ở mỗi khung comment đều có nút trả lời thì làm sao admin? Chứ với những câu bình luận dài, đọc xong lại phải kéo lên trên để trả lời thì mệt lắm!
Trả lờiXóaBạn chọn một mẫu khác ở đây nha: comment phân cấp Ves 3
Xóaves 4
Và còn nhiều bản khác ở đây: XEM NGAY
Tớ đã tìm được khung comment ưng ý khổ nỗi lại có một lỗi phát sinh
XóaAdmin xem giúp ở Blog này
Cái chỗ khung commet ấy phần bên trái nó bị ẩn đi (Do quá to!), làm thế nào để sửa lỗi này? Nhìn nó mất mỹ quan quá!
Bạn chỉ cần chỉnh lại thuộc tính cho phù hợp thôi nha bạn.
Xóa.comment-form {max-width: 98%;!important;}
Nhận xét này đã bị tác giả xóa.
XóaCảm ơn ad, mình đã làm được nhưng còn một lỗi cuối cùng! Mong ad fix giúp luôn.
XóaTại bài viết này
Ở comment cấp 1 khi bấm vào biểu tượng emoticon thì xuất hiện hình mặt cười bình thường để mình chọn. Nhưng nếu reply ở comment cấp 2, cấp 3... thì khi bấm vào nó lại chả hiện gì cả. Làm sao để fix lỗi này đây :(
Một bấn đề nữa là nó không responsive, khi xem ở đt thì bị vỡ cấu trúc, có thể khắc phục điều này không ad?
Xóa1. Bạn thử tìm đoạn code sau:
Xóadocument.getElementById(domId).insertBefore(replybox, null);
- Thaythế nó thành đoạn code bên dưới:
document.getElementById(domId).insertBefore(document.getElementById('threaded-comment-form'), null);
2- Mình thấy nó vẫn responsive tốt đó bạn ak.
Không được rồi! Thôi đành chịu, được cái này thì mất cái kia, phải chịu bỏ một trong hai thứ thôi :-<
XóaThực ra thì phần comment nên hạn chế sử dụng những code tạo hiệu ứng đó đi bạn ak. Mặt cười thiên về dạng như mạng xã hội hơn, ít khi người ta sử dụng mặt cười trong comment lắm. Ta chỉ nên chú trọng vào nó khi nào blog có lượng comment lớn vì lúc đo nó được sử dụng nhiều hơn.
XóaTớ quyết định bỏ emoticon rồi! Xem lại những nhận xét mới thấy thực ra toàn là mình sử dụng nhiều! Đã bỏ để có nhận xét phân cấp cho dễ nhìn!
XóaUk, trước tiên phát triển về nội dung trước, giao diện không cần quá phức tạp, su hướng hiện nay ngày càng đơn giản hoá mà/
XóaAnh Nam ơi.. Khi em show comment thì nó bị mất phần header trong blog ạ.. giờ sửa làm sao vậy anh???
Trả lờiXóaChào bạn, trang của mình comment form không hiện khi mình xem trên mobile, mình đã thử mò mà không biết cách chỉnh thế nào cho no hiện. Bạn có thể hướng dẫn giúp mình không, chân thanh cám ơn bạn, trang của mình http://www.2vblog.com/
Trả lờiXóa