Chia main body thành 2 hay nhiều cột

Main body là thành phần chứa toàn bộ nội dung trên blog của bạn. Và để tạo nên sự khác biệt so với giao diện mặc định 1 cột của blogspot ở bài viết này mình sẽ chỉ cách làm sao để chia main body thành 2 hay nhiều cột

Layout và các thành phần trong template

Bạn cũng có thể thấy hiện tại TrollVL đang sử dụng một template mà chia main body làm 2 cột như hình bên dưới

Cách thực hiện

Bước 1: Vào template và chèn đoạn code bên dưới trước thẻ </head>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type="text/css">
.post {position: relative;width: 265px;height: 250px;margin: 0 15px 0 0;padding:10px;float: left;overflow: hidden}
.post-body{margin: 0 auto;padding:0;line-height:1.6em}
.post h3{margin: 0 0 10px; padding:0; line-height:1.3em}
.post-footer{display:none}
.date-header{display:none} 
</style>
</b:if></b:if>

Tùy chỉnh:

• Như ở code trên ta chia main body làm 2 cột với chiều rộng của bài viết là 265px, chiều cao là 250px, khoảng cách giữa hai bài viết là 15px, và khoảng cách giữa bài viết với main body là 10px, vậy ta sẽ tính chiều rộng của main body theo công thức sau:

2x265px + 2x15px + 4x10px = 600px

• Nếu như bạn thiết lập main body nhỏ hơn 600px bài viết trong main body sẽ không được chia thành 2 cột. Bạn cũng có thể thay đổi các thông số được tô màu đỏ sao cho phù hợp với blog của mình 
• Đoạn code được tô màu xanh có tác dụng làm ẩn phần footer của bài viết và hiển thị ngày tháng trên đầu bài viết, nếu không muốn ẩn hai phần này bạn có thể xóa chúng đi. Tuy nhiên nếu chia main body làm 2 hay nhiều cột mà để 2 phần này nhìn sẽ không được đẹp mắt

Bước 2: Tìm đoạn code sau trong template

#blog-pager {
  text-align: center;
}

Và thay thế chúng bằng

#blog-pager {
  text-align: center;clear:both;padding-top:20px;
} 

• Đoạn code được thế có tác dụng tạo ra khoảng cách giữa hai bài trên và bài dưới

Bước 3: Lưu lại template
Đến đây bạn đã hoàn thành chia main body thành 2 cột rồi nhưng để cho gọn gàng bạn khi viết bài bạn cần phải sử dụng chức năng "Chèn dấu ngắt nhảy" hoặc bạn có thể sử dụng  auto readmore theo bài viết sau

Tham khảo Thủ Thuật  Good