Hướng dẫn làm cân bằng chiều cao các cột trong blogger

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):

<!– Equal Columns JavaScript Start –> <script type=’text/javascript’> /* Enables columns to be of the same height for better blog designs. Derived from a script by Alejandro Gervasio. Modified to work in FireFox by Stefan Mischook for Killersites.com Adapted for inline use with Blogger blogs by Amanda Fazani of BloggerBuster.com How it works: just apply the CSS class of 'column' to your pages' main columns. */ function matchColumns(classname){ var divs,contDivs,maxHeight,divHeight,d; // get all <div> elements in the document divs=document.getElementsByTagName('div'); contDivs=[]; // initialize maximum height value maxHeight=0; // iterate over all <div> elements in the document for(var i=0;i<divs.length;i++){ // make collection with <div> elements with class attribute 'container' if(new RegExp("\\b" + classname + "\\b").test(divs[i].className)){ d=divs[i]; contDivs[contDivs.length]=d; // determine height for <div> element if(d.offsetHeight){ divHeight=d.offsetHeight; } else if(d.style.pixelHeight){ divHeight=d.style.pixelHeight; } // calculate maximum height maxHeight=Math.max(maxHeight,divHeight); } } // assign maximum height value to all of container <div> elements for(var i=0;i<contDivs.length;i++){ contDivs[i].style.height=maxHeight + "px"; } } // Runs the script when page loads window.onload=function(){ if(document.getElementsByTagName){ matchColumns('crosscol'); // matchColumns('column'); // } } </script> <!– Equal Columns JavaScript End –>

Sau khi đã dán mã trên xong, công việc tiếp theo là lưu lại công việc đã thực hiện. (Nếu có sai sót trong việc dán code thì sẽ có một bảng thông báo lỗi và chắc chắn bạn không thể lưu lại được, hãy xem sét lại việc copy của bạn xem có chính xác không).
Bây giờ là việc làm cho các phần của layout bạn có chiều cao bằng nhau, bạn cần áp dụng class of “column” vào các phần trong mã của template thực tế. Trong phấn sau, tôi xin giới thiệu với các bạn 2 cách đề thực hiện việc này: (1) Làm cho sidebar và viền bao phần bài viết chính có chiều cao bằng nhau, và (2) Làm tất cả các bài viết có chiều cao bằng nhau (dành cho các mẫu có bài viết xuất hiện kiểu side-by-side).
Làm cho sidebar(s) và các cột bài viết chính có chiều cao bằng nhau
Phương pháp này dùng tốt nhất cho các mẫu có layout gồm tối thiểu một màu cho sidebar (cho dù có hiệu ứng tính năng này với màu nền background hay màu nền của hình ảnh). Có rất nhiều mẫu không tiêu chuẩn sử dụng kiểu thiết kế này đối với layout, do vậy khả năng nhận diện các phần đơn vị tham khảo là khác nhau đối với các mẫu của bạn.
Để làm cho sidebar(s) và cột bài viết chính có chiều cao bằng nahu, bạn cần thêm class của “column” tới phần này trong mẫu (template).
Đối với viền bao “main-wrapper” (phần chứa bài viết blog của bạn) bạn tìm đến dòng lệnh sau trong mẫu:

<div id=’main-wrapper’>

Thêm mã được đánh dấu đỏ như dòng dưới:

<div id=’main-wrapper’ class=’column’>

Sidebar chính có thể được gọi là ‘sidebar-wrap’, ‘left-sidebar’ hay thậm chí là ‘left-bar’ tuỳ thuộc vào mẫu làm việc của bạn. Bạn có thể thể thêm class=’column’ vào vị trí mà bạn cho là thích hợp nhất đối với mẫu của bạn.
Điều này cũng có thể áp dụng đối với cột sidebar thứ hai. Nó có thể được gọi là<div id=’sidebar-right’> ; ‘right-sidebar-wrapper’, ‘new-sidebar-wrapper’ hay với bất kỳ với một cái tên nào đó. Đơn giản chỉ cần thêm class=’column’ vào trong phần tag mà bạn cho rằng tham chiếu đó là chính xác trong mẫu của bạn.
Bây giờ kiểm tra sự thành công trong việc tuỳ chỉnh mẫu thông qua chức năng xem trước (preview) mẫu. Khi bạn thêm JavaScript vào trong mẫu (không sử dụng từ host lưu trữ ngoài) bạn sẽ thấy chiều cao các phần ngang bằng nhau.
Nếu tất cả các công đoạn trên đã tạo ra một mẫu hoàn hảo với các cột có chiều cao bằng nhau thì công việc của bạn là Lưu công việc đã làm lại và xem tác phẩm vừa hoàn thành của mình. Nếu có gì vấn đề khi các cột không ngang bằng về chiều cao thì hãy xoá bỏ tất các chỉnh sửa của bạn và làm lại cẩn thận từ đầu, chú ý đến vị tí bạn đặt class=’column’ trong mẫu.
Làm cho các bài viết có chiều cao bằng nhau.
Phần này thực sự hữu dụng khi bạn sử dụng my recently posted customization to display posts side-by-side on non-item pages (tuỳ biến các bài viết gần đây để hiển thị side-by-side) theo hướng dẫn của Armanda. Sử dụng phương pháp này đảm bảo cho các bài viết xuất hiện dưới dạng lưới “thời trang” với định dạng bài viết tổng hợp ngắn cùng các tiều đề được sắp xếp chính xác.
Bạn cần phải đảm bảo chắc chắn đã checked vào ô “Expand widget templates” trong page Edit HTML “chỉnh sửa HTML“, khi bạn tiến hành thêm class of “column” vào trong widget bài viết chính.
Đầu tiên, bạn cần đảm bảo chắc chắn đã thêm mã JavaScript trước </head> tag trong mẫu của bạn.
Tiếp theo, tìm dòng mã dưới (hoặc tương tự vậy):

<div class=’post’>

Nếu không tìm thấy , bạn tìm:

<div class=’post hentry’>

Hoặc tìm bất kỳ phần tag nào bắt đầu với <div class=’post
Bạn không cần phải thêm class=’column’ vào bởi div đã bao gồm thuộc tính đó. Thay vào đó, bạn chỉ cần đơn giản là thêm vào dòng lệnh:

<div class=’post column‘>

hoặc,

<div class=’post hentry column‘>

Bởi vì các phần này có thể có nhiều hơn một “class” (mặc dù có thể chỉ có một “id”!).
Sau khi thêm lớp mở rộng “extra class” vào phần bài viết, preview mẫu để xem trước các bài viết của bạn đã bằng nhau hay chưa.
Chú ý:
Nếu bạn chọn để thực hiện các bài viết có chiều cao bằng nhau, bạn cần phải xem xét rằng tất cả các bài viết của bạn sẽ hiển thị độ dài như bài viết dài nhất của bạn. Vì , nếu bạn có một bài viết dài, đặc biệt trên trang chủ của bạn-trong khi các bài khác là tương đối ngắn, sẽ có khoảng trống dưới của tất cả các bài viết rút ngắn!
Các cách sử dụng cho phù hợp với cột script
Bạn cũng có thể điều chỉnh tập lệnh này và các phương pháp để thêm cột bằng chiều cao của footer blog (két hợp với three column footer hack , bạn có thể click vào để xem chi tiết bằng tiếng Anh), Hoặc cho bất kỳ các khu vực khác của mẫu blog mà bạn muốn có chiều cao mới đối xứng .
Đơn giản chỉ cần áp dụng class of “column”cho tất cả các đơn vị mà bạn muốn xuất hiện ở trên cùng một chiều cao, và đảm bảo bạn có dán mã JavaScript trước khi đóng </ head> tag trong Blogger mẫu!
Nguồn bài viết: Armanda’s blog

Posted in: Thiết kế blogspot