Một vấn đề thường hay gặp trong thiết kế blog dựa trên nền CSS là bố cục các cột không được đồng đều về chiều cao. Ví dụ, trong thiết kế mẫu Blog gồm 2 hoặc 3 cột thì các Sidebar thường không đồng nhất về chiều cao so với cột bài viết chính. Vấn đề này cần đặc biệt chú ý khi màu nền (background) hay một hình ảnh được sử dụng trong sidebar mà không đồng nhất chiều dài với trang.
Qua bài viết của Armanda mới đây, tôi xin trình bày với các bạn về cách sử dụng Javacript để thiết kế blog với 2 hay 3 cột các sidebar và phần bài viêt chính (main) có chiều cao ngang bằng nhau đảm bảo hài hoà về bố cục.
Cơ bản về hoạt động của Script cột đối xứng “Matching Columns”
Trong hướng này , bằng cách sử dụng mã
“Matching Columns” JavaScript được phát triển bởi Alejandro Gervasio. và được sửa đổi để làm việc tốt trong trình duyệt FireFox bởi Stefan Mischook tại trang web Killersites.com. Bạn có thể đọc bài viết gốc và xem video hướng dẫn về vần đề này tại “
over at the Killersites blog“.
Mã JavaScript “matcing columns” làm cho các cột có chiều cao cân xứng hoà hợp với nhau bằng các sử dụng CSS “class”. Nó sẽ tìm kiếm chiều cao nhất của cột cao nhât và sử dụng độ cao này đề tạo các CSS khai báo để đảm bảo cho tất cả các cột khác có chiều cao tương tự.
Ví dụ: nếu bạn sử dụng lớp “column” cho cả hai thành phần: Phần bài viết chính và các sidebar trong mẫu blog, script này sẽ thực hiện đảm bảo cho việc phần bài viết chính và các sidebar xuất hiện trên trình duyệt với chiều cao tương đồng nhau.
“Matching Columns” JavaScripts sử dụng các tập tin mở rộng (external files) để liên kết tới phần đầu trang weblog. Tuy nhiên, Armanda đã dùng thủ thuật để sử dụng mã Javacript ngay bên trong mẫu Blog nhằm tránh việc phải sử dụng tập tin JavaScript lưu trữ ở host mở rộng (hay nối cách khác là lưu trữ bởi host ngoài).
Hướng dẫn cách thêm chức năng “Matching Columns” vào Bố cục (Layout) Blogger
Bước đầu tiên để tạo chiều cao cột phù hợp trong layout của Blogger là thêm mã JavaScript vào phần đầu của mẫu blog.
Cách này rất đơn giản! Tất cả việc bạn phải làm là chỉ cần copy toàn bộ mã trong bảng dưới và dán vào phía trên của tag </head> trong mẫu Blogger của bạn (bạn phải chắc chắn không để thiếu một phần nào trong mã dưới):