Tạo 3 Cột Phần tử ở phần Footer của Template

™» CGC Blog «™   Nếu Blog bạn chứa nhiều phần tử (element), thì việc tiết kiệm không gian trong template là điều rất cần thiết để tạo ra một bố cục hợp lý và gọn gàng cho Blog. Nhưng không phải Template nào cũng được thiết lập sẵn để cho phép sắp xếp phần tử ở vị trí tùy thích.
Chẳng hạn như đối với giao diện hiện tại của Blog tin học, mặc định template chỉ có 1 sidebar nên đã bị mất đi khá nhiều khoảng trống, chưa kể phần Footer thì chỉ có 1 cột (column) càng khiến cho Blog không thể chèn thêm nhiều tiện ích. Nếu Blog của bạn cũng gặp trường hợp tương tự, thì bài viết hôm nay sẽ giúp bạn giải quyết tình trạng này, bằng cách tạo 3 column cho Footer.

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>
   Tìm thẻ <b:section class='footer' id='footer'/>
   Và thay thế nó với đoạn code trên 
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;
   }
4. Save lại template và chuyển sang tab Page Elements (Phần tử trang để xem kết quả)
   

Vậy là mình đã hướng dẫn xong cách tạo 3 column ở phần Footer cho Template của Blogger rồi đấy. Hy vọng thủ thuật này sẽ giúp bạn tùy biến giao diện cho Blog của mình một cách đẹp mắt. Chúc vui !

Nguồn : boyprodx.blogspot.com

Copy : CGC Blog

Khi copy, các bạn nhớ ghi rõ nguồn gốc. Xin chân thành cảm ơn!