Chia chân blogger thành 3 cột

Điểm 4.6/5 dựa vào 87 đánh giá

(Traidatmui.com) – Bạn sẽ cảm thấy phiền phức trong việc đặt các widget vào trang blog của mình khi có quá nhiều widget. Làm thế nào để có thể tiết kiệm được phần không gian cho blog khi thêm vào các phần tử đó? Blogger mặc định phần chân blog (footer) chỉ có một cột nên chúng ta sẽ khó có thể chền thêm nhiều tiện ích. Để khắc phục tình trạng này, chúng ta có thể chia chân blog thành 3 cột sẽ giúp chúng ta chèn thêm tiện ích dễ dàng và trông đẹp hơn. Việc này sẽ giúp cho blog bạn trông gọn hơn không phải kéo dài trang ra khi thêm nhiều tiện ích ở chân blog.

Hình ảnh minh họa

☼ Bắt đàu thủ thuật

1. Đầu tiên bạn hãy đăng nhập vào tài khoản blogger
2. Vào bố cục chọn chỉnh sửa HTML
3. Tìm đến đoạn code bên dưới
<b:section class='footer' id='footer'>

Thay toàn bộ code trên thành code bên dưới
<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;'>
</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:widget id='HTML10' locked='false' title='' type='HTML'/>
</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;'>
</div>
<div style='clear:both;'/>
</div></div>

Bạn hãy dựa vào các code màu đỏ ở trên để chỉnh sửa độ rộng của các cột cho phù hợp.
4. Tiếp theo hãy tìm đến đến thẻ ]]></b:skin> và thêm code bên dưới vào trước nó
#customize-footer-column {
clear:both;
}
.footer-column {
padding: 10px;
}

5. Cuối cùng save template lại
Chúc bạn thành công
Tham khảo từ http://boyprodx.blogspot.com

Loading...

11 nhận xét

  1. Trang thiết kế rất chuyên nghiệp, chúc mừng trang nhé.

    Trả lờiXóa
  2. dòng lệnh <b:section class='footer-column' id='Col1' preferred='yes' style='float:left;'/> và dòn <b:section class='footer-column' id='Col3' preferred='yes' style='float:right;'/> sai rồi anh ơi phải thế này mới đúng <b:section class='footer-column' id='Col1' preferred='yes' style='float:left;'> và <b:section class='footer-column' id='Col3' preferred='yes' style='float:right;'>:)) không có dấu / ở cuối

    Trả lờiXóa
  3. Vâng cảm ơn đòng góp của bạn, mình đã chỉnh sửa lại.

    Trả lờiXóa
  4. Nhưng không tìm dc đoạn code như trong hướng dẫn: . Anh giúp mình tý. Cảm ơn nhiều

    Trả lờiXóa
    Trả lời
    1. Có thể template bạn cấu trúc class hay id khác. Site bạn là gì?

      Xóa
  5. Site mình là: vnnet247.blogspot.com

    Trả lờiXóa
    Trả lời
    1. Template bạn đang dùng là ở đâu z bạn?

      Xóa
    2. Mình download trên mạng về

      Xóa
    3. Nếu là template do mình thiết kế thì mình chỉ hỗ trợ khách hàng của mình thôi bạn ah. Còn việc bạn được chia sẻ lại hay mua từ người khác thì mình se không đảm bảo hoạt động của template và se không hỗ trợ, bạn thông cảm.

      Xóa
  6. Nhờ anh hướng dẫn dùm:
    http://4.bp.blogspot.com/-1LkJWXUNDA4/Uf8UxU6-HMI/AAAAAAAAANo/wBMKsuHSO6I/s1600/traidatmui.png

    Trả lờiXóa