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.


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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg46BHXSsqBUS8qkVJuTcU3xmGJJwa_dfegGwO7ezXefclXgfs0LmxLZfeKBiGTjqbSXeB3Dy7ZD431ehgIwhOJnDndiX-dOMpDKbZt09hyphenhyphenu_UoQG1HSCtoLXODKT67i0B8KGlZdzYdSReu/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.