Chèn 2 cột tiện ích (Widget) vào Main-wrapper

Bạn đã từng thấy một blog, website nào đó phần main bao gồm 2 cột song song chứa nhiều tiện ích (widget), mỗi widget tương ứng với mỗi nhãn (Label) trên blog, website đó. Chỉ thêm một vài đoạn code là bạn có thể làm được điều này.

Hình minh họa

Cách thực hiện :

1. Vào Thiết kế > Chỉnh sửa HTML

2. Chèn đoạn code bên dưới vào trước thẻ đóng </b:skin>

#column-wrapper{width:620px;float:left;word-wrap:break-word;overflow:hidden}
#columnleft-wrapper{width:305px;float:left;word-wrap:break-word;overflow:hidden}
#columnright-wrapper{width:305px;float:right;margin-left:10px;word-wrap:break-word;overflow:hidden}
.column .widget{background:#fff;border:1px solid #ccc; height:310px; overflow:hidden; margin:5px 0; padding:10px}
.column h2{background:#333;color:#fff;line-height:1.4em;padding:2px 10px;margin-bottom:1em}

Trong đoạn code trên :

• width:620px : chiều rộng của widget
• width:305px : chiều rộng của 2 cột widget
• height:310px : chiều cao của 2 cột widget

Có thể bạn sẽ cần điều chỉnh lại cho phù hợp.

3. Tiếp tục, tìm trong template đoạn code sau :

<div id='main-wrapper'>

và chèn ngay sau nó đoạn code bên dưới :

<div id='column-wrapper'>
<div id='columnleft-wrapper'>
<b:section class='2column' id='columnleft' preferred='yes'/>
</div>
<div id='columnright-wrapper'>
<b:section class='2column' id='columnright' preferred='yes'/>
</div>
<div style='clear:both'/>
</div>

4. Save template

Bây giờ bạn có thể trở lại Phần tử trang và chèn vào đó bất kỳ widget nào bạn thích.

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