Chia header thành 2 phần

Kể từ khi đưa vào sử dụng Template Designer mã nguồn mẫu do Blogger đề xuất đã thay đổi rất nhiều so với những mẫu được sử dụng trước đó. Nhiều thành phần mới được thêm vào và việc tùy biến giao diện đòi hỏi phải công phu hơn nhưng không có nghĩa là không 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.

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

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

Trước khi thay đổi

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.

Hãy cùng chia sẻ với Thủ Thuật Blog cách làm của bạn.