Tạo widebar cho các template 3 cột

Widebar for three columns template

[FD's BlOg] - Widebar thực ra chỉ là tên gọi, đơn giản là 1 sidebar lớn hơn bình thường, sở dĩ nói lớn hơn là do thủ thuật này ứng dụng cho các template có 3 cột. Trong template sẽ có 2 sidebar, và ta chèn thêm widebar này ngay lên trên 2 sidebar đó.

Và thủ thuật này mình chỉ áp dụng cho các template có 2 sidebar cùng nằm 1 bên (trái hoặc phải). Ở đây mình nói chỉ áp dụng cho các template có 2 sidebar nằm cùng 1 bên không hẳn là không áp dụng được cho các template 3 cột khác, nhưng nếu áp dụng sẽ trông không được đẹp cho lắm.

Ứng dụng của widebar này giúp tạo cho bạn một không gian riêng để hiển thị những gì nổi bật, hot của blog bạn, ví dụ như một bảng thông báo quan trọng chẳng hạn.

Hình minh họa thủ thuật :

Hình minh họa kết quả:

 

 ☼ Bắt đầu thủ thuật:
- Đầu tiên bạn chèn code CSS của widebar vào code template
1. Đăng nhập blog
2. Vào bố cục (layout)
3. Vào chỉnh sửa code HTML(edit code HTML), không cần nhấp chọn mở rộng mẫu tiện ích
4. Chèn đọan code CSS của widebar vào trên dòng ]]></b:skin>

#widebar-wrapper {
width:400px;
float:left;
border: 1px solid #ddd;
padding-bottom:10px;
margin-bottom:10px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}
#widebar {
width:400px;
padding:10px 0 5px 10px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

- Chú ý: dòng code màu đỏ là độ rộng của widebar, và nó bằng tổng độ rộng 2 sidebar. Còn code màu xanh là để xác định vị trí cho widebar, nếu 2 cột sidebar của bạn ở bên phải thì sửa lại thành : float:right;

5. Bây giờ cho widebar hiển thị, tìm dòng <div id="main wrapper"> (hoặc tương tự), rồi dán code bên dưới vào ngay sau nó:

<div id='widebar-wrapper'>
<b:section class='sidebar' id='widebar' preferred='yes'>
</b:section></div>

6. Save template.

Chúc các bạn thành công.