Minh Vũ's Blog

Just another WordPress.com weblog

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

Posted by xpss on 24/09/2009

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:

    




Đâ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: 

/* header-wrapper bao cả hai phần */

     

   

    /* Phần bên phải */

     

   

  

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:

ĐẠI LÊ's Blogspot 

Sưu tầm http://www.thuthuatblog.com

Advertisements

Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s