META name="y_key" content="24902eb207816366"> tuduytuonglai: Tạo 3 Cột Phần tử ở phần Footer của Template

23 tháng 7, 2010

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

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>
    Hình mẫu
    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 !

0 nhận xét:

Đăng nhận xét


♦ Mời bạn gửi Nhận xét của mình. Nếu không có tài khoản Blogger-Google, LiveJournal, WordPress, TypePad, AIM, OpenID, bạn vẫn có thể nhận xét bằng cách chọnComment asTên/URL hay Ẩn danh. Tuy nhiên bạn nên chọn Tên/URL với URL có thể để trống. Bạn vui lòng gõ tiếng Việt có dấu.

♦ Bấm vào Xem trước [Preview] bên dưới khung nhận xét nếu muốn xem trước comment đã viết, trước khi post [đăng]. Tương tự, bấm vào Đăng ký qua email [Subscribe by email] để đăng ký theo dõi nhận xét của bài này.

♦ Các bạn tự chịu trách nhiệm với Nhận xét của mình. Nhận xét để phản hồi, đánh giá, góp ý.... suy nghĩ của bạn. Thông qua Nhận xét hãy để cho mọi người biết Bạn là ai.
Xem ký tự của emoticons khỉ Yoyo tại đây.

^ Scroll to Top