Cách chỉnh kích thước hình ảnh tự động trên blogger


Các hình ảnh trên blog có đôi khi lộn xộn với các kích cỡ to nhỏ khác nhau. Điều này sẽ làm cho web/ blog trông không được đẹp mắt cho lăm, ảnh hưởng đến trải nghiệm của người xem.

Mẹo nhỏ sau đây sẽ giúp cho bạn tiết kiệm được thời gian mà vẫn điều chỉnh được các kích thước hình ảnh trên blog của mình theo như ý muốn.





Hình trên sau khi điều chỉnh vừa đúng bằng chiều ngang cảu bài post. Như vậy bạn có thấy  đẹp mắt và chuyên nghiệp phải không nào..


Mình giới thiệu vậy là đủ rồi, bây giờ đi vào phần chi tiết nhé.

1. Code điều chỉnh tất cả các hình ành trên blog fit vừa vặn với khung viền bài post :



.post-body img {
width:100%;
height:100%;
display: block;
}
Cách chèn code: Đầu tiên các bạn mở Blogger dashboard, rồi đi đến  “Template” , rồi qua “Customize.”
Chọn thẻ “Advanced” rồi kéo xuống mở ô “Add CSS” and copy/paste đoạn code ở trên vào ô trống là xong nhé. 
Nói thì dài dòng vậy chứ đối với bạn nào đã làm quen thì rất đơn giản


2) Click “Advanced” and then scroll down and click on “Add CSS” and copy/paste the following code into the white box:
Với code tùy chọn này, cho dù bạn set-up hình ảnh trên blog bao nhiêu thì đều được tự động điều chỉnh về cùng một kích cỡ bang với bề ngang bài đăng.

Điều này đôi lúc cũng có một số bất tiện là nhiều hình ảnh vớ độ phân giải thấp, mà được phóng lớn 100%..thì các bạn sẽ hiều chuyện gì xảy ra rồi đó...Hình sẽ bị vỡ  và không được sắt nét. Tôi sẽ chỉ cho các bạn fix lỗi này ở phần sau nhé.

Nếu bạn nào rành thì chèn vào thẻ <b:skin>.....</b:skin> cũng được. Vị trí chèn ngay trước : ]]></b:skin>


2. Code điều chỉnh kích cỡ tối đa cho hình ảnh vừa bằng chiều ngang bài đăng



.post-body img {
max-width: 100%;
max-height: auto;
display: block;
margin: auto;
}

Với code này, đôi lúc các bạn set-up hình quá lớn kéo dãn ra ngoài khung của bài đăng, trông sẽ không được đẹp mắt, thì sẽ tự động co lại vừa vặn vào khung bài.

Code này là một bổ sung hoàn hảo cho code số 1 ở trên. Ngoài ra các bạn cũng có thể một số tùy biến nhỏ mà các baạn nên thử và trải nghiệm sao cho thích hợp với blog của mình

Chúc các bạn có một blog đẹp và không quên like share bài nếu thấy cho ích nhé.


Đăng nhận xét

!❄♡ Góp ý và bình luận nhanh:
✪★ Vui lòng để lại comment yêu cầu của các bạn lên khung bình luận bên dưới để được hỗ trợ nhanh nhất từ chúng tôi.
✪★ Comment hình ảnh dễ dàng bằng cách dán link ảnh hay link video trực tiếp vào khung bình luận.
✪★ Vui lòng để lại bình luận hay yêu cầu với có tên hay nick name thật của của các bạn để được hỗ trợ nhanh nhất.
✪★ Chúc các bạn có thật nhiều thành công nhé!

Mới hơn Cũ hơn