Chia Main Body thành 2 hay nhiều cột trong Blogger Template

Main Body là thành phần quan trọng nhất trong template Blogspot, là nơi chứa đựng gần như toàn bộ nội dung của một Blog, nhưng khả năng tùy ...

Main Body là thành phần quan trọng nhất trong template Blogspot, là nơi chứa đựng gần như toàn bộ nội dung của một Blog, nhưng khả năng tùy biến lại rất hạn chế.

Blogger Template Layout

Để tránh sự nhàm chán và tạo nên sự độc đáo khác biệt, bài viết dưới đây iTechPlus sẽ hướng dẫn các bạn một vài thao tác đơn giản để chia Main Body thành 2 hay nhiều cột với kích thước tùy ý.

Hình minh họa :

Main Post body theo mặc định

 

Main Post body sau khi chia làm 2 cột

DEMO

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 </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>

* Các bạn lưu ý code in đậm màu đỏ và thay thế cho phù hợp

Ở ví dụ trên, Main Body được chia làm 2 phần có tổng chiều rộng là 600px, được tính theo công thức :

Main Body = 2x265px + 2x15px + 4x10px = 600px

Do vậy, để chia thành 3,4 hay n phần thì bạn cần áp dụng công thức trên để tính toán cho hợp lý.

3. Tìm trong template đoạn code bên dưới

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

và thay thế thành

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

Lưu ý : Khi sử dụng thủ thuật này, nhất thiết bạn phải chèn JumpLink cho mỗi bài post, hoặc sử dụng Auto Readmore đã được giới thiệu ở đây.

4. Save Template và tận hưởng thành quả nào các bạn !

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