Thêm CSS Comment Stylish đẹp cho Blogspot

Trong tất cả các thành phần của Blog các bạn đều có thể thêm CSS trên các HTML có sẵn của Blog. Sau đây mình sẽ giới thiệu đến các bạn một kiểu comment dưới chân bài viết khá là đẹp.

Vào Template > Mẫu > Chỉnh sửa HTML và Tìm kiếm dòng sau:

 <b:skin><![

Và thêm vào nó CSS này:

.comments .comment-block {
background: #F9F9F9;
color: #555;
box-shadow: 0 4px 10px #EEEEEE;
position: relative;
margin-top: 10px;
margin-left: 60px;
padding: 10px;
border: 4px solid #EEEEEE !important;
border-radius:10px;
font: 1.190em/1.2 Cambria,Georgia,sans-serif;
}
.comment-thread li .comment-block:before {
position: absolute;
display: block;
left: -26px;
color: #EEEEEE;
content: "\25C4";
font-size: 30px;
}
.comments .avatar-image-container {
width: 60px;
height: 60px;
max-height: 60px;
margin:0px 0px 0 -28px;
padding: 0px;
border: 7px solid #EEEEEE;
border-radius:60px;
}
.comments .avatar-image-container img {
overflow:hidden;
width: 60px;
height: 60px;
max-width: 60px;
border:0 !important;
border-radius:60px;
}
.comments .comment-thread.inline-thread {
background: none;
}
.comments .continue {
border-top: 0px solid transparent;
}
.comments .comments-content .datetime {
float: right;
font-size: 11px;
}
.comments .comments-content .user a{
font-size: 15px;
color: #498EC9;
}
.comments .comments-content .datetime a:hover{
color: #777;
text-decoration: none;
}
.comments .comments-content .comment:first-child {
padding-top: 0px;
}
.comments .comments-content .comment {
margin-bottom: 0px;
padding-bottom: 0px;
}
.comments .continue a {
padding: 0px;
}
.comments .comments-content .icon.blog-author {
background-image: none;
}

Có thể thay đổi:

- background: #F9F9F9; //Thay đổi màu nền của comment
- color: #555; //Thay đổi màu chữ
- box-shadow: 0 4px 10px #EEEEEE; //Thay đổi màu bóng đổ
- border: 4px solid #EEEEEE !important; //Thay đổi màu và size của đường viền
- font: 1.190em/1.2 Cambria,Georgia,sans-serif; //Thay đổi độ lớn của font chữ
- color: #EEEEEE; //Thay đổi màu sắc cái mũi tên
- border: 7px solid #EEEEEE; //Thay đổi đường viền ngoài của ảnh

Sau khi tùy chỉnh xong các bạn Lưu Template và xem kết quả.

Chúc các bạn thành công!

Jakub BB