Thiết kế blog: Chia header thành hai phần

Từ khi thay đổi template, lượt bạn đọc ghé Thủ Thuật Blog tăng hơn so với trước. Đó là nguồn động viên để bài viết mới được cập nhật. Xin gửi lời cám ơn bạn đọc đã ủng hộ blog thời gian qua. Mong rằng các bạn tiếp tục theo dõi nội dung sắp đăng tới đây.

Qua lại với bài viết này, hôm nay chúng ta sẽ chia header của blog làm 2 phần với kích thước tùy chọn. Ở đây template Minima được lấy làm ví dụ minh hoạ. Để dễ hiểu, bạn có thể tạo thêm một blog mới và thao tác theo hướng dẫn dưới:

Bước 1. Chỉnh sửa body. Đăng nhập Blogger, chọn Bố cục (Layout) | Chỉnh sửa HTML (Edit HTML) và để ý đoạn code 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='Header | Thủ thuật blog (Header)' type='Header'/>
</b:section>
    </div>

Đây là header nằm trên cùng có chiều ngang bằng chiều ngang của template. Giả sử chúng ta cần đặt hộp tìm kiếm nằm bên phải, vậy bạn phải thay đoạn code trên bằng:

    <div id='header-wrapper'> /* header-wrapper bao cả hai phần */
      <div id='header'> /* Phần bên trái */ 
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Header | Thủ thuật blog (Header)' type='Header'/>
</b:section>
    </div>
    <div id='box'>    /* Phần bên phải */
      <b:section class='searchbox' id='searchbox' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML99' locked='false' title='' type='HTML'/>
</b:section>
    </div>
   </div>

Trong đoạn code trên đã khởi tạo thêm một tiện ích HTML và các id: box, searchbox. Bạn có thể đặt tên tuỳ ý miễn là tên này phải trùng với khao báo của nó trong CSS ở bước 2.

Bước 2. Chỉnh sửa CSS. Bây giờ kéo thanh trượt lên trên bạn tìm:

#header { 
  margin: 5px;
  border: 1px solid $bordercolor;
  text-align: center;
  color:$pagetitlecolor;
}

Chúng ta sẽ thay thế bằng:

#header { 
  float: left;  /* Nằm bên trái, có thể dùng: float: $startSide */
  width: 310px; /* Kích thước logo của blog */
  margin: 5px;
  border: 1px solid $bordercolor;
  text-align: center;
  color:$pagetitlecolor;
}

#box { 
  float: right;  /* Nằm bên phải, có thể dùng: float: $endSide */
  width: 320px;  /* Kích thước box */
  margin: 5px;
  border: 1px solid $bordercolor;
  text-align: center;
  color:$pagetitlecolor;
}

Ở đoạn code này bạn toàn quyền thay đổi hoặc vô hiệu margin, border theo ý mình khi sử dụng logo hoặc hộp tìm kiếm. Quan trọng hơn phải tính toán khéo léo như thế nào để kích thước ngang (width) của header-wrapper bằng tổng kích thước ngang của header, box và margin của chúng.

Đây là blog demo hướng dẫn trên với layout như hình dưới đây: