[Blogspot] Chia Main Body thành 2 hay nhiều cột trong Blogger Template
Thứ Sáu, 4 tháng 3, 2011
|
Thủ thuật blogspot
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ế.
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>
* Các bạn lưu ý code in đậm màu đỏ và thay thế cho phù hợp
3. Tìm trong template đoạn code bên dưới
và thay thế thành
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
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 !
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
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 != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type="text/css">
.post {position: relative;width: 260px;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>
<b:if cond='data:blog.pageType != "item"'>
<style type="text/css">
.post {position: relative;width: 260px;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
3. Tìm trong template đoạn code bên dưới
#blog-pager {
text-align: center;
}
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
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 !
Đọc bài viết này nhé
http://www.bloggerplus.net/2010/05/tuy-chinh-footer-trong-blogspot.html
Chú ý
Chèn phần code thứ 2 vào sau div id='main-wrapper'
Chỉnh sửa đoạn code 3 cho thành 2 phần(vì họ chia là 4)
Sau khi add thêm tiện ích mới thì nhìn vào thấy nó không chia nhưng khi lưu lại và xem blog thì nó tự chia
Có gì thì comment lại nhé
Bài Vnnettips đề cập giống y chang bên MyBloggerTricks.com. Lại không ghi rõ nguồn rồi !:07: