Chia header blogspot 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.

Demo for Post

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.

Namkna sẽ giới thiệu 2 cách. tất nhiên cách 1 sẽ dễ dàng thực hiện hơn cách 2, bởi chỉ cần thay thế còn cách 2 phải sử đổi CSS phức tạp.

Cách 1: Tùy chỉnh thủ công!

1- Vào Mẫu (Template) => Chọn Chỉnh sử HTML (Edit HTML) (Không cần chobj mở rộng tiện ích mẫu)

2- Tìm đoạn code như sau:

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

- Thay thế thành:

<!-- header-wrapper http://namkna.blogspot.com/ -->
<div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
  <b:widget id='Header1' locked='true' title='Namkna blog (Tiêu đề)' type='Header'/>
</b:section>
      <b:section class='header' id='header2' maxwidgets='1' showaddelement='yes'>
</b:section>
<div style='clear:both;'/>
</div>
<!-- end header-wrapper http://namkna.blogspot.com/ -->

3- Thêm đoạn code sau vào trước thẻ: ]]></b:skin>

/* Headerby http://namkna.blogspot.com/ */
#header-wrapper{width:800px;border:0 solid #dcd9d9;margin:0 auto;height:100px}
#header-inner{background-position:center;margin-left:auto;margin-right:auto}
#header{float:left;width:300px;border:0 solid #dcd9d9;text-align:left;color:#333333;margin:0}
#header2{float:left;width:480px;margin-left:10px;text-align:left;color:#555}
.header .widget,.header2 .widget{margin:0 auto;padding:10px 0}
#header h1{line-height:1.2em;text-transform:uppercase;letter-spacing:.1em;font:normal normal 26px Georgia, Serif;margin:0 auto;padding:10px 5px .15em}
#header .description{max-width:100%;text-transform:uppercase;letter-spacing:.01em;line-height:1.2em;font:normal normal 16px Lucida Sans, Tahoma, Helvetica, FreeSans, sans-serif;color:#666666;margin:0 auto;padding:0 5px 5px}
#header img{margin-startside:auto;margin-endside:auto}

Tùy chỉnh:

• width:800px; là dộ rộng của blog của bạn.
• width:300px; là dộ rộng của header 1 tức là header bên tay trái
• width:480px; là dộ rộng của header 2 tức là header bên tay phải
• height:100px là chiều cao của header

4- Lưu mẫu lại và xem kết quả nha!

Cách 2: Tùy chỉnh tự động với các mẫu SIMPLE.

- Cách nàycần phải có am hiểu về CSS
1- Tìm đoạn code tương tự sau:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Namkna blog (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='Namkna blog (Tiêu đề)' type='Header'/>
</b:section>
      <b:section class='header' id='header2' maxwidgets='1' showaddelement='yes'>
</b:section>

2. Tiếp tục tìm header-outer bạn sẽ nhìn thấy như thế này (Mẹo: Bấm Ctrl + F và đánh vào .header-outer):

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

Và thay toàn bộ thành (Lưu ý: Nếu không thấy đoạn code trên thì chỉ cần thêm đoạn code bên dưới và trước thẻ ]]></b:skin> ):

.header-outer {
  background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
  _background-image: none;
  height: 100px;
  overflow: hidden;
}
#header1{
  width: 300px;
  float: $startSide;
  overflow: hidden;
}
#header2{
  width: 480px;
  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à header2 lần lượt là 300px và 480px. 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. 

Với cách 2 này 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.

Chiều ngang của template trong Trình thiết kế mẫu

- 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ủa header1 (Trong code của mình là 300 px thì ảnh logo có kích thước là 300 x 100).