Sửa lỗi ảnh tràn ra ngoài khungbài viết Blogspot

3/2/16 | 1 nhận xét
Trong một số mẫu blogspot có nhược điểm khi bạn đăng tải các hình ảnh kích thước lớn với hình ảnh gốc thì hình ảnh của bạn sẽ bị tràn ra khỏi bài viết phá vỡ bố cục trang blog của bạn. Vậy phải làm thế nào để các hình ảnh có thể tự động resize cho vừa với bố cục trang của bạn. Bài viết này mình sẽ hướng dẫn các bạn từng bước để có thể trả lời câu hỏi trên.
Sửa lỗi ảnh tràn ra ngoài khungbài viết Blogspot

Hướng dẫn chi tiết cách sửa lỗi hình ảnh to tràn ra khỏi khung bài viết trong Blogspot:

1. Đăng nhập Blog
2. Vào Mẫu (Template)
3. Chọn chỉnh sửa HTML.
4. Tìm thẻ đóng ]]></b:skin> rồi  chèn trước đoạn mã sau đây:
* Sử dụng giá trị tương đối, mình đánh giá phương pháp này bởi ảnh sẽ hiển thị tốt trên các trình duyệt của điện thoại, máy tính bảng,... nói chung hợp cho các blog thiên về giao diện responsive
.post img {max-width:98% !important}
- Bạn có thể sửa lại giá trị 98% cho phù hợp nếu như ảnh vẫn tràn thì sửa nhỏ hơn đi.
* Ngoài ra bạn có thể sử dụng đoạn code sau:
.post img {      
max-width:500px;       
min-width:200px;       
padding : 10px;       
clear: both;       
}
- Với đoạn code trên thì hình ảnh  to hơn giá trị max thì sẽ tự động điều chỉnh về giá trị max, nếu ảnh nhỏ hơn giá trị min thì sẽ tự điều chỉnh về kích thước min, nhược diểm của đoạn code này là một số icon cảm súc hay logo nhỏ sẽ bị resize lên 200px do vậy nếu có sử dụng những icon và logo bạn hãy sửa giá trị 200 px nhỏ xuống (10px) chẳng hạn.
5. Lưu mẫu của bạn lại và kiểm tra kết quả nhé.
Cảm ơn bạn đã đọc bài viết! Hãy like nếu bài viết có ích →

1 nhận xét:

Unknown
4/1/17, 9:31 PM xóa commnet

Bây giờ blogspot có nhiều mẫu đẹp hơn mà cũng ko có dính tình trạng này. Mình đã áp dụng cho blog Thắng cảnh quê hương của mình và thấy là các mẫu template mới khá ổn đó.

Reply

Post a Comment

≡ NỘI QUY PHẢN HỒI
» Blog nhằm mục đích hướng dẫn, chia sẻ những thông tin cho tất cả mọi người, do vậy để hữu ích chúng tôi rất mong nhận được các phản hồi từ các bạn.
» Những chủ đề chúng tôi đưa ra đều được thử nghiệm và kiểm duyệt trước khi chia sẻ do vậy nếu bạn có bất kỳ thắc mắc hãy để lại nhận xét của bạn, chúng tôi sẽ trả lời khi có phản hồi từ các bạn.
» Hy vọng các bạn để lại những phản hồi có tính chất xây dựng không nên spam link.

Mã Hóa Code