Thư viện

Trải nghiệm

Thứ Sáu, tháng 1 27, 2012

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

Khắc phục lỗi Avantar của Comment cho Blogspot, thủ thuậy làm đẹp blogspot, thủ thuật blogspot

Chia sẻ:
Khắc phục lỗi Avantar của Comment cho Blogspot - by: http://namkna.blogspot.com/
Đâ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:
Khắc phục lỗi Avantar của Comment cho Blogspot - by: http://namkna.blogspot.com/
Sau khi thực hiện thủ thuật:
Khắc phục lỗi Avantar của Comment cho Blogspot - by: http://namkna.blogspot.com/
☼ 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:
Khắc phục lỗi Avantar của Comment cho Blogspot
- 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(http://2.bp.blogspot.com/-HSEXpSe_GdY/TxYBq2wo2cI/AAAAAAAAASE/IIaKhMb7VtE/s000/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!

12 nhận xét:

  1. Oke,bài viết hữu ích,thanks nhóe.hihi

    Trả lờiXóa
  2. Mình chỉnh rồi nó vẫn cứ lòe ra nè

    Trả lờiXóa
  3. @Mr.Nguyễn Hải ™ Nếu nó trang theo chiều ngang như hình trên thì bạn chỉnh thông số Width
    nếu nod tràn theo chiều dọc thì chỉnh thông số height là Ok
    nếu tràn theo 2 chiều thì chỉnh cả 2 thông số
    Chúc thành công :3) :3)

    Trả lờiXóa
  4. @FairstarUh, à xem nè http://www.alexa.com/siteinfo/http://nguyenhaicntt.blogspot.com , mới lập chưa đến 5 thắng, rank như vạy chắc không tồi, hihi

    Trả lờiXóa
  5. Bạn ơi cho mình hỏi là thủ tục để comment rườm rà quá, có cách nào làm cho blog của mình comment dễ hơn không? Ở blog của mình, chắc phải click chuột hôn 10 bước mới có cái commnet, bạn biết giúp mình với

    Trả lờiXóa
  6. @Jinda Bạn đăng nhập vào Blog
    - Chọn Cài Đặt
    - Chọn Nhận Xét
    - Tại Phần Kiểm duyệt nhận xét bạn chọn Không Bao giờ
    - Tại Phần Hiển thị xác minh từ cho các nhận xét? bạn chọn Không
    - Kéo xuống cuối bấm chọn LƯU CÀI ĐẶT là xong.
    - Chúc thành công!

    Trả lờiXóa
  7. Hic! Mình làm y như vậy rùi mà không được. cả cái hiển thị người theo dõi cũng bay luôn. Nó nói là "Xin chỉ lại lỗi trên tiêu đề này" mà mình có thấy lỗi gì đâu! Một số bạn không đăng ký được gửi mail phản ánh với mình. Bạn có bí kiếp gì cứu mình với. Xin đa tạ!

    Trả lờiXóa
  8. mà sao bạn vào được blog của mình hay quá vậy?

    Trả lờiXóa
  9. @Jinda Cái mình chỉ bên trên không liên quan gì đến Widget người theo dõi cả. Cách đó để bỏ đi phần yêu cầu nhập mã khi nhận xét mà.
    - Mình vào Blog bạn qua hồ sơ người của bạn đó.:3) :3) :3)

    Trả lờiXóa
  10. Anh Nam onl thì add cái yahoo em, qua teamview em nhờ tí chuyện ạ .avatar-image-container img{width:32px;height:32px;}

    Trả lờiXóa
  11. @vlpm4st3r Em cứ hỏi đi. Mấy cái về Avantar anh xem code chỉnh được mà :3) :3)

    Trả lờiXóa