Cách chia header làm 2 phần, một bên logo và 1 bên quảng cáo

Kết thúc bài viết trước, chúng ta đã cùng nhau thực hiện cách chèn tiêu đề/logo cho blog trong header. Ở bài này, chúng ta sẽ cùng nhau thực hiện chia nó làm hai phần, 1 phần để tiểu đề/logo của blog. Còn phần còn lại thì chèn cái gì là tùy bạn.

Chúng ta cùng nhìn lại đoạn code header của chúng ta trong bài viết trước. Nó sẽ như sau:

<div class='header'>
<b:section class='Header' id='Header' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='Bài 3 - trong huong dan thiet ke tempalte (Tiêu đề)' type='Header' visible='true'/>
</b:section>
</div>

Bây giờ, để có thể chia nó thành 1 phần thì chúng ta sẽ cần tới 2 thẻ div và hai class/id riêng cho mỗi cái. Mình sẽ chọn 2 class là header-trai và header-phai. Cái header-trai sẽ chứa tên trang web, còn cái header-phai sẽ chứa phần bạn chèn thêm sau này.


Như vậy, chúng ta sẽ được đoạn code như sau:

<div class='header'>
<div class='header-trai'>
<b:section class='Header' id='Header' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='Bài 3 - trong huong dan thiet ke tempalte (Tiêu đề)' type='Header' visible='true'/>
</b:section>
</div>
<div class='header-phai'>
Đây là phần nội dung của header-phai
</div>
</div>

Để thuận tiện hơn trong việc chỉnh sửa nội dung của header-phai. Ta sẽ thêm cho nó 1 thẻ b:section. Vậy chức năng của thẻ b:section là gì? Thẻ này sẽ giúp chúng ta có thể thêm được các widget tùy ý ngay trong phần quản lý bố cục mà không cần đụng tới code nữa.
Và như vậy mình sẽ lại có đoạn code như sau:

<div class='header'>
<div class='header-trai'>
<b:section class='Header' id='Header' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='Bài 3 - trong huong dan thiet ke tempalte (Tiêu đề)' type='Header' visible='true'/>
</b:section>
</div>
<div class='header-phai'>
<b:section class='ben-phai' id='ben-phai' showaddelement='yes'/>
</div>
</div>

OK, bây giờ chúng ta thay đoạn code trên cho đoạn code header của bài viết trước và lưu lại. Quay về quản lý bố cục thì chúng ta sẽ thấy như hình dưới:

Bây giờ, việc của chúng ta là viết CSS cho 2 class này để sao cho mỗi cái nằm 1 bên là được. Và đây là đoạn CSS của mình!

.header-trai {
width: 30%;
float: left;
}
.header-trai img {
max-height: 60px;
width:auto;
}
.header-phai {
width: 70%;
float: right;
}

Chúc các bạn thành công!
Các bạn có thể xem DEMO tại: http://huongdanthietketempalte-4.blogspot.com/