Loading post navigation ...
 
 

Pro page

3
Nhận xét

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

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

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 template2 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 đỏđộ 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.


Enter your mail address:

3

.LoVe.

em lam` ma` sao no ra co' 1 cai ah` :(

Apulove

Đâu có, ra dc mà :) thanks nhiều

Thế Giới Oriflame

Chào FD.

Mình tạo Widebar thành công nhưng không hiểu vì sao phần Main Post lại bắt đầu dưới phần Widebar chứ không ngang hàng như hình mà FD làm. Tức là nếu mình để Thông tin ở phần Widebar dài thì sẽ tạo 1 khoãng trống rất lớn giữa phần Main Post và Header. Rất mong FD giúp mình. Cảm ơn

www.thegioioriflame.com



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home