Cách tạo style đẹp dành cho Thread Comment của Blogger

Mình siêu tầm và chia sẻ bài viết hay từ hocinternetmarketing.net:

Thời gian qua có rất nhiều học viên Internet Marketing Coaching hỏi Adam Thiên cách tạo 1 form comment đẹp trên nền tảng blogger, vì vậy hôm nay Adam Thiên quyết định dành thời gian chia sẻ cho mọi người, hy vọng sẽ có ích cho cả nhà. Với style mà Adam Thiên chia sẻ sẽ     tạo 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ản, rõ 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ố các blog.

Cách tạo form comment đẹp như ý

Mời bạn xem bản DEMO TẠI ĐÂY

Để tạo được form comment như ý bạn cần làm theo các bước sau:

Bước 1: Đăng nhập blogger.com

Bước 2: Bạn vào phần mẫu, chỉnh sửa HTML

Bước 3: Bạn tìm từ đoạn mã sau: ]]></b:skin>

Bước 4: Bạn chèn đoạn mã sau 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:#306EFF}

#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/AVvXsEjOUgJLKrXcMwpXBovSqvotG9dWQsyNLYKWd1w5ZbfalAKbTy_iZN1-YtE8a2QefnZXn_m6bTHwEghw7IbATa83YGfCIeGvq3Eh8qVemrpht8egc-w7xYyJLEEFmhv6Bpb1rk94GIrrqyE/);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%}

Lưu ý:

#306EFF  Là màu chủ đạo của style Thread Comment này, bạn có thể thay đổi nó theo ý muốn.

Bước 5: Bạn lưu mẫu lại là OK

Giờ thì bạn có thể comment để test thử nhé. Chúc mừng bạn đã sở hữu form comment đẹp như ý muốn.

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