Tạo Menu cố định ở đầu trang.

12 Dec


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

Bắt đầu thui nào:
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

Theo:traidatmui.com

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: