Tạo Style Comment đẹp Giống LEBALONGBLOG Cho Blogspot




HƯỚNG DẪN SỬ DỤNG:

Đăng nhập vào trang quản trị Blogger và thêm tất cả CSS này trước ]]></b:skin> nhé:
.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;border-radius50px;}
.comments .comment-block {
    overflow: hidden;
    padding10px;
    background#ededed;
    display: inline-block;    border-radius10px;
}
.comments .comments-content .icon.blog-author:before {
    font-weight900;
    font-family: fontawesome;
    content"\f00c";
    background#ededed;
    display: inline-block;
    color#0053f9;
    position: relative;
    top3px;
    -webkit-border-radius50%;
    -moz-border-radius50%;
    border-radius50%;
    line-height13px;
    overflow: hidden;
    text-align: center;
    padding2px 4px 1px;
}
.comments .comment-block{margin-left:60px;}
.comments .comments-content .comment-replies{border-left:1px solid #e1e1e1;padding:0 0 0 23px}
.comment-replies{margin0;}
.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:1pxsolid #D4D8DB}
.comments .comments-content .user{font-style:normal;font-weight:700;display:inline-block;font-size:15px}
.comments .blog-author a:after{display:inline-block;vertical-align:middle;content:"\f00c";font-family:"Font Awesome 5 Free";font-weight:700;padding:5px;margin:-7px 0 -5px4px;background:#ccc;color:#666;border-radius:50%;font-size:12px}
.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 010px;display:inline-block}
.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{padding0;}
.comment-replies {    margin15px 0 0;    margin-left60px;}
.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}

Lưu ý: Nhớ xóa toàn bộ CSS cũ nếu không sẽ bị lỗi nhé
Vũ Minh Thịnh

Vũ Minh Thịnh Designer, Developer

Muốn giỏi phải học, muốn học thì phải hỏi. Chính vì thế, hãy cùng tham gia thảo luận với nhau để tìm ra câu trả lời nếu có thắc mắc nhé! Xem thêm nhiều bài viết hay tại đây nhé.
Trong quá trình viết bài chúng tôi sẽ có nhiều thiếu sót mong các bạn đóng góp để chúng tôi rút kinh nghiệm hơn !

Cùng bình luận bài viết

Bài viết mới
Chuyên mục