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

Header của một Blogger Template cơ bản thường chỉ gồm 1 phần. Đôi khi bạn cần chia Header thành 2 hoặc 3 phần để bố trí một banner quảng cáo hoặc một thành phần khác để giúp cho blog của bạn trở nên cân đối hơn.

Trường hợp thứ nhất là chia Header thành 2 phần. Trước tiên bạn cần xác định id cho cả Header là header-wrapper, id cho phần bên trái (thường chứa Tiêu đề Blog) là header và id cho phần bên phải là header-right. 

Đăng nhập Blogger, vào Design >> Edit HTML. Tìm đoạn code CSS tương tự như sau.

#header-wrapper {
margin: 0 auto;
width: 800px;
...
}
#header {
...
}

Rồi thay nó bằng đoạn code bên dưới.

#header-wrapper {margin: 0 auto;width: 800px;}
#header {float: left;width: 200px;text-align: center;color:$pagetitlecolor;}
#header-right {float: right;width: 600px;padding:0;}

Tiếp tục tìm đoạn code tương tự 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='Tên Tiêu đề Blog (Header)' type='Header'/>
</b:section>
</div>

Và thay nó bằng đoạn code sau đây.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Tên Tiêu đề Blog (Header)' type='Header'/>
</b:section>
<b:section class='header' id='header-right' showaddelement='yes'>
</b:section>
</div>

Lưu Template rồi vào Page Elements bạn sẽ thấy kết quả tương tự thế này.

Trường hợp thứ hai là chia Header thành 3 phần. Trước tiên bạn cần xác định id cho cả Header là header-wrapper, id cho phần bên trái (thường chứa Tiêu đề Blog) là header, id cho phần ở giữa là header-middle và id cho phần bên phải là header-right.

Thay đoạn code CSS ở trường hợp thứ nhất bằng đoạn code sau.

#header-wrapper {margin: 0 auto;width: 800px;}
#header {
float:left;
width:30%;
height:200px;
margin: 0px;
border: 0px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
#header-middle {float:left; width:30%; height:200px}
#header-right {float:left; width:39%; height:200px}

Tiếp tục tìm đoạn code tương tự 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='Tên Tiêu đề Blog (Header)' type='Header'/>
</b:section>
</div>

Rồi thay nó bằng đoạn code sau đây.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Tên Tiêu đề Blog (Header)' type='Header'/>
</b:section>
<b:section class='header' id='header-middle' showaddelement='yes'/>
<b:section class='header' id='header-right' showaddelement='yes'/>
<div style='clear:both;'/>
</div>

Lưu Template rồi vào Page Elements bạn sẽ thấy kết quả tương tự thế này.