Threaded comments - Blogger đơn giản và đẹp

Threaded comments - Blogger đơn giản và đẹp

Đây là một style dành cho Thread Comment mặc định của Blogger. Thread Comment phân cấp với CSS cho Blogger - blogspot, Được cải tiến từ Blo...
11 Comment 3/06/2013
Threaded commentsĐây là một style dành cho Thread Comment mặc định của Blogger. Thread Comment phân cấp với CSS cho Blogger - blogspot, Được cải tiến từ Blogger Việt + Duy pham hi vọng nó phù hợp với style đại đa số blog.

Trước tiên, hãy lưu lại một bản template gốc để đề phòng bất trắc. Sau đó vào phần chỉnh sửa HTML, xóa hết CSS Threaded comments cũ đã áp dụng trong template của bạn.

Tiếp tục chèn đoạn code này trước ]]></b:skin>
/* Comments
----------------------------------------------- */
.comments {background: none repeat scroll 0 0 #FFFFFF;clear: both;margin-top: 10px;padding: 10px;width: 96%;}
#comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#ff9000}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #ff9000;border-right:20px solid transparent;width:0;height:0;line-height:0}
.comments .avatar-image-container{width:42px;max-height:42px;height:42px;padding:2px;border:1px solid #CCCBCB}
.comments .avatar-image-container img{max-width:42px;width:100%}
.comments .inline-thread .avatar-image-container{width:36px;height:36px}
.comments .comment-block{margin-left:53px;padding:5px 10px;border:1px solid #CCCBCB;-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;border-radius:3px}
.comments .inline-thread .comment-block{margin-left:48px}
.comments .comment-block::before,.comments .comment-block::after{content:"";width:0;height:0;border-width:10px 8px;border-style:solid;border-color:transparent #CECECE transparent transparent;position:absolute;top:8px;right:100%}
.comments .comment-block::after{border-color:transparent white transparent transparent;right:auto;left:-15px}
.comments .comments-content .comment-header{border-bottom:1px solid #CCCBCB;padding-bottom:3px;margin:-1px -3px 10px}
.comments .comments-content .comment{margin-bottom:12px;padding:0}
.comments .comments-content .icon.blog-author{position:absolute;right:10px;top:-3px;width:65px;height:20px;background-color:#FF9000;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;-o-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px}
.comments .comments-content .icon.blog-author::after{content:"Admin";position:absolute;color:white;text-shadow:0 1px 2px #646464;top:0px;left:10px}
#comments-block{margin:1em 0 1.5em;line-height:1.6em}
.comment-form{max-width:100%}
#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}

Save template lại và test.