Chia header thành 2 phần

Mẫu mặc định của blogger chỉ có 1 header duy nhất với chiều rộng bằng chiều rộng của cả blog. Điều này đặt ra một vấn đề là nếu bạn muốn thêm một logo hay một banner quảng cáo trên phần header sẽ là điều rất khó, Tuy nhiên khó có nghĩa là không thể làm được. 

Bài viết này hướng dẫn cách chia thành phần header (đầu) thành hai phần khác nhau, giúp bạn có thể đặt chỗ cho một logo bên trái và treo thêm một banner bên phải.

Mặc định phần đầu của Blogger chỉ chứa tên blog và miêu tả về blog nằm ngang trên cùng. Công việc của chúng ta là "cắt" phần đầu này ra làm hai phần.

Ở đây xin lấy mẫu SIMPLE đầu tiên làm ví dụ minh họa.

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Hanna Võ (Tiêu đề)' type='Header'/>
</b:section>

Và bạn thay đoạn code trên thành:

<b:section class='header' id='header1' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Hanna Võ (Tiêu đề)' type='Header'/>
</b:section>
      <b:section class='header' id='header2' maxwidgets='1' showaddelement='yes'>
</b:section>

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

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;
}

Và thay toàn bộ thành:

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

#header1{
  width: 400px;
  float: $startSide;
  overflow: hidden;
}

#header2{
  width: 420px;
  float: $endSide;
  overflow: hidden;
}

.tabs-outer{
  clear: both;
}

Như bạn thấy trong đoạn CSS trên tôi đã đề nghị kích thước ngang header1 và header2lần lượt là 400px và 420px. 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.

bạn có thể vào trình thiết kế mẫu đối với các mẫu Siple để điều chỉnh độ rộng của blog.

- 2 tiện ích lệch nhau nhưng bạn yên tâm khi vào blog 2 tiện ích vẫn thảng hàng và đẹp.

- Lưu ý trong đoạn code trên mình sử dụng thuộc tính height: 100px; do vậy các logo của bạn phải có chiều cao tối đa là 100 px. và chiều rộng của logo căn cứ vào chiều rộng củaheader1 (Trong code của mình là 400 px thì ảnh logo có kích thước là 400 x 100).

- Đối với các template bạn download trên mạng để chí header thành 2 phần làm tương tự tuy nhiên phải thêm thuộc tính Width vào .header-outer như sau.

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

- Thuộc tính Width này thường thì có sẵn bạn chỉ cần thêm thộc tính đó vào.

Chúc thành công!