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