Loading post navigation ...
 
 

Pro page

7
Nhận xét

Tạo thanh Navbar luôn hiển thị phía trên (dưới) của blog

| by Phan Dũng | views

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

Fixed Navbar
(fix ngày 29/05/2009 - khắc phục việc không hiển thị trên IE6)

[FD's BlOg] - Một thủ thuật đơn giản cho phép bạn tạo một thanh Navbar hiển thị nội dung cố định trên blog của bạn. Thủ thuật cho phép bạn có thể đặt thanh Navbar này ở bất cứ vị trí nào, ví dụ : trên cùng (top), bên dưới(bottom), trái trên(left-top), phải dưới (right-bottom)...


Với thủ thuật này, bạn có thể tạo nhiều ứng dụng, ví dụ như:

+ Tạo một thanh menu truy cập
+ Tạo một dòng thông báo
+ Tạo một danh sách các bài viết hot (kèm theo hiệu ứng chạy chữ)
+ Hoặc bất cứ thứ gì mà bạn muốn hiển thị (một lời khuyên là : chỉ nên cho phép hiển thị nội dung theo 1 hàng, để không chiếm chỗ trên không gian của blog bạn)


Và đây là hình minh họa 1 ví dụ về cách tạo một danh sách các bài viết hot.


Bây giờ ta bắt đầu thủ thuật:
1. Đăng nhập blog
2. Vào bố cục
3. Vào chỉnh sửa code HTML
4. Chèn đọan code CSS này vào trước dòng code ]]></b:skin>

div.fixed-navbar {
background-color: #ccc;
color: #000;
font: bold 13px "Trebuchet MS", Verdana, Arial, sans-serif;
position: fixed; top: 0; left: 0;
text-align: left;
width: 100%;
border: 2px #00f solid;
}
div.fixed-navbar a:hover {
color: #00f;
}

- đọc hiểu code:

+ background-color: #ccc; : màu nền của thanh navbar, nếu bạn dùng ảnh nền thì đổi code lại thành background: #ccc url(link ảnh) ;
+ position: fixed; top: 0; left: 0; : code xác định vị trí hiển thị của thanh navbar trên blog. Thuộc tính fixed là để cho thanh cố định khi di ta di chuyển chuột. còn thuộc tính left top dùng để xác định vị trí (cái này mình sẽ nói thêm ở bên dưới)
+ width: 100%; : độ rộng của thanh Navbar
+ border: 2px #00f solid; tạo đường bo cho thanh navbar, nếu bạn không thích thì cứ bỏ nó đi.


5. Save template.
6. Tạo 1 widget HTML/javascript và dán code HTML bên dưới vào:

<div class="fixed-navbar">
{nội dung mà bạn muốn hiển thị trên thanh navbar}
</div>


☼ Sau đây là một số ví dụ về các vị trí hiển thị
a. Hiển thị trên cùng với độ rộng là 100% :(hình minh họa như ở phía trên).
Thay thế đọan code bên dưới cho dòng code màu xanh ở đọan code trên.

position: fixed; top: 0; left: 0;
width: 100%;


b. Hiển thị phía bên dưới bên trái với độ rộng là 200px
Thay thế đọan code bên dưới cho dòng code màu xanh ở đọan code trên.

position: fixed; bottom: 0; left: 0;
width: 200px;

Hình minh họa:


Còn các vị trí : bên dưới bên phải, phía trên bên phải thì cũng tương tự, bạn chỉ cần thay vào là bottom:0; right: 0; hoặc top: o; right: 0;

☼ New update (29/05/2009)
Khắc phục lỗi không hiển thị được trên IE6.

- Với code trên, thủ thuật thì thủ thuật không hiển thị tốt trên IE6, và dưới đây là cách khác phục.
- Bạn chỉ thay thế code CSS trên bằng đọan code bên dưới:

div.nicetitle {
background-color: #ccc;
color: #000;
font: bold 13px "Trebuchet MS", Verdana, Arial, sans-serif;
text-align: left;
width: 200px;
border: 2px #00f solid;
position: fixed;
_position:absolute;
left: 0px;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight);
_right:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);
}

- code màu đỏ là code được thêm vào.
- Với code trên thì thanh Navbar sẽ hiển thị ở góc trái bên dưới. Nếu muốn hiển thị bên góc phải bên dưới thì sửa code màu xanh (right) thành left.
- Vớilênh left: 0px; sẽ cho phép thanh Navbar dịch qua phải (tức canh lề trái) 0 pixel.
- Còn 2 vị trí góc trái (phải) phía trên thì mình vẫn chưa fix được.

Hình minh họa


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


Enter your mail address:

7

Ngankvn ®

Hay tuyệt :-o
Nhưng Dzũng có cách nào test thử trên IE6 ko ??? Cái nút lên top hồi trước mình xem trên ie6 nó nằm ở giữa blog luôn - nhưng cái nút đẩy nhỏ ko đáng kể - chứ cái navbar này mà nằm vắt ngang blog thì mệt đấy :)

Mình gỡ IE6 lâu rồi , bay giờ tiếc , ko kiểm nghiệm đc :(

fandung-tester

ờ, IE6 hạn chế nhiều cái nhỉ, bởi vậy mình có xài IE6 đâu (mặc dù vẫn còn để trong máy) :D.

Nhưng mà như Ngân nói, cái nút lên đầu trang đó, mình thấy blog mình nó hiển thị tốt trên IE6 mà (mới test luôn), sao bên của Ngân nó nằm ở giữa màn hình đc???

Còn tiện ích này đúng là không hiển thị tốt trên IE. Để mình test cái lỗi này thử. :D

fandung-tester

đã fix lỗi cho IE rồi đó Ngân à,thử xem sao :D

Ngankvn ®

Thử trên IE6 luôn rồi hả :D
Thế thì dùng ngay :) , chứ thử thì thua vì có còn IE6 đâu mà thử :(

[!!]Mưa[ -(¯`v´¯)--(¯`v´¯)»]Ngâu[!!]

anh Dũng ơi có thể cho nó ẩn đi và hiện lên khi rê chuột vào không anh :). Được vậy thì tốt quá

Nguyen Tan Qua

làm sao cho chữ vào vị trí ở giữa

Thao Trinh

Hôm nay xem một số trang blogSpot mình mới ngã ngữa, ko ngờ blogSpot có thể làm được giao diện như vậy. vậy mà lâu nay mình ko để ý cứ chê hàng free, ngày đầu blogspot mới ra cũng dk 1 cái thấy đơn điệu quá rồi bỏ từ đó.
tuy nhiên mình vẫn thấy blogspot có 1 cái cực tệ là cách tổ chức nhóm nội dung ko có và cách viết bài phải tự nhúng code nếu muốn đẹp, ko hề có công cụ hổ trợ như các CMS khác.



☺ 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