Thêm comment phân cấp cho mẫu blogger

{tocify} $title = {Mục lục bài viết}

[tintuc]Hôm nay cuahangtemplate.com xin giới thiêu với các bạn thủ thuật mới
Hệ thống comment phân cấp của mẫu blogger thật dễ dàng sử dụng tuy nhiên 1 số blog đang sử dụng mẫu giao diện riêng thì có lẽ cấu trúc cần phải chỉnh sửa lại 1 tý để mẫu blogger có thể hiển thị
1- cấu hình comment
 vào  quản lý mẫu blogger -> setting-> posts and comment -> chọn embdded

2-tìm code và edit
  Bạn vào Template -> edit HTML - tìm (Crt + F ) dòng code sau :

<b:include data='post' name='comments'/>

và thay thế bằng code sau (tổng cộng khỏang 4 cái )

  <b:include data='post' name='threaded_comments'/> 

3 thêm chút style - cái này bạn có thể tùy chỉnh cho comment phân cấp phù hợp nhất với mẫu blogger của mình

    #comments h4{margin:15px 0 15px;line-height:1.4em;text-transform:capitalize;font-size:110%;box-shadow:0 1px 3px 0 #B5B5B5;-moz-box-shadow:0 1px 3px 0 #b5b5b5;-webkit-box-shadow:0 1px 3px 0 #B5B5B5;border:1px solid #DDD;border-bottom:1px solid #3a6085;overflow:hidden;position:relative}
    .comments .comments-content .comment,.comments .comments-content .comment:first-child,.comments .comments-content .comment:last-child{padding:5px;border:1px solid #CFCFCF;margin:0 0 5px;box-shadow:0 1px 3px 0 #B5B5B5;-moz-box-shadow:0 1px 3px 0 #b5b5b5;-webkit-box-shadow:0 1px 3px 0 #B5B5B5;border:1px solid #DDD;border-bottom:1px solid #3a6085;overflow:hidden;position:relative}
    .comments .avatar-image-container{max-height:50px;width:45px;height:45px;padding:2px;border:1px solid #BDBDBD}
  .comments .avatar-image-container img{margin-top:5px;max-width:50px;width:100%}
    .comments .comment-block{margin-left:52px;}
    .comments .inline-thread .avatar-image-container{float:left;width:40px;height:40px}
    .comments .inline-thread .comment-block{margin:0 50px 0 0}
    .comments .comments-content .comment-header{padding:0 0 3px;border-bottom:1px solid #D8D8D8}
    .comments .comments-content .comment-replies{margin:10px 5px 0}
    .comments .comments-content .inline-thread .comment-content{padding:0 10px}
    .comments .comments-content .icon.blog-author{position:absolute;right:10px;background-color:#5390ad;width:65px;height:20px;border-radius:0 0 3px 3px;top:-7px}
    .comments .comments-content .icon.blog-author::before{content:&quot;Admin&quot;;color:white;position:absolute;left:12px;top:3px}
    .comments .comments-content .inline-thread .comment:first-child{margin-top:8px}
    #comments-block{margin:1em 0 1.5em;line-height:1.6em}
    #comments-block .comment-author{margin:.5em 0}
    #comments-block .comment-body{margin:.25em 0 0}
    #comments-block .comment-footer{margin:-.25em 0 2em;line-height:1.4em;text-transform:uppercase;letter-spacing:.1em}
    #comments-block .comment-body p{margin:0 0 .75em}
    .deleted-comment{font-style:italic;color:gray}
    .comment-form{max-width:100%}
    .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 5px;
    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:2}
    .comment-thread{color:#111}
    .comment-thread a{color:#2F4F4F}
    .comment-thread ol{margin:0 0 20px}

nguồn http://chinhtrucblog.blogspot.com/2013/04/thread-comment-ep-phan-cap-voi-css-cho.html

Nếu có thắc mắc, hãy để lại comment phía dưới nhé, admin của cuahangtemplate.com sẵn sàng trợ giúp bạn
chúc các bạn thành công!! [/tintuc]