Khắc phục lỗi Avantar của Comment cho Blogspot

Đây là một thủ thuật nhanh để hiển thị hình ảnh Blogger Avatar Comment đúng. Namkna thấy trong nhiều blog avatar Comment (ảnh đại diện phần nhận xét) của mọi người không đúng kích thước. Điều này là do CSS Bình luận của cả hai hệ thống mặc định và Comments Threaded. Đây là mẹo nhanh với css để Thiết lập lại hình ảnh Avatar và Phong cách hình ảnh.

Dưới đây là ảnh Demo:

Trước khi thực hiện thủ thuật:

Sau khi thực hiện thủ thuật:

☼ Cách tiến hành:
1- Đăng nhập vào Blog
2- Vào Mẫu (Template)
3- Chọn Chỉnh sử HTML (Edit HTML) - Tiếp tục (Proceed) => Xem video:

4- Dán đoạn code bên dưới vào trước thẻ ]]></b:skin>

.avatar-image-container, .avatar-image-container img{
 max-width:50px !important;
 width:50px !important;
 max-height:50px !important;
 height:50px !important;
 padding: 0 !important;
 border:0px;
}

Lưu ý: Mặc định kích thước mình thiết lập là 50px. nếu bạn muốn thay đổi kích thước avatar chỉ cần chỉnh sửa CSS trên.

- Nếu bạn muốn bo góc cho avantar như hình dưới:

- Dán đoạn code bên dưới vào trước thẻ ]]></b:skin>:

.avatar-image-container, .avatar-image-container img {
 max-width: 50px !important;
 width: 50px !important;
 max-height: 50px !important;
 height: 50px !important;
 padding: 0 !important;
 border: 0px;
 -webkit-border-radius: 999px;
 -moz-border-radius: 999px;
 border-radius: 999px;
}

.avatar-image-container{
 border:3px solid #fff !important;
 -webkit-box-shadow: 0 1px 2px #BBB;
 -moz-box-shadow: 0 1px 2px #BBB;
 box-shadow: 0 1px 2px #BBB;
}

- Lưu mẫu lại và kiểm tra kết quả nha!

---

- Với các bạn sử dụng mẫu Free Blogger Template Style của các trang Web cung cấp thì các bạn chú ý chỉnh sửa đoạn code có sẵn trong template tương tự như sau:

.avatar-image-container{
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiroDyBcGP-QtfJ43BJoCtd0XmTkXdppqFSTgSLMuB_r_nq_0h7F-dtLfyaTIMCOR6Y89ZDD-0FNFTEVWurxGcL2E09Lod-f5GrtjY4srBRqSiVas7jEGMgWMd5leIvds0jELEY42ajfFc/s0/comment-avatar.jpg);
 width:50px;
 height:50px;
 float:right;
 margin:5px 10px 5px 5px;
 border:1px solid #ddd;
}
.avatar-image-container img{
 width:50px;
 height:50px;
}

Chúc thành công!