Hướng dẫn hiển thị ảnh gốc trong mọi bài viết của Blogger

Lâu rồi mình không viết bài về code và hôm nay có bạn hỏi đến nên cũng ngứa nghề, trong bài viết này mình sẽ hướng dẫn các bạn giải đáp câu hỏi: “Luôn luôn hiển thị ảnh với kích thước gốc trong mọi bài viết của blogger, mà không cần chỉnh sửa kích thước khi viết bài”!!!

Blogger
Blogger

Như các bạn biết thì lúc upload hình ảnh và chèn vào bài viết của blogger chúng ta hay chỉnh lại kích thước gốc, hoặc to nhất để hình ảnh hiển thị rõ nét. Về cơ bản thì blogger luôn luôn lưu ảnh gốc của chúng ta kèm theo một loạt ảnh với kích thước khác nhau theo url của ảnh.

Ví dụ:

https://1.bp.blogspot.com/-duGQu6m9PZA/YH2LPE7clAI/AAAAAAAAAmI/Z0KNztujajkm_4AarzeXoZdOAz_VS887gCLcBGAsYHQ/s320/0035.jpg

Ảnh ở trên sẽ có kích thước chiều rộng là 320px, nếu các bạn thay thế s320 thành s0 thì sẽ hiển thị ảnh gốc.

Vậy trong bài này mình sẽ share code tự động thay thế link ảnh về ảnh gốc cho blogger mỗi khi bài viết được hiển thị.

Cách 1: Sử dụng fancybox

Cách này lúc ảnh hiển thị vẫn sẽ là ảnh nhỏ, nhưng khi nhấn vào ảnh sẽ hiển thị box ảnh trong đó là các ảnh gốc

Bước 1: Đăng nhập Blogger > Chủ đề > Chọn Chỉnh sửa HTML.

Bước 2: Tìm đến đoạn data:post.body và dán code này ngay bên dưới

Sử dụng fancybox


Cách 2:  Thay thế trực tiếp ảnh gốc khi load trang

Giống như bước 2 ở cách 1. Nhưng dán đoạn code này vào

Thay thế ảnh trực tiếp

Cách 3: Thay thế link ảnh khi viết bài

Khi soạn bài bạn chuyển toàn bộ sang HTML và replace đoạn /s320/ thành /s0/ sau đó dán trở lại trình soạn thảo là xong.

Lưu ý: Nhớ thay class .post-body trong code của mình thành class trong blog của bạn nhé, ví không phải blog nào cũng có giao diện giống nhau

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

Exit mobile version