Chia Header Blogger thành hai hay ba phần ~ Đức Kiên Computer

Hôm nay chúng ta sẽ chia header của blog làm 2 phần với kích thước tùy chọn. Để 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ặchộ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.

Nguồn: Thuthuatblog

Áp dụng và mở rộng thêm:

Tạo thêm 2 css cho header2 và header3 như sau:

#header{float:left;width:350px;border:0 solid $bordercolor;text-align:left;color:$pagetitlecolor;margin:0}#header2{float:left;width:300px;margin-right:0px;border:0 solid $bordercolor;text-align:right;color:$pagetitlecolor}#header3{float:right;width:300px;margin-right:0px;border:0 solid $bordercolor;text-align:right;color:$pagetitlecolor}

Code hiển thị trong phần header-wrapper như sau:

<div id='header-wrapper'>
<div id='header'><b:section class='header' id='header' maxwidgets='1' showaddelement='no'><b:widget id='Header1' locked='true' title='demo 2 (Tiêu đề)' type='Header'/></b:section></div>
<div id='header2'> <b:section id='headerr' maxwidget='1' showaddelement='yes'><b:widget id='HTML99' locked='false' title='' type='HTML'/></b:section></div>
<div id='header3'> <b:section id='headerrr' maxwidget='1' showaddelement='yes'><b:widget id='HTML98' locked='false' title='' type='HTML'/></b:section></div>
<div style='clear:both;'/></div>

Thủ thuật trên sẽ tạo ra 3 thành phần trên header.

Tham khảo thêm:

THUỘC TÍNH FLOAT

Định nghĩa và sử dụng

Thuộc tính float xác định có hay không một thành phần được float (trôi nổi).

Cấu trúc

tag {
    float: giá trị;
}

Với giá trị như sau:

Thuộc tính	giá trị	Ví dụ	Mô tả
float	left	float: left;	Thành phần được trôi nổi (float) qua bên trái.
	right	float: right;	Thành phần được trôi nổi (float) qua bên phải.
	none	float: none;	Thành phần không được trôi nổi (float) qua bên phải hay trái, đây là dạng mặc định.
	inherit	float: inherit;	Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).

Ví dụ

Xem thêm ví dụ

HTML viết:

<html>
<head></head>
<body>
<p>Float left</p>
<p>Float left</p>
</body>
</html>

Hiển thị trình duyệt khi chưa có CSS:

Float left

CSS viết:

p {
    float: left;
}

Hiển thị trình duyệt khi có CSS:

Float left

Khi sử dụng float, thì thành phần đã rời bỏ vị trí tuyệt đối trước đó, như ta thấy ở trên.

Trình duyệt hỗ trợ

Thuộc tính float được hỗ trợ trong đa số các trình duyệt.

Giá trị "inherit" không hỗ trợ trình duyệt IE7 trở xuống, IE8 đòi hỏi phải có !Doctype

Nguồn: họcwebchuẩn.com

Đức Kiên Computer

Thứ Năm, 4 tháng 10, 2012