Wednesday 11 April 2012

Chia Footer thành 3 cột cho theme blogger


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ếp theo









    1. 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;

      }
    2. Save lại template và chuyển sang tab Page Elements (Phần tử trang để
      xem kết quả)

No comments:

Post a Comment