Cách chia thẻ header và footer thành nhiều hàng (section )

Hôm nay chúng ta sẽ chia header của blog làm 2 phần với kích thước tùy chọn. Để dễ hiểu, bạn có thể tạo thêm một blog mới và thao tác theo hướng dẫn dưới:

Bước 1. Chỉnh sửa body. 

Đăng nhập Blogger, chọn Bố cục (Layout) | Chỉnh sửa HTML (Edit HTML) và để ý đoạn code bên dưới:

<div id=’header-wrapper’>
<b:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement=’no’>
<b:widget id=’Header1′ locked=’true’ title=’Header | Thủ thuật blog (Header)’ type=’Header’/>
</b:section>
</div>

Đây là header nằm trên cùng có chiều ngang bằng chiều ngang của template. Giả sử chúng ta cần đặt hộp tìm kiếm nằm bên phải, vậy bạn phải thay đoạn code trên bằng:

<div id=’header-wrapper’> /* header-wrapper bao cả hai phần */
<div id=’header’> /* Phần bên trái */
<b:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement=’no’>
<b:widget id=’Header1′ locked=’true’ title=’Header | Thủ thuật blog (Header)’ type=’Header’/>
</b:section>
</div>
<div id=’box’> /* Phần bên phải */
<b:section class=’searchbox’ id=’searchbox’ maxwidgets=’1′ showaddelement=’yes’>
<b:widget id=’HTML99′ locked=’false’ title=” type=’HTML’/>
</b:section>
</div>
</div>

Trong đoạn code trên đã khởi tạo thêm một tiện ích HTML và các id: box, searchbox. Bạn có thể đặt tên tuỳ ý miễn là tên này phải trùng với khao báo của nó trong CSS ở bước 2.

Bước 2. Chỉnh sửa CSS. Bây giờ kéo thanh trượt lên trên bạn tìm:

#header {
margin: 5px;
border: 1px solid $ bordercolor;
text-align: center;
color:$ pagetitlecolor;
}

Chúng ta sẽ thay thế bằng:

#header {
float: left; /* Nằm bên trái, có thể dùng: float: $ startSide */
width: 310px; /* Kích thước logo của blog */
margin: 5px;
border: 1px solid $ bordercolor;
text-align: center;
color:$ pagetitlecolor;
}
#box {
float: right; /* Nằm bên phải, có thể dùng: float: $ endSide */
width: 320px; /* Kích thước box */
margin: 5px;
border: 1px solid $ bordercolor;
text-align: center;
color:$ pagetitlecolor;
}

Ở đoạn code này bạn toàn quyền thay đổi hoặc vô hiệu margin, border theo ý mình khi sử dụng logo hoặchộp tìm kiếm. Quan trọng hơn phải tính toán khéo léo như thế nào để kích thước ngang (width) của header-wrapper bằng tổng kích thước ngang của header, box và margin của chúng.

Áp dụng và mở rộng thêm:

Tạo thêm 2 css cho header2 và header3 như sau:

#header{float:left;width:350px;border:0 solid $ bordercolor;text-align:left;color:$ pagetitlecolor;margin:0}#header2{float:left;width:300px;margin-right:0px;border:0 solid $ bordercolor;text-align:right;color:$ pagetitlecolor}#header3{float:right;width:300px;margin-right:0px;border:0 solid $ bordercolor;text-align:right;color:$ pagetitlecolor}

Code hiển thị trong phần header-wrapper như sau:

<div id=’header-wrapper’>
<div id=’header’><b:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement=’no’><b:widget id=’Header1′ locked=’true’ title=’demo 2 (Tiêu đề)’ type=’Header’/></b:section></div>
<div id=’header2′> <b:section id=’headerr’ maxwidget=’1′ showaddelement=’yes’><b:widget id=’HTML99′ locked=’false’ title=” type=’HTML’/></b:section></div>
<div id=’header3′> <b:section id=’headerrr’ maxwidget=’1′ showaddelement=’yes’><b:widget id=’HTML98′ locked=’false’ title=” type=’HTML’/></b:section></div>
<div style=’clear:both;’/></div><!– end header-wrapper –>

Thủ thuật trên sẽ tạo ra 3 thành phần trên header.