Chia Header, Footer thành 2 hoặc 3 phần

Chia Header, Footer thành 2 hoặc 3 phần

 Trong quá trình thiết kế blog vì 1 lý do gì đó bạn muốn chia header hoặc footer của mình ra làm nhiều phần để gắng thêm tiện ích, hay quảng cáo hay gì đó nhưng chẳng biết phải làm sao thì bài viết này có lẽ là một cứu cấp có thể giúp được bạn đây.

Bạn có thể xem demo ngay trên blog này. Header mình đã chia thành 3 phần gồm tiêu đề, thanh menu và khung tìm kiếm. Footer mình chia thành 2 phần gồm phần design by ... và phần menu chính.

Đầu tiên mình sẽ hướng dẫn cách chia header thành 3 phần trước.
1. Vào Thiết kế → chỉnh sửa HTML và chèn đoạn code sau vào trước thẻ ]]></b:skin>

.header1{width:39%;float:left}
.header2{width:30%;float:left}
.header3{width:30%;float:left}

2. Tìm đến đoạn code sau

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
...
</b:section>

3. Thêm vào trước và sau đoạn code 2 những đoạn code sau:

<div class='header1'>

 Đoạn code ở bước 2

 </div>

<div class='header2'>

<b:section class='header2' id='header2' showaddelement='no'>
<b:widget id='HTML15' locked='false' title='Header2' type='HTML'/>

</b:section>

</div>

<div class='header3'>

<b:section class='header3' id='header3' showaddelement='no'>
<b:widget id='HTML16' locked='false' title='Header3' type='HTML'/>

</b:section>

</div>

<div style='clear:both;'>
</div>

Lưu template lại rồi về trang chủ sẽ thấy 2 header mới.
Chú ý: 
Ở đoạn code số 1 có mục width: xx%  là chiều dài của các header.
Tổng chiều dài của 3 header phải nhỏ hơn 100%. (tốt nhất cộng lại =99% là ok)
Chia footer thành 3 phần bạn cũng làm tương tự nhưng thay toàn bộ chữ header thành chữ footer
Chia thành 2 phần thì bỏ toàn bộ những đoạn code nào liên quan đến header3 là được.
Nếu có vấn đề gì thì để lại lời nhắn mình sẽ trả lời trong thời gian sớm nhất.