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 biến lại rất hạn chế.
Blogger Template Layout
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 :
Post body theo mặc định
Main Post body theo mặc định
Post body sau khi chia làm 2 cột 
Main Post body sau khi chia làm 2 cột
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 !





Bookmark and Share

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

Vương Bá nói...

Em chào a!
A cho em hỏi chút ah!
Tại sao sau khi mình chia main body ra thành hai cột thì cái phần Trang chủ/ bài đăng cũ hơn nó cứ hiện lên đầu phần Main body a nhỉ.
Nếu muốn cho nó xuống dưới phần bài đăng thì làm thế nào a?
E mong sớm nhận được câu trả lời và góp ý của a!
E cảm ơn!


21:19 14 tháng 6, 2013
Information Technology nói...

Thấy trên mạng có code chia 2 cột khá hay có demo luôn rồi, mọi người xem thử nhé! hehe

Widget chia trang chủ thành 2 cột đẹp mắt cho Blogspot


22:01 1 tháng 11, 2014

Đăng nhận xét

Người theo dõi

 
Return-lên đầu trang Copyright © 2010 Thết kế mẫu by văn tú -odessa-from ukraina| bản quyền bởi vantuodecca