This site uses cookies for analytics, personalized content and ads. By continuing to browse this site, you agree to this use.
Author Image Sunday, 7 January 2018

[Blogger] Change Blogger Default Anonymous Avatar


Khi bạn sử dụng hệ thống bình luận mà blogger cung cấp, nếu như hồ sơ người dùng chưa có avatar thì blogger sẽ mặc định thay nó bằng 1 ảnh ẩn danh hoặc logo của blog như hình

Và nếu như bạn muốn đổi nó chỉ cần áp dụng 1 thủ thuật rất nhỏ bằng cách can thiệp css hoặc js. Đây là hình ảnh khi tôi đã đổi avatar mặc định
Nhìn rất ngầu đúng không. Giờ bắt tay làm nhé

I. Can thiệp CSS

Bạn mở phần bài viết có nhận xét chứa logo ẩn danh lên và kiểm tra phần tử trang bằng phím F12

Chọn phần tử và trỏ tới ảnh như hình

Khi đó cửa sổ Developer tools sẽ hiển thị code html và css cho bạn. Bạn chỉ cần quan tâm tới đường dẫn của ảnh (thuộc tính src) và css độ rộng + chiều cao như tôi đánh dấu

Giờ bạn chỉ cần chèn CSS theo cú pháp sau
.comments .avatar-image-container img[src="thuộc_tính_src"] {
    content: url(link_ảnh_thay thế) !important
}
Theo ví dụ của tôi thì sẽ tương tự như sau
.comments .avatar-image-container img[src="//lh3.googleusercontent.com/zFdxGE77vvD2w5xHy6jkVuElKv-U9_9qLkRYK8OnbDeJPtjSZ82UPq5w6hJ-SA=s35"]{
content:url(//1.bp.blogspot.com/-6hGXeQMY4DU/WlGV1Et9BuI/AAAAAAAAEMg/YJfnovAFkNIXQgF2vOUKuwHqerO3XlxNwCLcBGAs/s45/blogger-user.png) !important
}
Bạn lưu ý phần src phải khớp với code HTML ở cửa sổ F12 nhé, 1 số src sẽ có thêm http:// hoặc https:// một số thì không tốt nhất bạn nên copy cho đỡ nhầm lẫn dẫn đến code không hoạt động

Trong đó phần ảnh thay thế bạn nên chọn độ rộng chiều cao (sxxx) khớp với css đã đặt trước để giảm được size khi load trang. Như ví dụ thì tôi để s45, bạn nên upload ảnh lên blogger thì size ảnh có thể thay đổi trực tiếp trên link, tham khảo bài viết Hướng dẫn upload ảnh lên Google Photos và lấy link ảnh

Ảnh thay thế bạn có thể tìm trên google với từ khóa "Anonymous Icon" hoặc tự tạo ảnh theo ý thích của mình

Lưu lại và kiểm tra thành quả

II, Can thiệp Jquery

Bạn cũng tiến hành lấy src tương tự như trên sau đó dán tiến hành thay thế nó bằng đoạn code sau

<script type='text/javascript'>//<![CDATA[
$("img[src='//lh3.googleusercontent.com/zFdxGE77vvD2w5xHy6jkVuElKv-U9_9qLkRYK8OnbDeJPtjSZ82UPq5w6hJ-SA=s35']")
.attr('src', '//1.bp.blogspot.com/-6hGXeQMY4DU/WlGV1Et9BuI/AAAAAAAAEMg/YJfnovAFkNIXQgF2vOUKuwHqerO3XlxNwCLcBGAs/s45/blogger-user.png')
//]]></script>

Sửa src cũ và src mới theo blog của bạn, Kết quả bạn thu được cũng tương tự như sử dụng css

Khi đã là 1 webmaster ngoài chăm chút nội dung bạn cũng cần chăm chút tỉ mỉ tới giao diện, thường xuyên cập nhật những tiện ích mới, những thủ thuật nhỏ nhưng rất hữu ích điều đó cũng 1 phần thể hiện đẳng cấp của bạn và ghi điểm với người xem

Chúc bạn thành công !
Comments:
Bạn được tự do bày tỏ quan điểm nhưng nghiêm cấm spam
  • Chèn ảnh theo mẫu [img]link[/img]
  • Chèn video Youtube theo mẫu [youtube]link[/youtube]
  • Chèn code theo mẫu [pre]code[/pre]. Lưu ý: mã hóa code trước khi bình luận

  • Quang Thắng 10/11/2018 04:53:00 PM
    Bạn cho mình hỏi làm sao để đổi tên Unknow vậy bạn?
    Please wait while i am loading Facebook SDK js