Chia footer của blogger thành 3 cột như thế nào?

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

Blog mình cũng đang sử dụng code này

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 :

<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 vui vẻ!

nguồn : trollvl.com