Chia Header làm hai phần

Trong giao diện đơn giản nhất của Blogger cung cấp, phần header chỉ gồm một thanh dài theo kích thước của giao diện tùy chỉnh. Để thuận tiện hơn trong việc các blogger muốn đặt banner quảng cáo, hay đơn giản chỉ muốn nhấn mạnh một vấn đề gì trên phần header của trang, chúng ta có thể làm như sau:

Bước 1: Đăng nhập vào phần Admin, click vào thẻ Design (thiết kế), phía dưới thẻ này click vào Edit HTML (chỉnh sửa HTML), tìm từ khóa </b:section>. (cách tìm ấn Ctrl + F). Chúng ta sẽ thấy đoạn code sau:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Mía Lùi (Header)' type='Header'/>
</b:section>

Và thay bằng đoạn mã sau:

<b:section class='header' id='header-left' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Mía Lùi (Header)' type='Header'/>
</b:section>
      <b:section class='header' id='header-right' maxwidgets='1' showaddelement='yes'/>

Bước 2: Tìm theo từ khóa header-outer, chúng ta sẽ thấy đoạn code sau:

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

Ấn lưu lại.

Bạn nhớ rằng tổng kích thước ngang của "header-left + header-right" không vượt quá kích thước tổng độ rộng của blog. Phần code trên bạn thấy là 350 và 468 pixel. Nhưng có một điều lưu ý ở đây, nếu như bạn muốn đặt banner bên phải rộng là 468pixel (chuẩn banner thường là 468x60pixel) thì bạn sẽ bị mất phần đuôi của banner. Chính vì vậy theo Mía Lùi tốt nhất bạn để là 500pixel.

Kích thước rộng của Mía Lùi là 1000

Sau khi hoàn thành, giao diện phần tử trang sẽ có dạng như hình:

Đặt banner bên trái bằng cách thêm code vào thẻ HTML/Javascripst

Sau khi hoàn thành giao diện sẽ như thế này:

Chúc các bạn thành công!