[Thủ thuật] Thủ thuật tạo nhiều cột widget trong blog

Bạn có bao giờ nhìn thấy phần footer của 1 trang blog nào đó được chia thành 2, 3 hay 4 cột chưa. Hôm nay mình sẽ giới thiệu thủ thuật này cho các bạn.

Để làm điều này, mình khuyên các bạn nên tạo 1 blog mới để thử nếu như bạn có ít kinh nghiệm về chỉnh sửa template của blogger. Không nên thực hiện trực tiếp tên blog của mình khi mà mình chưa dám chắc. Nếu bạn đã khá rành về bố cục blog trong phần HTML (cũng như code CSS) thì mình không ngăn cản bạn làm điều này.

Bước đầu tiên chúng ta cần chuẩn bị là chú ý đến độ rộng của cột mà ta muốn chia nhỏ thành nhiều cộ, số lượng cột mà chúng ta sẽ làm, khoảng cách từ cột này đến cột kia.

Bây giờ mình sẽ hướng dẫn cho các bạn ở mẫu có độ rộng là 660px, và ở đây chúng ta chia thành 3 cột. Như vậy 660px=3x220px, với khoảng cách giữa các cột (padding) là 10px thì độ rộng của các cột theo tính tóan là 205px.

Bây giờ bắt đầu:
1. Đăng nhập blog -> vào chỉnh sửa code HTML (ko nhấn vào mở rộng tiện ích)
2. Chèn đọan CSS bên dưới trên dòng ]]></b:skin>

Code:

/* bottom
==================== */

#bottom {
width: 660px;
position: relative;
clear:both;
margin: 0 auto;
color:#fff;
float: left;
background:#BDBABD;
padding: 15px 0 15px 0;
}

#bottom h2 {
padding: 5px 0 2px 0;
margin: 0 0 10px 0;
color:#ff5a00;
font-size: 24px;
letter-spacing: -1px;
border-bottom: 1px solid #fff;
}

#bottom ul {
padding: 0;
margin: 0;
}

#bottom ul li {
line-height: 26px;
list-style-type: none;
border-bottom: 1px dashed #031c5d;
}

#bottom ul li a {
display: block;
padding: 0 10px;
color:#0701FD;
text-decoration: none;

}
#bottom ul li a:hover {
background: #B1ACB1;
}

#left-bottom {
width: 205px;
float: left;
padding-left:10px;
}

#center-bottom {
width: 205px;
float: left;
padding-left:10px;
}

#right-bottom {
width: 205px;
float: left;
padding: 0 5px 0 10px;
}

4. Tìm đọan code sau:

Code:


<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

5. Chèn đọan code bên dưới ngày trên đọan code vừa tìm được:

Code:

<div id='bottom'>

<b:section class='bottom' id='left-bottom'/>

<b:section class='bottom' id='center-bottom'/>

<b:section class='bottom' id='right-bottom'/>

</div>

6. Save template.
Hình minh họa
Trước khi thực hiện thủ thuật

Sau khi thực hiện thủ thuật

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