6/8/13

Sửa lỗi ảnh tràn ra ngoài khung bài viết trong Blog

Đăng bởi Admin | 6/8/13 | 0 nhận xét

Sửa lỗi ảnh tràn ra ngoài khung bài viết trong Blogger
Rất nhiều Blog gặp phải lỗi kích thước ảnh tràn ra ngoài phần hiển thị bài viết trong Blog. Giải quyết triệt để vấn đề này tương đối đơn giản bằng dòng lệnh trong CSS.

- Trước hết, các bạn xem xét các lỗi mắc phải với kích thước ảnh hiển thị trong bài viết:
1. Chiều rộng bức ảnh 900px được rút ngắn chiều rộng để phù hợp với chiều rộng 500px của bài viết, phần còn lại của bức ảnh bị ẩn không hiển thị.
2. Hiển thị ảnh độ rộng 800px bị tràn ra khỏi phần độ rộng 500px của bài viết.
Xem demo:   VIew Demo
Ảnh minh họa khi ảnh bị trang ra phần sidebar:


Sửa lỗi ảnh tràn ra ngoài khung bài viết trong Blogger
Như 2 lỗi hiển thị trên, để bức ảnh hiển thị chính xác và không làm mất (ẩn) phần nào của bức ảnh như hình minh hoạ dưới: Toàn bộ nội dung bức ảnh có độ rộng 900px hiển thị hết (được điều chỉnh) trong phần bài viết với chiều rộng 500px.
Xem demo:   VIew Demo
Ảnh minh họa sau khi chỉnh sủa:
Sửa lỗi ảnh tràn ra ngoài khung bài viết trong Blogger
Để chúng tự động điều chỉnh hiển thị phù hợp với phần nội dung bài viết các bạn làm như sau: (Ví dụ với chiều rộng của phần bài viết (Post section) là 500px.)

Truy cập vào blogger

1- Đăng nhập (login) vào Blog
2- Vào Mẫu (Template)
3- Chọn Chỉnh sử HTML (Edit HTML) => Tiếp tục (Proceed):

Điều chỉnh kích thước min và MAX của ảnh hiển thị trong Blogger:

4- Để cố định hình ảnh hiển thị trong blogger, với 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, bạn đặt trước ]]></b:skin> đoạn mã sau:
.post img {      
max-width:500px;       
min-width:200px;       
padding : 10px;       
clear: both;       
}
- Điều chỉnh lại max-with và min-with cho phù hợp với phần bài đăng của bạn nha. 
5- Nếu bạn muốn tất cả các hình ảnh hiển thị trong phần bài viết có kích thước cố định là 500 x 400 thì bạn chỉ cần thay thế đoạn code đã hướng dẫn ở trên bằng:
.post img {      
width:500px;       
height:400px;       
padding:10px;       
}
- Giờ đây các hình ảnh hiển thị trên Blog của bạn có kích thước cố định là chiều rộng 500PX và chiều cao 400PX.
Lưu ý: Nếu hình ảnh hiển thị không như ý hoặc không chính xác thì bạn tìm tag .post imgtrong Blogger >> Mẫu (Template) >> Chỉnh sửa HTML (Edit/Html) và chỉnh sửa chúng.

                                                                                                                 Theo: namkna
                                                                                                                 Thu thuat vi tinh 

Không có nhận xét nào:

Đăng nhận xét

Cảm ơn bạn đã nhận xét !
- Bạn có thể chèn link vào nhận xét bằng thẻ: <a href="Link" rel="nofollow">Tên link</a>
- Tạo <b>Chữ đậm</b> và <i>Chữ ngiêng</i> cho nhận xét
- Hãy Chuyển đổi mã code trước khi chèn vào nhận xét
- Hãy bấm Theo dõi dưới chân trang để nhanh chóng nhận được phản hồi từ Thủ thuật vi tính
- Những nhận xét nào không lành mạnh hoặc chèn link spam sẽ bị xóa khỏi blog.

Mã hóa Code

Support : Trick Blogspot | Ghost win | Website Design | Seo Trick | Ghost win | Software Free | Site Map | Back Link | Contact Advertising | ↑ back to top
Ghi rõ nguồn thuthuatvitinhaz.blogspot.com dưới dạng liên kết khi phát hành lại thông tin từ trang này
Copyright © 2013. Thủ thuật Số - All Rights Reserved
Design by Ngân Giang
Xem tốt nhất ở độ phân giải 1024 x 768 pixel
Template by Dameva