Friday, October 5, 2012

Cách chia header thành hai phần

Nếu bạn thực sự cố gắng thì thành công sẽ dần tới với bạn.Chúc bạn thành công,vạn sự như ý!!!

Tác giả: Nguyễn Mạnh Cường trên Facebook Tác giả: Mạnh Cường trên Google

Để 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.

Friday, October 5, 2012

Cách chia header thành hai phần

No comments:

Post a Comment