Thích trang
    Trở thành fan của Tanchau123.blogspot.com

    Bạn muốn nhận tin tức mới nhất từ Tanchau123.blogspot.com? Hãy nhấn nút "Thích" bên dưới để nhận thông tin mới nhất từ chúng tôi trên Facebook.

T

a

n

chau123

Blog Giải Trí Tổng Hợp

trang chủ
Báo lỗi bài
    Báo lỗi thông tin bài viết

    Nhập thông tin báo lỗi vào ô bên dưới

22:25 ngày 11/5/12

Style dành cho Thread Comment của Blogger

Đây là một style dành cho Thread Comment mặc định của Blogger. Với style này khung nhận xét của bạn trở nên trực quan hơn khi có sự phân biệt rõ ràng giữa nhận xét reply và nhận xét được reply. Nhận xét của tác giả bài viết được gắn thêm ribbon để phân biệt với các nhận xét khác. Style này được thiết kế theo đúng phong cách mình vẫn theo đuổi lâu nay: đơn giảnrõ ràng và hiện đại. Style này là thiết kế ban đầu dành cho những template của mình sau này vốn sẽ áp dụng Thread Comment làm mặc định, hi vọng nó phù hợp với style đại đa số blog.


Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.



Mẫu 1: có kèm theo ảnh bóc tem (xem hướng dẫn tại đây) như style ở blog mình. Xem Demo

#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:#d80556}
#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 #d80556;border-right:20px solid transparent;width:0;height:0;line-height:0}
#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:3px;right:400px;margin:0;background-image: url(http://www.svsupham.vn/images/nhom/admin.gif);width:30px;height:12px}
.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%}



Mẫu 2: gán ảnh "author" cho nhận xét của chủ thớt. Xem Demo

#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:#d80556} #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
#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 #d80556;border-right:20px solid transparent;width:0;height:0;line-height:0} #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:
#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/AVvXsEg-uiH_Q0YcG4wCifMyyzK4_SiPo6_QduJJAcqrPra7u-_-MESdnrDNVX0iwkR7uHVGARo_7Js_fgq5llKwu9Lr3q7kKaAq4pE5hxsZSPxdLxWH0TJqEJPoBg405xjwcV7j5FH6Dlpwjj0//);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%}
.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/AVvXsEg-uiH_Q0YcG4wCifMyyzK4_SiPo6_QduJJAcqrPra7u-_-MESdnrDNVX0iwkR7uHVGARo_7Js_fgq5llKwu9Lr3q7kKaAq4pE5hxsZSPxdLxWH0TJqEJPoBg405xjwcV7j5FH6Dlpwjj0//);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%}

#d80556 là mã màu chủ đạo của style Thread Comment này, bạn có thể thay đổi nó theo ý muốn. Để lấy mã màu vào đây.


Chúc các bạn thành công !!!


Theo duypham

Mới cập nhật

Bình luận

· Thêm biểu tượng cảm xúc
Chọn "Nhận xét với tên: Ẩn danh" hoặc Đăng ký tài khoản để bình luận