Tác giả Cũng đã lâu rùi mình không viết bài về Blogspot, vì không có thời gian và mình cũng giành thời gian viết về chủ đề khác chứ không viết về Blogspot nữa, không phải vì không muốn viết mà vì trên mạng có rất nhiều hướng dẫn về thủ thuật blogger nên bây giờ có viết thì cũng không có gì hót, và bị tính là nhai lại thui, vì vậy các bạn hãy ủng hộ mình nhiều để mình có động lực viết ra nhiều bài hay nữa nhé.
Nếu bạn đã dùng tới blogspot thì chăc chắn biết về khung bình luận blogspot rùi đúng không và mình cũng không phải hướng dẫn các cách chỉnh sửa như nào nữa, có thể tìm kiếm trên mạng có rất nhiều cách hướng dẫn chỉnh sửa template nếu bạn chưa biết thì có thể tìm hiểu
khung bình luận đã có mặc định trong blogspot nhưng nó không được đẹp, long lanh như bạn nghĩ và bạn muốn thay đổi cho đẹp hơn bắt mắt hơn cho blog của mình nên hôm nay Blog Hay xin chia sẻ một số khung bình luận đẹp cho blogspot bạn có thể thoải mái lựa chọn mẫu mà mình thích
Một điều nữa là nếu bạn đang đắn đo giữa lựa chọn khung bình luận mặc định của blogspot hay chọn khung bình luận facebook thì mình khuyên các bạn chọn khung mặc mặc đinh của blogspot vì khi bạn thay đổi tên miền thì số bình luận trên blogspot vẫn còn, khung bình luận face chỉ phù hợp với dạng tin tức, vì nếu bạn tích hợp vào các trang blog thủ thuật sẽ ít người bình luận hơn vì họ biết sẽ ít nhận được phản hồi hơn, nói hơi nhiều mình xin vào vấn đề chính.
Tổng hợp khung bình luận blogspot đẹp
- Đầu tiên bạn vào Chỉnh sửa html thêm code bên dưới vào trước ]]></b:skin>
Khung bình luận 1 :
#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/AVvXsEiRrG-zAxyjnttbHBvCkYHDr41JcG2tAfBJv99zjAFmyDeHAQLkqHrjM5Ej33-wUCeD6l4ZypzqVXVKkHCAme82lc1jqe5bKkvNOc3xQl-ibiH5FXmks__VNHXozeTH7kTi2cbMpWMvJuQ/);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àu chủ đạo của style Thread Comment này, bạn có thể thay đổi nó theo ý muốn.
Khung bình luận 2 :
.comments .comments-content .icon.blog-author{background-repeat:no-repeat;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO39EKn-zZZqoWXt1-EuVhNU4NF6ukCbGNb4EXKJUlUkTDQuVoboLfCt8qBe8Txw_VENx4YRHdA-Sy5_E3yTLNlWSElJ6NTaDtYn_uteC-YHhbl2o9bvB58SZO_hK7TUtiMw6s9Mxp9u4/s1600/icon.png);display:inline-block;height:20px;margin-right:3px;width:20px;}
Khung bình luận 3 :
.comment-form p{background:#f2f2f2;margin:0 10px;padding: 15px;text-align: center;display: none;}
#threaded-comment-form p{display:none}
#comment-editor{background:transparent url(https://3.bp.blogspot.com/-LIb8IsOVao0/V4RKqQi4iZI/AAAAAAAADQM/oziIOaDqpqQRjDcjGZEU4LxCtMfEuWu-QCLcB/s1600/Flip-Flop.gif) no-repeat 50% 30%;height:210px}
.blogger-tab{display:block}
.comment-footer{padding: 0;margin: 0;}
.add-cmt{color:#c71d1d;font-size:26px;padding:0}
.add-cmt h3{font-weight:400}
.comments h4{display:inline-block;position:relative;font-size:20px;color:#333;text-transform:none;font-weight:400;z-index:1;margin:0;}
.comments .comments-content{margin:0;padding:0}
.comments .comments-content .comment{margin-bottom:0;padding-bottom:0}
.comments .comments-content .comment:first-child{padding-top:0}
.facebook-tab,.fb_iframe_widget_fluid span,.fb_iframe_widget iframe{width:100%!important}
.comments .item-control{position:static;display:none}
.comments .avatar-image-container{float:left;overflow:hidden;position:absolute;padding:3px;background:#fff;border:1px solid #e1e1e1}
.comments .avatar-image-container,.comments .avatar-image-container img{height:35px;max-height:35px;width:35px;max-width:35px}
.comments .comment-block{overflow:hidden;padding:10px;background:#fafafa;border:1px solid #e1e1e1}
.comments .comment-block{margin-left:60px;}
.comments .comments-content .comment-replies{border-left:1px solid #e1e1e1;padding:0 0 0 23px}
.comment-replies{margin: 0;}
.comments .comments-content .inline-thread{padding:0}
.comments .comment-actions{float:right;position:relative}
.comments .comments-content .comment-header{color:#3D8FE8;font-size:16px;font-weight:400;display:block;overflow:hidden;clear:both;margin:0 0 10px;padding:0 0 5px;border-bottom:1px solid #D4D8DB}
.comments .comments-content .user{font-style:normal;font-weight:700;display:inline-block;font-size:15px}
.comments .blog-author a:after{content: "Admin";border: 1px solid #f90;background:#FE9800; color: #fff; padding: 1px 6px; margin: 0 0 0 8px; font-weight: 400; letter-spacing: 0; border-radius: 4px; pointer-events: none;padding-bottom:1px}
.comments .comments-content .comment-content{text-align:left;font-size:16px;line-height:normal;color:#111;margin:5px 0}
.comments .comment .comment-actions a{margin:0;color:#aaa;font-weight:400;font-size:12.5px;padding:0}
.comments .comment .comment-actions a:hover{color:#3b5998;text-decoration:none}
.comments .comments-content .datetime{color:#999;float:right;font-size:12px;position:relative;margin:0 0 0 10px;display:inline-block}
.comments .comments-content .comment-header a{color:inherit;font-weight:400}
.comments .comments-content .comment-header a:hover{color:#3b5998}
.comments .thread-toggle{padding:0;margin:5px 0;display:none}
.comments .thread-toggle .thread-arrow{height:7px;margin:0 3px 2px 0}
.comments .thread-expanded{padding:0}
.comments .comments-content .comment-thread{margin:0}
.comment-thread ol{padding: 0;}
.comment-replies { margin: 15px 0 0; margin-left: 60px;}
.comments .continue a{padding:0 0 0 60px;font-weight:400;display:none}
.comments .comments-content .loadmore.loaded{margin:0;padding:0;display:none}
.comments .comment-replybox-thread{margin:0}
