Tạo menu cố định ở đầu trang
Posted in: 
11:19:00 AM
VChipIT
DEMO
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>
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 đó
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
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>
.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>
<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
0 comments:
Post a Comment