Laman

Pages

Laman

Jan 14, 2011

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:#069;}
#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 #cccccc;
text-align: center;
color:#069;
}
#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.

No comments:

Post a Comment

Comment của bạn sẽ bị xóa nếu:
- Bạn chèn thẻ liên kết (a tag).
- Nội dung gây khó chịu cho các bạn đọc khác.
- Thắc mắc không liên quan bài viết, hãy post tại Hỏi đáp.
- P/s : Comment chê Admin xấu trai cũng sẽ bị xóa không thương tiếc :D