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

(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

Xem khác cùng chủ đề

11 nhận xét | Viết lời bình

6/01/2010 01:50:00 SA Trả lời

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

2/17/2011 05:11:00 CH Trả lời

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

Admin
2/21/2011 11:50:00 CH Trả lời

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

7/29/2013 06:43:00 CH Trả lời

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

Admin
7/31/2013 05:42:00 SA Trả lời

Có thể template bạn cấu trúc class hay id khác. Site bạn là gì?

8/02/2013 07:03:00 CH Trả lời

Site mình là: vnnet247.blogspot.com

Admin
8/03/2013 07:02:00 SA Trả lời

Template bạn đang dùng là ở đâu z bạn?

8/04/2013 06:28:00 CH Trả lời

Mình download trên mạng về

8/04/2013 07:59:00 CH Trả lời

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

Admin
8/05/2013 12:03:00 SA Trả lời

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.

8/05/2013 01:20:00 SA Trả lời

Vâng, Cảm ơn anh

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang