CSS Tạo khung comment giống Hồng Hải cho Blogspot

Mở đầu

- Xin chào anh em, hôm nay Nhân RIPPER sẽ hướng dẫn anh em cách tùy biến khung comment của bạn lên giống với Hồng Hải Blog , code này là của Hồng Hải nên mình sẽ ghi nguồn cẩn thận, các bạn có copy đi đâu thì ghi nguồn code là Hồng Hải, nguồn bài viết là Nhân RIPPER giúp mình nhé !

Cách làm

- Bạn vào chế độ EDIT HTML , tìm từ khóa ".comment" và xóa hết các code liên quan.

- Thêm CSS sau trước thẻ ]]></b:skin :

<!--HongHai Comment-->
.comments .avatar-image-container img[src="//img1.blogblog.com/img/blank.gif"]{content:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_WHhqw8qk_In1KGdrUV1Kl1UlOkYCVtPDGaIAJ0wYk44CQQYjAIQxZoCMRJL_K-NftqTa1mwjyITD_88TW1FsHbe2EcHRNkpt1bTG2NtsqVM00qCrRlkW8DarbZwvkxwAdmff2gNaPnoM/s45-r/avatar.png)!important}
.comments .avatar-image-container img[src="//lh3.googleusercontent.com/zFdxGE77vvD2w5xHy6jkVuElKv-U9_9qLkRYK8OnbDeJPtjSZ82UPq5w6hJ-SA=s35"]{content:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_WHhqw8qk_In1KGdrUV1Kl1UlOkYCVtPDGaIAJ0wYk44CQQYjAIQxZoCMRJL_K-NftqTa1mwjyITD_88TW1FsHbe2EcHRNkpt1bTG2NtsqVM00qCrRlkW8DarbZwvkxwAdmff2gNaPnoM/s45-r/avatar.png)!important}
.comments .avatar-image-container img[src="//img1.blogblog.com/img/blank.gif"]{content:url(https://i.imgur.com/kGBpGJo.jpg)!important}
.comments .blog-author a{pointer-events:none;font-family:roboto,fontawesome;background:#e5e5e5;font-size:15px;padding: 4px 1px 3px 9px;border-radius:100px}
.comments .blog-author a:after{content: '\f2c2       QUẢN TRỊ VIÊN';background: #52537d; color: #fff;padding: 5px 10px; margin: 0 0 0 8px;
font-weight: 400; border-radius: 50px; pointer-events: none;font-family: 'FontAwesome', roboto;}

.comments .comments-content .icon:hover:after{    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s;background:#52537d;color:#fff}
.comments .comments-content .icon:after {content:"\f2bd     MEMBER";font-weight: bold;
    color: #52537d;
    border: 3px solid #52537d;   font-family: 'FontAwesome', roboto;  border-radius: 100px; padding: 4px 10px;display: inline-block;font-size: 15px;font-weight: 800 ;text-align: center; margin: 0 0 0 3px;}
.item-control,.none,.comment-replies .comment-actions,.comments .comments-content .loadmore.loaded{display:none!important}
.comment-block .comment-actions a{padding-right: 9px!important;border: 0px solid #52537d;font-weight: bold ;display: inline-block; padding:4px 10px; margin: 0; border-radius: 5px; background: #e5e5e5; text-transform: uppercase; color: #666; letter-spacing: -.3px; transition: .3s; font-size: 13px;}
  .comment-block .comment-actions a:hover{background:#52537d;color: #fff;text-decoration: none!important;}
.comments h4{padding: 10px 0; margin: 0 0 10px;color:#52537d; font:700 20px Roboto,sans-serif; text-transform: uppercase; border-bottom: 1px solid #eee; text-align: left;position:relative}
.comments h4:after{content: '';float:left; position: absolute; bottom: 0; left: 0%; background: #999; height: 2px; width: 123px; transition:.5s}
.comments h4:hover:after{width:52%;background:#999}
.comments{clear:both;margin:0;padding:10px;background:#fff;line-height:18px;font-size:16px}
.comments .comments-content{clear:both;margin:0;padding:0;font-weight:normal;text-align:left}
.comments .continue a,.comments .thread-toggle{display:none!important}
.comments .comments-content .comment-thread ol{list-style-type:none;list-style:none;margin:0;padding:0}
.comments .comments-content .inline-thread{padding:0}
.comments .comments-content .comment-thread{margin:0}
.comments .comments-content .comment-thread:empty{display:none}
  .comment-replies{margin:30px 0 20px 25px;padding:0 0 0 32px;}
.comment-replies .comment{margin:0!important}
.comments .deleted-comment{-webkit-user-select:none;user-select:none}
.comments .deleted-comment:after{content:""}
.comments .comments-content .comment{margin:0 0 0px;padding-bottom:0}
.comments .comments-content .comment:last-child{margin:10px 0 0;padding-bottom:0}
.comments .comments-content .comment-body{position:relative}
  .comments .comments-content .user{font-style:normal;font:500 18px Roboto;color:#555}
.comments .comments-content .user a{
letter-spacing: 0;color:#515588;text-decoration:none;text-transform:uppercase;font:500 16px Roboto}
  .comments .comments-content .datetime{margin:0}
.comments .comments-content .datetime a{font-size: 14px; color: #999; text-decoration: none; display: none; margin: 6px 0 0; letter-spacing: 0;border-bottom:2px solid #eee;padding:0 0 8px}
/*.comments .comments-content .datetime a:before{content:' đã bình luận lúc '}*/
.comment-content{margin: 0; padding: 1px 0; color: #666; font: 400 17px Roboto; line-height: 1.75; letter-spacing: -.3px}
.comment-content a:visited,.comment-content a{color:#7577a9!important;font-weight:500}
  .comment-content a:hover{color:#cc7b4b!important}
.comment-content img{width: 21px;
    height: 21px;margin:0 0 0 4px; position: relative; top: 4px; ;max-width:100%}
.comments .comments-content .owner-actions{position:absolute;right:0;top:0}
.comments .comments-replybox{border:none;height:230px;width:100%}
.comments .comment-replybox-thread{margin-top:0}
.avatar-image-container{float:left}
  .comments .comments-content .icon.blog-author{display:none}
  .comments .avatar-image-container{width:45px;height:45px}
.comments .avatar-image-container img{width:100%!important;height:100%!important;border-radius:25px}
.comments .comment-block{margin: 5px 0 0 55px;padding: 12px 15px;position: relative;border: 2px solid #cccccc;border-radius: 10px;}
  @media screen and (max-width:768px){
.comments .comments-content .comment-replies{margin-left:30px}
    .comment-replies{margin:20px 0; padding:0; border-left: 0}
}
.comments-publish a{color:#fff!important;line-height:5px;margin-right:20px;font-size:13px;margin-top:3px}
.comments-publish{float:right}
.comments-publish a{padding:9px;background:#3e3f66;border-radius:1px}
.comments-publish .fa{margin-right:5px}
.comments-publish a:hover{background: #606060;color: #fff;margin-right:5px;border-radius: 10px 10px 10px;}

- Lưu lại và tận hưởng.

Tổng kết

- Nguồn CODE : Hồng Hải Blog