Thư viện

Trải nghiệm

Thứ Tư, tháng 1 30, 2013

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

Bạn đã từng quan tâm đến việc thêm các tính năng cho hệ thống Thread Comment của Blogger. Mặc định chỉ có 2 cấp. Trong bài viết này chỉ với 1 đoạn CSS bạn có thể phân bao nhiêu cấp tùy ý.

Chia sẻ:
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
 Thread Comment phân nhiều cấp với CSS
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(http://lh6.ggpht.com/-GDMurKK2tec/T5JCD6hoKoI/AAAAAAAABAc/COHOItBlFWk/author.png);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

52 nhận xét:

  1. Vẫn chỉ là 2 cấp mà bạn (T_T)

    Trả lờiXóa
    Trả lời
    1. Style 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óa
    2. nghệ thuật trá hình :-d

      Xóa
    3. Thay đổi giao diện cho khác biệt với mẫu thông thường :-d

      Xóa
    4. nói gì thì nói về commment thì thua bác Tiến hết :D

      Xóa
    5. Ai 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óa
    6. mình chọn trả lời nó báo lỗi của blogger khắc phục sao a Namkna
      http://learning2sharing.blogspot.com/2013/08/thu-khoa-y-duoc-ha-noi-di-nhap-ngu.html?showComment=1375436028584#c5178848450930852036

      Xóa
    7. Bạn xem lại id: 4486072018930286729 có đúng không nha.

      Xóa
    8. Bạn dùng thủ thuật khác không phải bài này.

      Xóa
  2. vẫn 2 cấp thôi bạn ơi :((

    Trả lờiXóa
    Trả lời
    1. Style 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óa
  3. Bạ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óa
  4. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
    Trả lời
    1. Nhận xét này đã bị quản trị viên blog xóa.

      Xóa
  5. anh 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.
    Blog của em

    Trả lờiXóa
    Trả lời
    1. 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.

      Ngoà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
    2. 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óa
    3. Em mời anh quản trị rồi . khi nào anh on anh sửa hộ em với nhé

      Xóa
  6. 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

    Trả lờiXóa
    Trả lời
    1. Em 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óa
    2. sao em xóa xong nó ko còn cho comment nữa anh ạ.

      Xóa
    3. em 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óa
    4. kiể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óa
    5. Anh đã 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óa
  7. comment tren blogger của mình khong thấy nằm trong bảng kiểm duyệt nữa, ngay cả mình comment cũng không hiện chữ nữa phải làm sao đây, bạn có thể giúp mình dc ko

    Trả lờiXóa
    Trả lời
    1. Nế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.

      Xóa
  8. mình bị 3 tháng nay rồi, trong phần cài đặt không hiện phần nhận xét nên không kiểm duyệt dc ai.
    lnik nè bạn vào xem https://lh5.googleusercontent.com/_6pFKmorKdVyvqoV5vNAWDma0l0abt0qgyfVRPYdlSYP=w958-h643-no

    Trả lờiXóa
    Trả lời
    1. Bạ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

      Xóa
  9. Thêm gmail rồi đó bạn,bạn vào xem thử đi

    Trả lờiXóa
  10. MÌnh tìm trong blogspot thể skin ko có làm sao bạn @@

    Trả lờiXóa
    Trả lời
    1. Bì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:

      Blogger thay đổi giao diện Edit HTML - Thêm chức năng tìm kiếm nội tuyến

      Xóa
  11. 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óa
    Trả lời
    1. Bạn chọn một mẫu khác ở đây nha: comment phân cấp Ves 3

      ves 4

      Và còn nhiều bản khác ở đây: XEM NGAY

      Xóa
    2. Tớ đã tìm được khung comment ưng ý khổ nỗi lại có một lỗi phát sinh
      Admin 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á!

      Xóa
    3. Bạn chỉ cần chỉnh lại thuộc tính cho phù hợp thôi nha bạn.

      .comment-form {max-width: 98%;!important;}

      Xóa
    4. Nhận xét này đã bị tác giả xóa.

      Xóa
    5. Cả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.

      Tạ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 :(

      Xóa
    6. 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óa
    7. 1. Bạn thử tìm đoạn code sau:

      document.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.

      Xóa
    8. 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óa
    9. Thự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óa
    10. Tớ 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óa
    11. Uk, 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óa
  12. Anh 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óa
  13. Chà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