Chia header thành 2 phần

Bước 1. Đăng nhập Blogger, tại thẻ Design (Thiết kế) | Edit HTML (Chỉnh sửa HTML) tìm đoạn code sau đây:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Thủ Thuật Blog (Header)' type='Header'/>
</b:section>

 Và thay bằng:

b:section class='header' id='header-left' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Thủ Thuật Blog (Header)' type='Header'/>
</b:section><b:section class='header' id='header-right' maxwidgets='1' showaddelement='yes'/>

Bước 2. Tiếp tục tìm header-outer bạn sẽ nhìn thấy như thế này:
 

.header-outer {
  background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
  _background-image: none;
}

 Bây giờ chúng ta thay bằng:

.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;
height: 100px;
overflow: hidden;
}

#header-left{
width: 350px;
float: $startSide;
overflow: hidden;
}

#header-right{
width: 468px;
float: $endSide;
overflow: hidden;
}

.tabs-outer{
clear: both;

}

Và tiến hành lưu lại.

Như bạn thấy trong đoạn CSS trên tôi đã đề nghị kích thước ngang header-left và header-right lần lượt là 350px và 468px. Tổng kích thước này không được vượt quá chiều ngang của template.

Tùy vào kích thước logo và banner mà muốn sử dụng cũng như kích thước của template mẫu hãy điều chỉnh các con số trên cho cân xứng. 

Chiều ngang của template

Sau khi thay đổi và thêm tiện ích HTML/JavaScript (Nội dung là một banner 468x60)

Hiển thị trên blog

Sử dụng logo:

Bạn vừa thấy 350px là chiều ngang của logo, còn chiều cao thì bao nhiêu? Xin thưa chiều cao của logo chính là chiều cao của header-outer, ở đây 100px. Như vậy bạn cần thiết kế logo có kích thước 350x100.  

 

Chọn kiểu hiện thị logo

Tất nhiên đây chỉ là những con số gợi ý, thực tế như thế nào còn tùy thuộc vào bố cục template, margin, padding và kể cả quan điểm thẩm mỹ của từng người.

 

Gửi bài viết này cho bạn bè qua Y!M: » Chia header thành 2 phần : http://f69dkm.blogspot.com/2011/12/chia-header-thanh-2-phan.html