SHARE CODE THREAD COMMENT VỚI STYLE THIẾT KẾ TUYỆT ĐẸP CHO BLOGSPOT

- Trong quá trình làm việc, cũng như là trong quá trình viết bài, khó tránh khỏi sai sót, rất mong các bạn, anh chị em bỏ qua. Đồng thời do trình độ lập trình & kinh nghiệm thực tiễn còn hạn chế nên giao diện và bài viết còn nhiều lỗi ! Em rất mong nhận được ý kiến đóng góp từ mọi người, để bản thân học hỏi thêm được nhiều kinh nghiệm và sẽ cố gắng hoàn thiện trong tương lai. Em xin chân thành cảm ơn !
- Mọi chi tiết xin liên hệ:
• Phone number: 038.689.7757
• Facebook: fb.com/leanhduc.pro.vn
• Email: Admin@leanhduc.pro.vn

LỜI MỞ ĐẦU

Chào mừng tất cả các bạn đã đến với bài viết tiếp theo của mình. Hôm nay mình sẽ chia sẻ cho các bạn style thread comment tuyệt đẹp, có nhãn phân biệt ADMIN & MEMBER luôn. Chúng ta bắt đầu nào !!!

CÁC BƯỚC THỰC HIỆN


DEMO

BƯỚC 1:

