Chia header thành hai phần cho mẫu mặc định của Blogger

Phần header là phần có diện tích khá lớn và chúng ta thường đặt tiêu đề blog ở đó. Tuy nhiên, tiêu đề blog chỉ chiếm một phần nhỏ, phần còn lại rất thích hợp để đặt quảng cáo, social bookmark hay khung search. Nếu bạn muốn thêm widget vào đó thì không được vì trong phần bố cục không có sẵn ô thêm tiện ích ở phần trống đó - nghĩa là với mẫu mặc định Blogger thì bạn chỉ được có 1 widget ở header. Vì vậy để có thể làm điều đó ta cần chia header thành hai phần, các bạn hãy tham khảo cách làm qua bài hôm nay.

#Thêm HTML

1. Đăng nhập Blogger
2. Mẫu > Chỉnh sửa HTML
3. Tìm code bên dưới, tìm với từ khóa header là ra

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

  <b:if cond='data:useImage'>
    <b:if cond='data:imagePlacement == &quot;BEHIND&quot;'>
      <!--
      Show image as background to text. You can't really calculate the width
      reliably in JS because margins are not taken into account by any of
      clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
      width if the user is using shrink to fit.
      This results in a margin-width's worth of pixels being cropped. If the
      user is not using shrink to fit then we expand the header.
      -->
      <b:if cond='data:mobile'>
          <div id='header-inner'>
            <div class='titlewrapper' style='background: transparent'>
              <h1 class='title' style='background: transparent; border-width: 0px'>
                <b:include name='title'/>
              </h1>
            </div>
            <b:include name='description'/>
          </div>
        <b:else/>
          <div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;                        + &quot;background-position: &quot;                        + data:backgroundPositionStyleStr + &quot;; &quot;                        + data:widthStyleStr                        + &quot;min-height: &quot; + data:height                        + &quot;_height: &quot; + data:height                        + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
            <div class='titlewrapper' style='background: transparent'>
              <h1 class='title' style='background: transparent; border-width: 0px'>
                <b:include name='title'/>
              </h1>
            </div>
            <b:include name='description'/>
          </div>
        </b:if>
    <b:else/>
      <!--Show the image only-->
      <div id='header-inner'>
        <a expr:href='data:blog.homepageUrl' style='display: block'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
        </a>
        <!--Show the description-->
        <b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>
          <b:include name='description'/>
        </b:if>
      </div>
    </b:if>
  <b:else/>
    <!--No header image -->
    <div id='header-inner'>
      <div class='titlewrapper'>
        <h1 class='title'>
          <b:include name='title'/>
        </h1>
      </div>
      <b:include name='description'/>
    </div>
  </b:if>
</b:includable>
          <b:includable id='description'>
  <div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>
  </div>
</b:includable>
          <b:includable id='title'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <data:title/>
  <b:else/>
    <a expr:href='data:blog.homepageUrl'><data:title/></a>
  </b:if>
</b:includable>
        </b:widget>
      </b:section> <!-- code bước 4 sẽ được thêm vào ở đây -->

4. Thêm code dưới vào dưới code vừa tìm

<b:section class='header' id='header1' maxwidgets='1' showaddelement='yes'>
</b:section>

#Thêm CSS

1. Tìm code bên dưới

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

2. Thay thế code vừa tìm được bằng code bên dưới

.header-outer {
  background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
  _background-image: none;
  height: 100px;
  overflow: hidden;
}
#header{
  width: 300px;
  float: $startSide;
  overflow: hidden;
}
#header1{
  width: 480px;
  float: $endSide;
  overflow: hidden;
}
.tabs-outer{
  clear: both;
}

Ở phần #Thêm CSS, nếu ở bước 1 mà bạn không tìm thấy code thì chèn code bước hai vào trên thẻ
]]></b:skin>
3. Lưu mẫu lại là xong.