"Chia cột cho blogspot bằng css"

(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 Blogger
2. 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

Xem khác cùng chủ đề

10 nhận xét | Viết lời bình

6/11/2013 12:31:00 SA Trả lời

Ad ơi, cho mình hỏi. Chia cột xong chỉ viết được nội dung vào html thôi hả?

Admin
6/11/2013 01:57:00 SA Trả lời

Ở nội dung thì bạn viết gì cũng được cả.

1/13/2015 07:51:00 CH Trả lời

mình đã làm theo nhưng cái phần tiêu đề cột h2 hok hiện ra? chỉ mình với

Admin
1/13/2015 10:08:00 CH Trả lời

Bạn đã thực hiện ở site nào?

5/01/2015 04:51:00 SA Trả lời

nếu em muốn chia phần nội dung content của blog ra thành các phần với item khác nhau để khi post bài mới thì bài đó sẽ hiện đúng trong menu đó theo label thì làm thế nào ạ? ví dụ như trang này http://tiengduc.net/. Cám ơn anh.

5/08/2015 09:54:00 SA Trả lời

Bạn ơi cho mình hỏi sao cái blog của mình bài đăng nó lại hiện lung tung vậy bạn @@
http://demohopgia.blogspot.com/search/label/B%C3%B3ng%20%C4%91%C3%A8n%20m%C3%A1y%20chi%E1%BA%BFu%20Eiki
Giúp mình với nhé :) Thank bạn !!!

Admin
5/09/2015 07:00:00 SA Trả lời

Template bạn đang sử dụng ở đâu có vậy bạn?

5/10/2015 11:02:00 CH Trả lời

Mình xin anh mình :) Ông ấy mua về lm công ty thế là thấy đẹp xin mà ko biets edit :((
Giúp mình với

Admin
5/12/2015 08:45:00 SA Trả lời

Sorry bạn! Đối với template do bên mình thiết kế thì mình chỉ hỗ trợ khách hàng mua trực tiếp bên mình. Còn thông qua người khác bên mình không support được bạn thông cảm nhé.

5/14/2015 09:42:00 CH Trả lời

Cái này bạn phải sử dụng JS để tạo các widget hiển thị bài đăng theo label.

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang