Được tạo bởi Blogger.

Lưu trữ Blog

(BT-VT) - (Fax)

Thứ Năm, 15 tháng 7, 2010


[FD's BlOg] - Tương tự bài viết trước (chia footer thành nhiều cột), bài viết này cũng áp dụng thủ thuật tương tự để chia Post Footer (bên dưới bài viết) thành nhiều cột.




Xem hình minh họa thủ thuật:



Còn đây là kết quả hiện thị ngòai blog


Bắt đầu:
1. Đăng nhập blog
2. Vào Bố cục(layout)
3. Vào chỉnh sửa code HTML (edit code HTML)
4. Chọn "mở rộng mẫu tiện ích" (expand widget template)
5. Chèn đọan code màu đỏ vào như bên dưới:

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'/>

...
...
...

</b:section>

<div id='main-footer-content'>
<div id='main2' style='width: 240px; float: left; margin:0; text-align: left;'>
<b:section class='main-footer-column' id='main-col1' preferred='yes' style='float:left;'/>
</div>
<div id='main3' style='width: 240px; float: left; margin:0; text-align: left;'>
<b:section class='main-footer-column' id='main-col2' preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/>
</div>

</div>

<div id='footer-wrapper'>
<b:section class='footer' id='footer'>

...
...
...

</b:section>
</div>

- Chú ý : bạn hãy điều chỉnh code màu xanh (là độ rộng của các cột) theo đúng kích thước của main post, ví dụ main post của bạn rộng 600px, thì mỗi cột sẽ là 300px, có thể nhỏ hơn (do có thể main post của bạn được căn lề). Và nếu bạn muốn chia thành 3 cột thì thêm một đọa code như bên dưới trước dòng <div style='clear:both;'/> , và chiều rộng mỗi cột bạn đổi lại là 200px.

<div id='main4' style='width: 240px; float: left; margin:0; text-align: left;'>
<b:section class='main-footer-column' id='main-col3' preferred='yes' style='float:left;'/>
</div>


- Về chiều rộng của các cột bạn không nhất thiết phải chỉnh bằng nhau, tùy theo thiết kế của bạn, bạn có thể tùy chỉnh chúng khác nhau, và phải đảm bảo là tổng chiều rộng phải nhỏ hơn độ rộng của main post.
- Ngòai ra để tạo giao diện các cột, bạn có thể thêm các đoạn code CSS cho nó.

6. Save template.

Chúc các bạn thành công.

2 nhận xét:

  1. Là chi nhánh chính thức của viettel chúng tôi có cung cấp tất cả các dịch vụ hiện có, chúng tôi tự hào là nhà cung cấp, lắp đặt internet chất lượng có đường truyền tốt nhất hiện nay với hệ thống nhân viên chăn sóc khách hàng chuyên nghiệp và uy tín 24/7.
    Hãy gọi ngay cho chúng tôi để được tư vấn miễn phí và được hưởng chăm sóc dịch vụ tốt nhất.
    Phòng Kinh Doanh Dịch Vụ Viễn Thông Viettel – Chi Nhánh Viettel TP Hồ Chí Minh
    Địa chỉ: Số 286 Cộng Hòa – Phường 13 – Quận Tân Bình – TP.HCM
    Điện thoại: 0988.677.995 (Mr. Hoàng)
    Email: dangkyviettel24h@gmail.com
    lắp đặt cáp quang viettel tphcm
    Lắp đặt ADSL viettel tại tphcm
    lĐăng ký mạng internet viettel

    Trả lờiXóa

Lên trên