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



Bây giờ ta bắt đầu thủ thuật:

Chèn đọan code CSS

Code:

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;
}

+ 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.


Save

Tạo 1 widget HTML/javascript hoặc vô head và dán code HTML bên dưới vào:

Code:

<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

Code:

position: fixed; top: 0; left: 0; và width: 100%;
ở đọan code trên.

Code:

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

Code:

position: fixed; top: 0; left: 0; và width: 100%;
ở đọan code trên.

Code:

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


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;

Nguồn: Fandung
Chúc các bạn thành công.