http://www.itechplus.info/2011/03/chen-2-cot-widget-vao-main-wrapper.html

Chèn 2 cột widget vào Main-wrapper

21:58 | Ngày 28 tháng 3 năm 2011

Chắc hẳn bạn đã từng thấy một website nào đó ( như iTechPlus.info chẳng hạn ) mà phần main bao gồm 2 cột song song chứa nhiều widget, mỗi widget tương ứng với các trương mục ( Label ) trên website đó.

Thực ra đây là một thủ thuật đơn giản, chỉ thêm một vài đoạn code CSS là bạn có thể làm được điều này. Và cũng theo yêu cầu của một số bạn comment trên iTechPlus.info, nên hôm nay tôi sẽ hướng dẫn các bạn cách tạo\chèn 2 cột widget vào main-wrapper trong Blogger template.

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>

#itech2column-wrapper{width:680px;float:left;word-wrap:break-word;overflow:hidden}

#itech2columnleft-wrapper{width:335px;float:left;word-wrap:break-word;overflow:hidden}

#itech2columnright-wrapper{width:335px;float:right;margin-left:10px;word-wrap:break-word;overflow:hidden}

.itech2column .widget{background:#fff;border:1px solid #ccc; height:325px; overflow:hidden; margin:5px 0; padding:10px}

.itech2column h2{background:#333;color:#fff;line-height:1.4em;padding:2px 10px;margin-bottom:1em}

Trong đoạn code trên :

• width:680px : chiều rộng của widget
• width:335px : chiều rộng của 2 cột widget
• height:325px : 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='itech2column-wrapper'>

<div id='itech2columnleft-wrapper'>

<b:section class='itech2column' id='itech2columnleft' preferred='yes'/>

</div>

<div id='itech2columnright-wrapper'>

<b:section class='itech2column' id='itech2columnright' 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 !

iTechPlus