Thay đổi Avatar thành viên nào đó của comment Blogger

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKQFHsSnNmQHsVTpRADEwaZnlzvHYPcW83g3IIkampHCktPJqM-AGPr_A9P7u75fQtrwLq3QN9kZOtyKyzgmRm_9ff_9JSwi_RAviLn05OdQZ3ogSeoNMe4r4EsdRzPRlrqQ2erGORGk2h/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

Copy

<script type='text/javascript'>//<![CDATA[
$("img[src='//lh3.googleusercontent.com/zFdxGE77vvD2w5xHy6jkVuElKv-U9_9qLkRYK8OnbDeJPtjSZ82UPq5w6hJ-SA=s35']")
.attr('src', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKQFHsSnNmQHsVTpRADEwaZnlzvHYPcW83g3IIkampHCktPJqM-AGPr_A9P7u75fQtrwLq3QN9kZOtyKyzgmRm_9ff_9JSwi_RAviLn05OdQZ3ogSeoNMe4r4EsdRzPRlrqQ2erGORGk2h/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 !

- Trong quá trình viết bài chúng tôi sẽ có nhiều thiếu sót mong các bạn đóng góp để chúng tôi rút kinh nghiệm hơn !
- Mọi chi tiết xin liên hệ:
- Email: lephuocsinh96@gmail.com
- Facebook: Fb.com/beohoavinh