Thêm một giao diện nhận xét khác cho Blogger

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 một giao diện nhận xét khác cho Blogger

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


Thêm một giao diện nhận xét khác cho Blogger

2. Tìm đến thẻ ]]><b:skin> và thêm đoạn CSS sau vào bên trên

Thêm một giao diện nhận xét khác cho Blogger

/*==================
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

1 bình luận:

  1. avatar Nặc danh says

    15:47 Ngày 22 tháng 06 năm 2015

    ảnh Avatar nhỏ quá bị nhòe đi phải làm thế nào ạ?

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.