Copy toàn bộ Code phía dưới =))
<!-- Comments Form -->
<b:if cond='data:blog.pageType != "index"'>
<!-- điều kiện áp dụng cho trang bài viết và trang tĩnh -->
<style type='text/css'>
/* CSS Comment */
.first-comment{padding:10px 0 25px}
.first-comment i{margin:0 7px 0 0}
#comments .comment .comment-replybox-single .continue a,#comments .comment .comment-replybox-thread .continue a{}
#comments .comment-thread .comment-replies .comment-actions{display:none!important}
.comments iframe{border-bottom:1px solid #eee}
.cancel-reply-bsw{font-size: 14px; font-weight: 500; display: block; padding: 0 0 10px;}
#comments .comment-replybox-thread {position:relative}
.item-control{display:none!important}
.cancel_reply_bsw{padding:5px 14px;display:inline-block;margin:5px 0;background:#eee;border-radius:100px;font:500 12px Roboto,sans-serif}
.cancel_reply_bsw:hover{background:#ddd}
#comments h4{margin: 15px 0 0; padding: 10px 0 0;font-size:23px;font-weight:300;border-top:1px solid #eee}
#comments{clear:both;margin:0;padding:0;background:0;box-sizing:border-box}
#comments .comment-thread ol{margin:0;padding-left:0}
#comments .comment-thread ol{padding-left:0}
#comments .comment-thread .comment-replies,#comments .comment .comment-replybox-single{margin-left:16px;border-left:1px solid #eee;padding:0 0 0 20px}
#comments .comment-thread .thread-count,.comments .continue{display:none}
#comments .comment{list-style-type:none;display:block;position:relative;margin:0;padding:0 0 5px}
#comments .comment .comment{padding:0}
.comment .avatar-image-container{position:absolute;width:45px;height:45px;background:#ddd;border-radius:50%}
.comment .avatar-image-container:after{content:&#39;&#39;}
.comment .avatar-image-container img{border-radius:50%;height:100%;width:100%}
.avatar-image-container svg,.comment .avatar-image-container .avatar-icon{display:none}
.comments .comments-content {
margin: 15px 0 0;
clear: both;
float: left;
width: 100%;
}
/* MENBER */
.comments .comments-content .icon::before{display:inline-block;vertical-align:middle;content:&quot;\f007&quot;;font-family:&quot;Font Awesome 5 Free&quot;;font-weight:700;padding:5px;margin:-7px 0 -5px 4px;background:#FF3333;color:#fff;border-radius:50%;font-size:10px}
.comments :after{content:&#39;MEMBER&#39;;position:absolute;font-weight:500;top:-26px;background:#ccc;padding:5px 10px;margin-left:-40px;opacity:0;visibility:hidden}
.comments .comments-content .icon:hover:after{opacity:1;visibility:visible}
/* ADMIN */
.comments .comments-content .icon.blog-author:before{display:inline-block;vertical-align:middle;content:&quot;\f00c&quot;;font-family:&quot;Font Awesome 5 Free&quot;;font-weight:700;padding:5px;margin:-7px 0 -5px 4px;background:#0099FF;color:#fff;border-radius:50%;font-size:10px}
.comment .blog-author:after{content:&#39;ADMIN&#39;;position:absolute;font-weight:500;top:-26px;background:#ccc;padding:5px 10px;margin-left:-40px;opacity:0;visibility:hidden}
.comments .comments-content .icon.blog-author:hover:after{opacity:1;visibility:visible}
.comment .comment-block{line-height:1;margin:0 0 10px 55px;padding:10px;background:#ededed;display:inline-block}
.comment .comment-block:before{content:&#39;&#39;;border:20px solid #ededed;border-bottom:0 solid transparent;border-top:12px solid transparent;border-right:0;position:absolute;margin:-10px 0 0 35px;left:4px;transform:rotate(180deg)}
.comment .comment-block:hover{}
#comments .comment-author-header-bacsiwindows-wrap{margin-left:40px}
.comment .blog-author{}
#comments .comment .comment-header .user,#comments .comment .comment-header .user a{color:#555;font-style:normal;font-weight:700;font-size:16px;text-transform:capitalize}
#comments .comment .comment-actions{font-size: 13px; padding: 10px 0 0; display: inline-block;}
#comments .comment .comment-actions a{color:#777;font-weight:700}
#comments .comment .comment-actions a:before{content:&#39;\f3e5&#39;;font-family:&#39;Font Awesome 5 Free&#39;;font-weight:700;margin:0 5px 0 0}
#comments .comment a:hover{text-decoration:underline}
#comments .comment-actions &gt;*{}
#comments .comment .comment-header .datetime{margin:0 0 0 5px}
#comments .comment .comment-header .datetime a{font-weight:400;font-size:14px;color:#777}
#comments .comment .comment-footer .comment-timestamp a{color:#777;font-weight:500}
.comment-header{display:inline}
#comments .comment .comment-content a{color:#4267b2}
.comment .comment-body,#comments .comment .comment-content{color:#333;margin:5px 0 0;line-height:1.4;word-break:break-word}
#comments .comment .comment-content br{display:table;content:&#39;&#39;;padding:0 0}
.comment-ban{background:#ff5643;padding:8px 16px;margin:0 auto 10px;color:#fff;float:none;border-radius:100px;width:fit-content}
#comments .comment-thread .comment-replies .comment{margin:0 0 5px}
#comments .comment-thread .comment-replies .comment .avatar-image-container {width:30px;height:30px}
#comments .comment-thread .comment-replies .comment .comment-block {margin-left:40px}
#comments .comment-thread .comment-replies .comment .comment-block:before {left:-8px}
comments .comment br{display:table!important;content:&#39;&#39;!important;padding:3px 0!important}
.comment-body{margin-bottom:12px}
#comments.embed[data-num-comments=&quot;0&quot;]{border:none;margin-top:0;padding-top:0}
#comment-editor-src{display:none}
.comments .comments-content .loadmore.loaded,.loadmore{display:none!important}
.commentnavi{clear:both;margin:10px 0 0;text-align:center}
.commentnavi .page-first{float:left;margin:0 5px 0 0;display:none}
.commentnavi .page-items{float:right;display:none}
.commentnavi .page-number,.commentnavi .page-next,.commentnavi .page-number,.commentnavi .page-prev{margin:0 0 0 4px;width:35px;height:35px;line-height:35px;padding:0;background:#fff;display:inline-block;text-align:center;border-radius:5px;font-size:16px}
.commentnavi .page-number:hover{background:#eee}
.commentnavi .selected{padding:0;margin:0 0 0 4px;color:#fff;background:#7577a9;width:35px;height:35px;display:inline-block;text-align:center;line-height:35px;border-radius:5px;font-size:16px;font-weight:900}
</style>
</b:if>
<!-- Comments Form -->

BƯỚC 2:

Dán toàn bộ code trên vào ngay dưới thẻ <body> hoặc <body...> và lưu lại (nhớ phải xóa toàn bộ css cũ đi nhé !)

LỜI KẾT

Code trên được mình lấy từ bên BSW và thêm nhãn phân biệt ADMIN & MEMBER vào. Mọi hành động Copy & Reup vui lòng ghi rõ nguồn tác giả. Chúc các bạn một ngày học tập và làm việc hiệu quả !
@Sourcecode  BSW & Lê Anh Đức

8 nhận xét:


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