Loading post navigation ...
 
 

Pro page

12
Nhận xét

Một ứng dụng của lệnh position : Chèn tiện ích vào banner (Header)

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

[FD's BlOg] - Lệnh position là 1 lệnh có lẽ là lạ với nhiều người, do nó ít được sử dụng thường xuyên. Phần lớn ta thường dùng lệnh padding hoặc margin để tùy chỉnh vị trí của khối. Hôm nay mình sẽ giới thiệu cho các bạn một ứng dụng của lệnh position, để tùy chỉnh việc hiển thị của nó trên nền 1 div khác.

Ở thủ thuật này ta sẽ sử dụng thuộc tính relative của lệnh position, trong đó ta dùng thêm các lệnh top, left, right, bottom để điều chỉnh vị trí hiển thị.


Xem hình minh họa thủ thuật:

Khi chưa dùng lệnh position thì các div sẽ hiển thị như bên dưới:

Thông thường khi kết thúc 1 thẻ div thì nó sẽ tự động xuống hàng, tức là các thẻ div sẽ được xếp theo tứ tự từ trên xuống.

- Để xác định vị trí của 1 thẻ div, các bạn có dùng 4 cặp lệnh sau để xác định vị trí cho nó :

+ left, top : căn theo góc trái trên. ví dụ thẻ div được đặt ở vị trí cách lề trên 30px; lề trái 30px; thì ta có code sau :

#div1 {
position:relative;
top:30px;
left:30px;
}

+ left, bottom : căn theo góc trái dưới. ví dụ thẻ div được đặt ở vị trí cách lề dưới 30px; lề trái 30px; thì ta có code sau :

#div1 {
position:relative;
bottom:30px;
left:30px;
}

+ tương tự với các cặp (right,top) và (right,bottom) ta cũng thực hiện tương tự.
+ Lưu ý ta có thể dùng giá trị âm để xác định vị trí cho nó, ví dụ như hình minh họa trên, khi ta căn lề trên cho thẻ div3 giá trị là : top:-25px; thì ta sẽ được kết quả như bên dưới:

- Nếu ta có nhiều thẻ div, và được căn với với các giá trị như nhau thì các thẻ div này sẽ không bị trùng lên nhau, mà sẽ xếp tuần tự nhau từ trên xuống. Ví dụ như hình bên dưới mình thực hiện:

- Các thẻ div2div3 đều được xác định vị trí như nhau (top:30px; , left:350px;) , khi ta thay đổi vị trí cho div3top:50px; left:300px; thì ta sẽ có kết quả như bên dưới:


Và sau đây là kết quả mà mình đã test cho header của blog test của mình :

Ban đầu khi chưa áp dụng thủ thuật:


Sau khi ẩn phần Header có sẵn của blog, và thêm các thành phần mới vào thì mình có được kết quả như bên dưới :


Đây là kết quả mình thêm box search vào header :




☼ Và sau đây để cụ thể mình sẽ hướng dẫn cho các bạn cách chèn Box search vào Header :(lưu ý, thủ thuật này mình hướng dẫn theo các template mà blogger cung cấp, nếu bạn nào xài template convert thì làm tương tự)
1. Bước 1 là làm ẩn Header có sẵn của blog :
- Vào bố cụ
- Vào chỉnh sửa code HTML
- Thêm các đoạn code màu đỏ vào code CSS của phần Header và code CSS của phần chứa header (header-wrapper):

#header-wrapper {
height:150px;
...
...
...
}

#header {
display:none;
...
...
...
}

- độ rộng (150px;)của phần header bạn có thể tùy chỉnh lại.

2. bước 2 : chèn box search vào header:
- tiếp tục ở bước trên, tạo 1 code css cho phần chứa box seach.
- Dán đoạn code CSS bên dưới vào trước dòng code ]]></b:skin>

#box-search {
position:relative;
top:80px;
left:380px;
}

- tùy chỉnh lại code màu đỏ để box search có 1 vị trí thích hợp nhất trên header.
- Tiếp tục xuống dưới tìm đoạn code sau:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='FD's BlOg (Header)' type='Header'/>
</b:section>

</div>

- Thêm đoạn code bên dưới vào ngay sau dòng </b:section> ở đoạn code tìm được:

<div id='box-search'>
<form action='http://www.google.com/search' method='get' target='_blank'>
<table border='0' cellpadding='0'>
<tbody><tr><td>
<center><input maxlength='255' name='q' size='25' style='width: 141px;' type='text' value=''/><input type='submit' value='Tìm Kiếm'/></center></td></tr>
<tr>
<td align='left' style='font-size: 100%;'>
<input checked='checked' name='sitesearch' type='checkbox' value='fandung.blogspot.com'/>Tìm kiếm trên FD's BlOg</td>
</tr>
</tbody>
</table>
</form>
</div>

- Thay code màu đỏ lại thành địa chỉ URL của blog bạn.
- Tùy chỉnh lại code màu xanh theo ý bạn.

3. Cuối cùng, save template lại.

Khi chèn box search này, ngoài việc hiển thị ở ngoài layout, nó còn hiển thị ở ngay trong phần "Phần tử trang", như hình bên dưới:


Chúc các bạn thành công.


Enter your mail address:

12

share4vnn

cái này hay đó test cái coi sao :d

Unknown

Site minh hoan toan ko dung dc code search....hic hic ko biet sao

share4vnn

ít ra cũng phải cho xem thì mới biết mà trả lời chứ !

fandung

@VT : có thể blog bạn chưa được Google Bot, nên nó ko cập nhật được thông tin từ blog bạn, vì thế mà khi search trên blog của bạn không có kết quả. mình đã thử với blog mới tạo của mình rồi, cũng ko ra kết quả gì, mặc dù từ khóa mình gõ vào y chang tiêu đề bài viết

9xhot

Blog của em cái cột bên trái phần "chủ đề nóng" dùng table để làm, giờ em muốn chuyển qua CSS. Bác FD có thể bớt chút thời gian làm hộ em đc ko?
Thanks bác. :)

fandung

@9xhot : mình thấy như thế là ổn rồi, sửa làm gì nữa , với lại mình cũng bận lắm, còn phải lo "mài" thêm thủ thuật nữa chứ :D

Khách (ẩn danh)

mới dưới quê lên blog a Dũng nhiều bài viết mới ghê.:D

Unknown

@FD: Blog minh da hoat dong dc 2 nam luc truoc search dc het.....nhung gio search ko dc nua ??? FD huong dan bot luon di ^.^

Unknown

Cái này ko hoạt động đúng trên IE6

Phan Dũng

ờ đúng, cái này hình như là CSS2 hay CSS3 gì đó. nên nếu chạy trên IE6 thì phải thêm vài code vào.

IE6 chỉ chạy tốt với các code CSS1

Unknown

Blog này: http://soft911.blogspot.com/ Ko dùng đc search.Dùng cái khung search của nó cùi quá còn của Google thì xài ko đc!!! Mong FD giúp mình với

nguyenchithien

Nhờ phandung hướng dẫn cách tạo khung đăng ký và đăng nhập vào blogspot với. cảm ơn bạn nhiều.



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home