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

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/AVvXsEhlEnTAhuQaJ-4SzslgXg-1SsmTCLe5nz57K701NgdVCMhw0UK7af_fabZqabAfDDP4VbYdiMQQh3XBjAy5OvWuK7Gg1V0EXcfxAVqboySGPgeLcnjZE-BN5chzWlSie6QeKRltNMIWWek/);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.

Bạn đã cố gắng hết sức, và công việc liên quan đến kỹ thuật này thật sự làm cho bạn khó chịu và đau đầu?! Đã đến lúc bạn HÃY QUÊN VIỆC KỸ THUẬT ĐI! Hãy để việc đó chúng tôi xử lý giúp bạn Hãy tham dự khóa học:  Internet Marketing Coaching - Huấn luyện từng bước để thành công trên internet Đảm  bảo hoàn lại tiền 100% trong trường hợp: Nếu bạn không tạo ra hệ thống như chúng tôi giới thiệu. Nếu bạn không nhận được giá trị gấp 3 lần số tiền bạn bỏ ra. Nếu bạn không hài lòng về huấn luyện viên đào tạo. Nếu bạn không kiếm được tiền sau khóa học.    => Chúng tôi sẽ hoàn lại 100% số tiền cho bạn  Mời bạn xem chi tiết tại http://coaching.internetmarketing.vn/ HOTLINE: 0963 132 916 (Adam Thiên) *Ghi chú: Dành tặng 1 bộ tài liệu SEO top 10 google trị giá 2.000.000VNĐ cho 10 thành viên đăng ký trước 15 ngày khai giảng

Adam Thiên

http://www.hocinternetmarketing.net/