Tùy chỉnh màu và style cho Threaded Comments của blogger

Tùy chỉnh màu và style cho Blogger Comments Threaded thật sự rất cần thiết đối với một blog, đẹp và bắt mắt mới khiến độc giản muốn comments thay vì giao diện đơn giản sẵn có của blogger. Vậy làm cách nào để có một giao diện đẹp cho Blogger Comments Threaded của bạn, hãy làm theo các bước hướng dẫn bên dưới

Lưu ý: Trước hết blog của bạn phải cài đặt threaded comments rồi đã thì mới sử dụng thủ thuật này nhé. Nếu chưa cài đặt hãy xem hướng dẫn bên dưới

1.Vào blogger > Mẫu > Chỉnh sửa HTML
2.Mở rộng tiện ích và tìm đoạn code sau

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

3.Thay toàn bộ đoạn code tìm được bằng code bên dưới ( có 4 lần thay )

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

4.Lưu lại template

Tùy chỉnh màu và style cho Threaded Comments của blogger
Bước 1: Vào blogger > Mẫu > Chỉnh sửa HTML
Bước 2: Dán code bên dưới vào trước ]]></b:skin>

#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:-12px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH6lJi73ViBHIw3OGFuufMRYgcMv3k2pdpwPwFyy_jyV6lQpeXf7YBOT3Kgrlw0wNXU0G8MkISr7Dw3XEu7SXmwfpEAuboFSJXdhNIWwiV9e9qqwQNdkWcGr003cLyMoKDn4_ejcyhO2VI/h120/author-pink.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%}

Bước 3: Save lại và thử comments xem!

Tùy chỉnh
Bạn có thể thay đổi màu cho phần Comments Threaded bằng cách sửa lại những phần mình tô màu và đậm code trên

Mình có sẵn thêm 2 màu cho bạn lựa chọn

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgskL9NxP_Bu9iJwTIG9c8uUibJJxF2RPryne09NSc_Y5P7VH7ZYiG4ytjSFUiu514Relt4SCwiqBNE4Ir4YVAwy2j-l5k3lS5aGoCkrm6RMEWchlLWWfmqt5aTvpGtm8bpEg5YYBN9hHHG/h120/comment-author-blue.gif

•  Tương ứng với nó là mã màu 1e05d8



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuuAZr_YhTY6TGx485JPwWmnHHuyTJNbjas_PR0CqmDQcZ9XWlgDj-MdYzJ6wuoz9JWc8fM3Z9L8_J0ZeuLxjilpUC4k4WdaDAdy61Sl4S6wxjyWwIJbWVOHb9-2bD2A1jiZf1fxd5Mi8s/h120/comment-author-green.gif

•  Tương ứng với nó là mã màu 56d805

Rất đơn giản phải không nào? Còn chờ gì nữa mà không bắt tay vào việc! Chúc bạn thành công!