Blog với 3 cột ở footer là mẫu được ưa dùng vì thiết kế đơn giản, khoa học, dễ nhìn. Có rất nhiều cách để tạo footer cho blogger nhưng mình hướng dẫn bạn một cách đơn giản và nhanh nhất, tuy nhiên sau đó bạn sẽ phải chỉnh sửa lại một chút sao cho phù hợp với blog của mình.
Hướng dẫn chia footer của blogger thành 3 cột
1. Đăng nhập vào Blogger > Layout > Edit HTML (không cần Mở rộng Mẫu tiện ích).
2. Thay thế thẻ <b:section class='footer' id='footer'/> bằng đoạn code dưới đây :
(Có khi bạn chỉ cần tìm thẻ id='footer' mới thấy)
<div id='customize-footer-column'>
<div id='Footer1' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='Col1' preferred='yes' style='float:left;'>
</b:section>
</div>
<div id='Footer2' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='Col2' preferred='yes' style='float:left;'>
</b:section>
</div>
<div id='Footer3' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='Col3' preferred='yes' style='float:right;'>
</b:section>
</div>
<div style='clear:both;'/>
</div>
3. Tìm thẻ ]]></b:skin> và dán đoạn code này ngay bên trên
#customize-footer-column {
clear:both;
}
.footer-column {
padding: 10px;
border-top:1px solid #D8D8D8
}
Save lại sau đó vào trang Bố cục xem kết quả
Bạn hãy chỉnh sửa lại sao cho phù hợp với blog của mình. Ngoài ra nếu muốn các bạn cũng có thể chia footer thành 4 cột hoặc hơn thế nữa nếu thích bằng cách thêm tiếp code dạng như sau vào trước thẻ <div style='clear:both;'/> trong code phía trên
<div id='FooterX' style='width: Y%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='ColX' preferred='yes' style='float:right;'>
</b:section>
</div>
Trong đó X là số thứ tự của cột và Y là % độ rộng của cột đó. Tất nhiên nếu chia 4 cột bạn phải cho % nhỏ đi thì nhìn nó mới phù hợp, ví dụ như chia thành 4 cột tốt nhất các bạn để mỗi cột rộng 25% là đẹp nhất
Chúc các bạn thành công!
