Chia sẻ giao diện nhận xét chuyên nghiệp cho Blogger

Giao diện nhận xét hiện tại của blog mình thì trước giờ cũng có nhiều người xin, thì hôm nay mình xin chia sẻ với các bạn luôn giao diện nhận xét này. Về mặt cơ bản thì nó trông cũng tựa tựa như một giao diện nhận xét Spice Up Your Blog mà mình đã có dịp chia sẻ trước đây. Chủ yếu là căn chỉnh lại chút xíu thôi, phần tên admin của blog sẽ có nền màu đó và phần tên khách truy cập sẽ có màu xanh.

Chia sẻ giao diện nhận xét chuyên nghiệp của KslZone.NET

Giao diện hiện tại của mình thì cũng chã phải do mình viết ra, mà cái template nó có sẵn rồi. Không lẵng phí thời gian nữa, đây mình xin chia sẻ luôn với các bạn.

Các chèn giao diện nhận xét vào Blogger

Đối với những bạn nào đã đang xài một giao diện nhận xét mất kì, hoặc trong template nó có sẵn rồi thì rất dễ làm hỏng giao diện. Do đó các bạn nên sao lưu (backup) lại giao diện hiện tại của blog mình cho chắc nhé.

Đầu tiên các bạn vào chỉnh sửa HTML giao diện hiện tại của blog mình, tìm đến nơi có phần CSS để căn chỉnh giao diện cho giao diện nhận xét hiện tại và xóa nó đi. Cái này đối với các bạn không chuyên thường khá là khó khăn, nó thường năm ở trong cặp thẻ
<b:skin><![CDATA[/*
...
]]></b:skin>
nếu bạn nào mù mờ quá cứ để lại địa chỉ blog của bạn tại phần nhận xét ở dưới mình sẽ hướng dẫn chi tiết phải xóa đoạn mã nào.

Tiếp đến sau khi xóa thành công giao diện nhận xét của trên blog của bạn, bạn tiếp tục chèn đoạn CSS này của mình lên trên thẻ ]]></b:skin> để hoàn thành giao diện giống blog mình
/*--------------------------------------------
------------Comments---------------------
-----------------------------------------------*/
#comments {
margin-right: 25px;
margin-left: 25px;
}
#comments h4:after {
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #555555;
bottom: -9px;
content: close-quote;
left: 22px;
position: absolute;
}
#comments h4 {
border-bottom: 3px solid #555555;
color: #222222;
font-family: 'Open Sans',arial,sans-serif;
font-size: 18px;
font-weight: 500;
line-height: 26px;
margin: 0 0 45px;
padding: 0 0 5px;
position: relative;
text-align: left !important;
}
#comments-block {
line-height: 1.6em;
margin: 1em 0 1.5em;
}
#comments-block .comment-author {
margin: 0.5em 0;
}
#comments-block .comment-body {
margin: 0.25em 0 0;
}
#comments-block .comment-footer {
border-bottom: 2px solid #DEDEDE;
margin: -0.25em 0 0;
}
#comments-block .comment-body p {
margin: 0 0 0.75em;
}
.deleted-comment {
color: gray;
font-style: italic;
}
.comments .comments-content .comment-content:after {
position: absolute;
content: close-quote;
left: -11px;
border-top: 10px solid #fff;
border-right: 11px solid #f5efef;
border-bottom: 10px solid #fff;
top: 10px;
}
.comments .comments-content .comment-content {
background: #f5efef;
color: #494949;
padding: 10px;
position: relative;
text-align: left;
}
.comments .comments-content .comment-header, .comments .comments-content .comment-content {
margin: 0;
}
.comments .comments-content .comment, .comments .comments-content .comment:first-child, .comments .comments-content .comment:last-child {
margin: 0;
overflow: hidden;
padding: 0;
}
.comments .comments-content .comment-thread {
margin: 0;
}
.comments .comments-content .inline-thread {
margin-left: 40px;
margin-right: -20px;
margin-top: -5px;
}
.comment .avatar-image-container {
max-height: 70px !important;
position: relative;
width: 85px !important;
z-index: 50;
}
.comment .comment-block {
margin-left: 90px !important;
}
.comment .comment-header {
background: #3396b9;
font-style: italic;
font-weight: 600;
padding: 0;
}
.comment .comment-header .icon.user.blog-author .datetime.secondary-text a {
text-align: right;
}
.comment .comment-header a {
color: #ffffff;
text-decoration: none;
}
.comment .comment-content {
color: #474646;
font-size: 14px;
line-height: 22px;
text-align: left;
}
.comments .thread-toggle {
display: none;
}
.comment-header cite, .comment-header cite a {
background: #53B9D6;
color: #FFFFFF;
font-family: 'Open Sans',arial,sans-serif;
font-size: 17px;
font-weight: 600 !important;
line-height: 25px;
margin: 0;
padding: 2px 5px 1px;
position: relative;
z-index: 99;
}
.comment .comment-header cite.blog-author, cite.blog-author a {
background: #D65653;
color: #FFFFFF !important;
font-family: 'Open Sans',arial,sans-serif;
font-size: 17px;
font-weight: 600 !important;
margin-left: 0;
padding: 2px 5px 1px;
}
.icon.blog-author {
background: url("") no-repeat scroll 0 0 transparent;
bottom: 5px;
display: none !important;
height: 60px !important;
margin-left: 90px;
position: absolute;
right: 5px;
top: 10px;
width: 60px !important;
}
.comment .avatar-image-container img {
border: none !important;
height: 70px !important;
max-height: 70px !important;
max-width: 70px !important;
width: 70px !important;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.comments .comment .comment-actions a {
padding-right: 0;
padding-top: 5px;
}
.comment .comment-actions a {
color: #3396b9 !important;
display: inline-block !important;
*display: inline;
zoom: 1;
font-size: 14px;
font-weight: 600;
line-height: 1 !important;
margin: 15px 0 0;
padding: 0;
text-decoration: none !important;
text-transform: uppercase;
}
.comment .comment-actions a:hover {
color: #292929 !important;
text-decoration: none !important;
}
.comments {
color: black;
font-size: 1em;
text-align: right;
}
.comments .continue {
display: inline-block !important;
*display: inline;
zoom: 1;
}
.comments .continue a {
color: #3396b9;
font-size: 14px;
font-weight: bold !important;
padding: 0 !important;
text-transform: uppercase;
}
.comments .continue a:hover {
color: #292929;
text-decoration: none;
}
.item-control {
display: none !important;
}
.comments .continue {
border-top: 2px solid transparent !important;
}
#comment-editor {background:transparent url('http://3.bp.blogspot.com/-Id9iv_USm4o/UbU3WLdcYrI/AAAAAAAAANs/gZLU48rPnnw/s1600/ajax-loader+(2).gif') no-repeat 50% 30%}
sau khi hoàn thành thì bạn tiến hành lưu lại, và ra ngoài blog hiện tại kiểm tra xem nó có hoạt động chưa.

Lời kết

Giao diện nhận xét cũng đóng một phần không nhỏ giúp người dùng dễ dàng kiểm tra thông tin tại nơi đó, và cũng có phần kích thích người dùng nhận xét nhiều hơn tại blog của mỗi người. Mọi thắc mắc bạn có thể để lại tại phần nhận xét trong bài viết này của mình.

9 bình luận

  1. avatar says

    lúc 20:11 3 tháng 9, 2014

    Mình đã làm được rồi. Cám ơn Kiều Lâm nhiều nha!

  2. avatar says

    lúc 20:54 7 tháng 12, 2014

    thưa anh, cái khung nhận xét của em không biết bị ẩn ở đâu, mong anh chỉ cách khắc phục http://i.imgur.com/1ycyxvL.png

  3. avatar says

    lúc 20:56 7 tháng 12, 2014

    Nghĩa là các nhận xét sẽ không được hiển thị ấy ạ!

  4. avatar says

    lúc 21:24 7 tháng 12, 2014

    Cái này không trực tiếp xem code thì anh khó mà nói được nó bị gì, và cũng không biết chắc em có chỉnh sửa gì vào phần mặc định không, cũng như chỉnh mà chỉnh những cái gì nữa =.=

  5. avatar says

    lúc 04:38 8 tháng 12, 2014

    Em sẽ gửi qua gmail qua cho anh, anh chỉnh giùm em nha.

  6. avatar Nặc danh says

    lúc 10:11 8 tháng 12, 2014

    Mình đã chỉ cho bạn cách thực hiện rồi mà. Phần cài đặt nhận xét và tắt Comment Google+ đó.

  7. avatar says

    lúc 12:46 4 tháng 3, 2015

    Nhờ Lâm giúp đỡ my blog http://buisangtho.blogspot.com

  8. avatar says

    lúc 10:07 22 tháng 3, 2016

    Bạn giúp mình xem xóa phần nào nhé blog https://tinhoc-ht.blogspot.com/
    Thanks !!

  9. avatar says

    lúc 11:01 23 tháng 8, 2016

    Cậu có chia sẻ theme hiện tại của cậu đang dùng không ah.
    body.ccv@gmail.com
    Thanks

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.