Thứ Sáu, 7 tháng 5, 2010

Tự động điều chỉnh kích thước ảnh trong Blogger Post


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 800px đượ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.
not-proper-aligned
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 800px hiển thị hết (được điều chỉnh) trong phần bài viết với chiều rộng 500px.
proper-aligned
Để 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ới chiều rộng của phần bài viết (Post section) là 500px.
Truy cập vào Blogger >> Layout >> Edit/Html 
Chèn đoạn mã dưới:
.post img {
max-width:500px;
max-height:500px;
min-width:200px;
min-height:200px;
padding : 10px;
clear: both;
}
vào trước tag ]]>
Với đoạn mã bạn vừa thêm vào thì các bức ảnh có chiều rộng hoặc chiều cao lớn hơn 500px sẽ tự điều chỉnh về chiều rộng và chiều cao 500px, tương tự các bức ảnh có chiều rộng hoặc chiều cao nhỏ hơn 200px sẽ tụ động điều chỉnh về chiều rộng và chiều cao 200px.
Tuỳ thuộc vào chiều rộng của bài viết (Post sectôn) mà bạn thay đổi chiều rộng và chiều cao cho phù hợp
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à 500PX x 400PX 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.
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 img trong  Blogger >> Layout >>Edit/Html  và chỉnh sửa chúng.
Chúc các bạn thành công.
Thủ thuật được tham khảo theo hướng dẫn của anshuldudeja.

3 nhận xét:

  1. TUI ĐANG CẦN THỨ NÀY. CẢM ƠN.
    MUỐN CHỈNH RỘNG PHẦN BÀI ĐĂNG NHƯ BẠN THÌ LÀM CÁCH NÀO ?

    Trả lờiXóa
  2. 1.Bạn Truy cập vào Blogger:

    - Truy cập vào Blogger Bảng điều khiển (Dashboard) > Bố cục (Layout) > Chỉnh sửa HTML (Edit HTML)
    2. Điều chỉnh kích thước min và MAX của ảnh hiển thị trong Blogger:

    - Để 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ìm:
    ]]></b:skin>

    Trả lờiXóa
  3. và đặt trước nó đoạn mã như mình đã hướng dẫn như trên.

    Trả lờiXóa

Hãy để lại tin nhắn của bạn nhé. Mình luôn muốn nghe ý kiến của bạn. Cám ơn bạn đã ghé thăm blog nha. See you