(Traidatmui.com) - Hôm nay mình sẽ giúp bạn chia cột trên blog của bạn nhe, thủ thuật này chúng ta sẽ chỉ dùng css cho việc chia cột. Nếu bạn muốn thêm nhiều tiện ích trên nền blog và muốn chia chúng ra thành nhiều cột khác nhau thì thủ thuật này có lẽ là hữu ích cho bạn. Không nói nhiều nữa chúng ta bắt đầu đi vào ngay thủ thuật này.Hình ảnh minh họa
1. Đăng nhập Blogger2. Vào thiết kế (Design)
3. Chọn chỉnh sửa HTML
4. Chèn code css bên dưới vào trước thẻ ]]></b:skin>
.container {
margin: 0 auto;
width: 600px; /* độ rộng của phần chứa các cột*/
overflow: hidden;
line-height:1.3em;
}
ul.col li h2 {
font: 18px Times;
font-weight:bold;
color:#000;
margin: 0px -20px 0px -20px;
padding: 3px 0;
background: #ccc; /* màu nền tiêu đề các cột*/
text-align:center;
text-transform:uppercase;
}
ul.col {
margin: 10px 0;
padding: 0;
list-style: none;
float: left;
}
ul.col li {
float: left;
background: #ddd; /* màu nền của phần nội dung các cột*/
color:#000;
width: 250px; /* độ rộng của mỗi cột*/
padding: 0px 20px 0px 20px;
margin: 0px 10px 10px 0;
}
Chỉnh code: Bạn lưu ý độ rộng của các cột và phần chứa các cột, nếu bạn thiết lập độ rộng các phần này không phù hợp nó sẽ bị lỗi, không hiển thị như mong muốn.
Độ rộng của các cột được xác định như sau: Column Width = container Width/Columns numbers - (Left and Right padding of column + Right margin of column). Ví dụ như code css trên ta có 600px/2 - (20px + 20px + 10px) = 250px
5. Save template lại và trở về phần tử trang
6. Tạo 1 HTML/Javascript và thêm code bên dưới vào nó
<div class="container">
<ul class="col">
<li>
<h2>Tiêu đề 1</h2>
Nội dung cột thứ nhất
</li>
<li>
<h2>Tiêu đề 2</h2>
Nội dung cột thứ 2
</li>
<li>
<h2>Tiêu đề 3</h2>
Nội dung cột thứ 3
</li>
<li>
<h2>Tiêu đề 4</h2>
Nội dung cột thứ 4
</li>
</ul></div>
Chỉnh code:
- Các dòng màu xanh chính là tiêu đề mà bạn muốn đặt cho các nội dung tương ứng.
- Dòng màu đỏ là nơi chứa nội dung của mỗi phần tương ứng với mỗi tiêu đề.
7. Sau khi chỉnh sửa xong bạn save tiện ích lại
Ở trên chúng ta chỉ có 4 nội dung chia thành 2 cột, mỗi phần nằm trông thẻ <li> ... </li> chính là một nội dung, nếu bạn muốn thêm nhiều nội dung hơn, bạn chỉ việc thêm nhiều code như bên dưới vào sau nội dung 4 và chỉnh sửa lại cho phù hợp.
<li>
<h2>Tiêu đề 5</h2>
Nội dung cột thứ 5
</li>
☼ Mở rộng thêm
Ở trên mình chỉ chia các cột ra thành hai phần, một phần bên trái và một phần bên phải (tức chỉ có 2 cột) nếu bạn muốn chia ra thành nhiều cột hơn bạn chỉ cần thiết lập lại độ rộng của các cột theo công thức trên. Ví dụ ở trên mình có 2 cột thì chúng ta chia cho 2 (600px/2), nếu là 3 hoặc 4 cột ta chia 3 hoặc 4... tương tự như vậy bạn thiết lập cho nhiều cột hơn.
Chúc bạn thành công
