Trang trí Giao diện Comments cho Blogger

Bắt chước bậc thầy đi trước, mình cũng phải tìm cách để cho Comments ngày càng đẹp hơn.

Hôm nay vào Web của bác kslzone.net, thấy có nhiều cái hay lắm. Mình đã thử qua và rất thích cái giao diện Comments nầy. Hình minh họa dưới đây, mình sao lại đó, có đẹp không các bạn.

Bác kslzone.net nói: 

:Việc trang trí giao diện nhận xét cũng khá cần thiết, nó giúp bạn lấy được cảm tình người đọc hơn, và có lẽ cũng giúp người đọc nhận xét nhiều hơn về blog của chính bạn":

Cũng không sai đâu. Lời nói là điều tốt, nhưng ăn mặc mà chẳng ra chi cũng là rất khó khăn trong thời đại nầy.

Thủ thuật thiết kế giao diện nhận xét như sau:

1. Đăng nhập vào Blogger >> Mẫu >> Chỉnh sửa HTML

2. Nhấn Ctrl+F, tìm đến thẻ ]]></b:skin> và thêm đoạn CSS sau vào bên trên

Source Code:

@font-face {
    font-family: 'Philosopher';
    font-style: normal;
    font-weight: 400;
    src: local('Philosopher'), url(http://themes.googleusercontent.com/static/fonts/philosopher/v4/OttjxgcoEsufOGSINYBGLYbN6UDyHWBl620a-IRfuBk.woff) format('woff');
}

.comment .avatar-image-container {
    border: 1px solid #B6B6B6;
    max-height: 70px !important;
    margin-top: -5px;
    width: 70px !important;
    position: relative;
    z-index: 50;
}

.comment .comment-block {
    margin-left: 75px !important;
}

.comment .comment-header {
    background: none repeat scroll 0 0 #A9F5D0;
    color: #333;
    font-size: 15px;
    font-weight: bold;
    margin-left: 60px;
}

.comment .comment-header a {
    color: white !important;
    text-decoration: none;
}

.comment .comment-content {
    background: none repeat scroll 0 0 #FEFFF9;
    border-bottom: 2px solid #E6E6E6;
    font-size: 14px;
    margin: 0 0 30px;
    padding: 5px 5px 10px 10px;
}

.comment .comment-actions a {
    background: none repeat scroll 0 0 #DDD;
    color: #333;
    display: inline-block;
    line-height: 1;
    margin: 0 3px;
    padding: 3px 6px !important;
    text-decoration: none;
}

.comment .comment-actions a {
    background: none repeat scroll 0 0 #DDD;
    color: #333;
    display: inline-block;
    line-height: 1;
    margin: 0 3px;
    padding: 3px 6px !important;
    text-decoration: none;
}

.comment-header cite {
    background: none repeat scroll 0 0 #DF7401;
    border: 1px solid white;
    color: white;
    padding: 2px 20px;
    position: relative;
    z-index: 99;
    margin-left: -20px;
}

cite.blog-author {
    background: none repeat scroll 0 0 #8181F7 !important;
}

.icon.blog-author {
    display: none !important;
    background: url("") no-repeat scroll 0 0;
    margin-left: 90px;
    width: 60px !important;
    height: 60px !important;
    position: absolute;
    right: 5px;
    bottom: 5px;
    top: 10px;
}

.comment .comment-header {
    color: #333;
    font-size: 15px;
    font-weight: bold;
}

.comment .avatar-image-container img {
    border: medium none !important;
    height: 70px !important;
    width: 70px !important;
    max-height: 70px !important;
    max-width: 70px !important;
}

.comment .comment-actions a {
    background: none repeat scroll 0 0 #DDD !important;
    color: #333 !important;
    display: inline-block !important;
    line-height: 1 !important;
    margin: 0 3px !important;
    padding: 3px 6px !important;
    text-decoration: none !important;
    font-size: 16px;
}

.comment .comment-actions a:hover {
    background: #CCC !important;
    text-decoration: none !important;
}

.comments {
    font-family: 'Philosopher', arial, serif !important;
    font-size: 1em;
    color: black;
}

.comments .continue a {
    display: block !important;
    font-weight: bold !important;
    padding: .5em !important;
    color: #E34600;
    font-size: 16px;
}

.comments .continue a:hover {
    color: #4D3123;
    text-decoration: none;
}

.item-control {
    display: none !important;
}

.comments .continue {
    border-top: 2px solid transparent !important;
}

.comments .comments-content .icon.blog-author {
    position: absolute;
    top: -1px;
    right: -12px;
    background-image: url(http://cdn2.iconfinder.com/data/icons/crystalproject/16x16/apps/keditbookmarks.png);
    width: 36px;
    height: 36px;
    margin: 0;
}

Chúc các bạn thành công tốt đẹp sau khi hoàn thiện xong thủ thuật nầy.
 Tác giả: Tin học - Vừa học, vừa làm, vừa vọc