"Tạo menu cố định ở đầu trang"

(Traidatmui.com) – Nếu bạn cảm thấy việc tạo menu ngay trên nền blog của bạn gây mất nhiều không gian thì bạn có thể tạo ra menu phụ ở hai bên blog hoặc là ở trên đầu trang hoặc có thể ở cuối trang. Và hôm nay mình xin chia sẻ cùng các bạn việc tạo ra một menu phụ nằm có định ở đầu của trang blog bạn. Với menu cố định này vừa tiết kiệm một phần không gian cho blog, chúng ta vừa có thể click vào các mục trên menu một cách dễ dàng cho dù bạn ở bất kì vị trí nào trên blog. Bây giờ chúng ta đi vào thủ thuật này.

1. Đăng nhập vào blogspot
2. Vào bố cục chọn chỉnh sửa HTML
3. Chèn code bên dưới vào sau thẻ <head>
<style>
.fixed_menu {
position: fixed;
top: 0px; /* khoảng cách ở đầu trang*/
right: 172px; /* khoảng cách bên phải*/
width: auto;
margin: 0 0px 0px 0px;
background: #0000cc; /* màu nền của menu*/
opacity:.900;
filter: alpha(opacity=90);
padding: 2px 5px 3px 5px;
-moz-border-radius-topright: 0px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
}
.fixed_menu a {
color:#fff; /* màu của link*/
font-size:12px; /* kích thước của text*/
}

.fixed_menu a:hover {
position: relative;
color:#ff0000; /* màu của link khi rê chuột*/
}

.fixed_menu a { display: list; }

html .fixed_menu {position:fixed;}
</style>

Bạn hãy dựa vào các dòng chú thích trong code để tùy chỉnh lại cho phù hợp với ý của bạn. Chỉnh sửa xong hãy xóa các dòng chú thích đi để không bị lỗi code.
4. Save template lại
5. Trở về phần tử trang thêm 1 HTML/Javascript
6. Thêm code sau vào HTML/Javascript đó
<div class='fixed_menu'>
<a href='#' title='Tên của link 1'>Tên của link 1</a> |
<a href='#' title='Tên của link 2'>Tên của link 2</a> |
<a href='#' title='Tên của link 3'>Tên của link 3</a> |
<a href='#' title='Tên của link 4'>Tên của link 4</a> |
<a href='#' title='Tên của link 5'>Tên của link 5</a> |
<a href='#' title='Tên của link 6'>Tên của link 6</a>
</div>

Chỉnh sửa:
- Bạn hãy thay các dấu "#" thành các đường link tương ứng với từng thư mục mà bạn muốn hiển thị trên menu.
- Thay các dòng text màu xanh thành tên của các thư mục tương ứng với đường link của nó.

7. Cuối cùng save lại

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

Xem khác cùng chủ đề

7 nhận xét | Viết lời bình

DH
8/17/2011 12:36:00 SA Trả lời

trai đất múi ơi tạo xong menu rồi thì cách đăng bài vào từng mục như thế nào nhỉ ? Giúp mình với !

Admin
8/17/2011 12:45:00 SA Trả lời

Trong phần đăng bài có một phần cuối khung soạn thảo gọi là Label hay nhãn bạn đặt đó là thư mục chung cho các bài viết có liên quan đến thư mục đó, sau đó lấy link của nhãn đó đặt vào menu trên nhe.

7/20/2012 03:09:00 SA Trả lời

làm sao để chèn ô tìm kiếm trên cùng 1 hàng của menu luôn anh. Em chèn vô nó kô cùng 1 hàng chỉ hiện ngay bên dưới menu

Admin
7/20/2012 03:53:00 SA Trả lời

Em hãy thêm thuộc tính float:left; vào .fixed_menu a { và thêm float:right; vào trong style của form tìm kiếm của em.

7/21/2012 07:54:00 CH Trả lời

em để float:right; thì mất màu nền menu chỗ có form tìm kiếm.Nhưng bỏ float thì như này anh,anh vào xem em cái: http://www.xemphims.co.cc

Admin
7/21/2012 08:07:00 CH Trả lời

Vì mặc định trên menu của em để padding là 0 nên phần form sẽ nằm sát lề hết. Em hãy canh chỉnh lề ở .menusearch{ với thuộc tính margin (em có thể xem các giá trị trong thuộc tính margin tại đây) để cho nó có thể nằm giữa menu của em.

7/22/2012 07:20:00 SA Trả lời

cam' on anh! nhieu

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang