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(//4.bp.blogspot.com/-uCjYgVFIh70/VuOLn-mL7PI/AAAAAAAADUs/Kcu9wJbv790hIo83rI_s7lLW3zkLY01EA/s45-r/avatar.png)!important}
.comments .avatar-image-container img[src="//lh3.googleusercontent.com/zFdxGE77vvD2w5xHy6jkVuElKv-U9_9qLkRYK8OnbDeJPtjSZ82UPq5w6hJ-SA=s35"]{content:url(//4.bp.blogspot.com/-uCjYgVFIh70/VuOLn-mL7PI/AAAAAAAADUs/Kcu9wJbv790hIo83rI_s7lLW3zkLY01EA/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
- - 21 bình luận
CHUYÊN MỤC
  • Bình Luận
    1. hồng hải thích viền vãi cái nào cũng viền :v

      Trả lờiXóa
    2. Ủa trùm Facebook bị rip rồi à :)

      Trả lờiXóa
    3. Test [img]https://i.imgur.com/z3QX8jq.jpg[/img]

      Trả lờiXóa
    4. Lâu không tt nhỉ, muốn hủy lk sao ông

      Trả lờiXóa
      Trả lời
      1. - Hủy đi ô, ô cũng có tt đâu :)

        Xóa
      2. Tạo 1 trang top cmt ra rồi xem xm tui có tt hay ko nhé, rất thường xuyên là đằng khác

        Xóa
    5. Không có FB liên hệ = cách nào đây @@

      Trả lờiXóa
      Trả lời
      1. - @@ https://www.facebook.com/huunhan.vo.3975012
        * 3 ngày nữa về :v

        Xóa
      2. 72h mà 3 ngày về :/ kinh vậy

        Xóa
    6. Trả lời
      1. - Yeah, i'm fine ^^, how about you, add facebook me :
        https://www.facebook.com/DoTranNhatDuys

        Xóa