Sau hai giao diện nhận xét đã chia sẻ ở bài trước, hôm nay lại chia sẻ thêm một lần nữa một giao diện rất đẹp của trackmyblog. Có đánh số thứ tự nhận xét, có phân cấp cho trả lời, giao diện màu trắng đơn giản bạn có thể xem thử ở hình dưới. Nhìn thực tế sẽ đẹp hơn nhiều.
Thêm giao diện nhận xét vào Blogger
1. Đăng nhập vào
Blogger >> Mẫu >> Chỉnh sửa HTML
2. Tìm đến thẻ
]]><b:skin> và thêm đoạn CSS sau vào bên trên
/*==================
Comments CSS
=========================*/
#comments{background:white;padding:20px;border:1px solid #dcdcdc;}
#comments h4{font-size:28px;color:#414141;line-height:2em;}
.comments ol li:before {
content: counters(trackit, ".");
font-size: 3.5rem;
color: rgba(0, 0, 0, 0.16);
right: 0.3em;
position: absolute;
padding: .2em 0 0 0;
text-shadow:1px 1px 1px white}
.comments ol li {counter-increment: trackit;}
.comments ol {counter-reset: trackit;}
.comments .comments-content .comment-content {text-align: justify;border:1px solid #e1e1e1;padding:20px;margin-left:-40px;margin-top:35px}
.comments .comments-content .comment-header{width:58%;position:relative;padding:0 25px;margin:10px 0 0;}
.comments .comments-content .user {font-style: normal;font-weight: normal;color:#414141;font-size:20px;}
.comments .comments-content .user a{color:#414141;font-family:impact, arial, sans serif}
.comments .comments-content .user.blog-author a{color:#4085FD}
span.datetime.secondary-text a{color:#b9b9b9;font-style:italic}
.comments .comments-content .datetime {margin:0 0 0 0;color:#616161;fontsize:12px;display:block}
.comments .comments-content .comment-thread ol {list-style-type: none;padding: 0;margin: 0 0 0 ;text-align: left;}
span.item-control.blog-admin{display:none}
.comments .thread-toggle {display:none;}
#comments .comment-actions.secondary-text{text-decoration:none;}
.comments .comment .comment-actions a {
padding-right: 5px;
padding-top: 5px;
text-decoration:none;
text-align:right}
.comments .comment .comment-actions a:hover{text-decoration:none}
.comments .continue a {
display: none!important}
.comments .avatar-image-container img {max-width: 60px;max-height:60px;width:60px;height:60px;z-index:1;float:left;}
.comments .avatar-image-container {float: left;max-height: 60px;height:60px;overflow: hidden;width: 60px;max-width:60px;border-radius: 0 50% 50% 50%;-moz-border-radius:0 50% 50% 50%;-o-border-radius:0 50% 50% 50%;border:1px solid #dcdcdc;background:#fff;}
.comment .comment-replies .comment{border-top:5px solid #414141;border-left:3px solid #f5f5f5;border-right:3px solid #f5f5f5;padding:10px;background:#f5f5f5}
.comments .comments-content .comment-replies .comment, .comments .comments-content .comment-replies .comment:first-child, .comments .comments-content .comment-replies .comment:last-child {margin: 0;padding: 1em;}
.comments .comments-content .comment:last-child, .comments .comments-content .comment:first-child {padding-top: 5px;padding-bottom:5px;list-style:none;position: relative;}
.comment-thread.inline-thread .comment-content {background:#fff}
3. Lưu lại và tận hưởng. Chúc bạn thành công
Belum ada tanggapan untuk "Thêm một giao diện nhận xét khác cho Blogger"
Post a Comment