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

- 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 !




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é




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 !
nhận xét
6 nhận xét

Bình luận

Xếp theo


Cùng tham gia bình luận bài viết này nhé!

Back To Top

Welcome to our website
chuyên chia sẻ những thủ thuật hay

test 404
  • Rius Grey là một trang web phi lợi nhuận, chuyên chia sẻ những thủ thuật máy tính, windows, phần mềm, blogger/blogspot, và một số thứ khác. Gần đây, website đã bước sang giai đoạn phát triển, member trông đợi khá nhiều. Cho nên chúng tôi sẽ cố gắng nhiều hơn nữa để mọi người không thất vọng. Xin cảm ơn mọi người ! Cảm ơn mọi người đã ủng hộ