Tùy chỉnh hệ thống Comment phân cấp cho template Blogspot
Nếu bạn sử dụng các Template do Blogspot cung cấp thì mặc định đã có hệ thống comment phân cấp tích hợp, đối với 1 số blog đang sử dụng template riêng thì bạn cần chỉnh sửa mã code để blogspot có thể hiển thị
hệ thống comment phân cấp.
Bài viết dưới sẽ hướng dẫn bạn chi tiết cách thực hiện!
Bước 1- Cấu hình comment
Vào quản lý Blogspot ----> Setting -----> Posts and comment -> chọn Embdded
Bước 2 - Tìm 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ùy vào mẫu tempale, có khoảng từ 2 tới 4 code trên - Thay tất các code )
<b:include data='post' name='threaded_comments'/>
Bước 3 - Chỉnh sửa style
Phần này để bạn có thể tùy chỉnh cho comment phân cấp phù hợp nhất với blogspot 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:"Admin";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 : chinhtrucblog
Đăng lên bởi admincuchot
lúc 12:53. Trong thư mục
.
Nếu như bạn thích tin tức từ website này hãy theo dỏi bằng RSS 2.0.
Đăng bài viết của bạn bằng cách gữi bài viết về email cuchot86@gmail.com