Mời bạn xem mẫu (bạn thử rê chuột vào một menu bất kỳ để xem hiệu ứng chuyển động). hiệu ứng rất đẹp và kiểu dáng khá bắt mắt,
 |
| Ảnh minh họa |
Cách tiến hành:
- Bạn Đăng nhập vào Blog
- Chọn Thiết kế
- Chọn Chỉnh sửa HTML
- Dán đoạn code sau vào bên trên thẻ ]]></b:skin> .
ul#topnav {
margin: 0px 0 0px;
padding: 0;
list-style: none;
font-size: 1.1em;
clear: both;
float: left;
width: 650px; /*do rong cua menu*/
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;
float: left;
height:40px; /*chieu cao cua menu*/
}
ul#topnav a, ul#topnav span {
padding: 10px 20px;
float: left;
text-decoration: none;
color: #fff; /*màu text cua menu*/
text-transform: uppercase;
clear: both;
height: 20px;
line-height: 20px;
background: #1d1d1d;
}
ul#topnav a { color: #7bc441; }
ul#topnav span {
display: none;
}
ul#topnav.v2 span{background: url() repeat-x left top; /*màu nen cua menu*/
}
ul#topnav.v2 a{
color: #555;
background: url() repeat-x left bottom; /*màu nen cua menu*/
}
5. Dán đoạn code bên dưới vào sau thẻ <head> .
7. Bây giờ, bạn trở lại trang Thiết kế
8. Chọn Phần Tử trang
9. Chọn Thêm tiện ích =>HTML/Javacript
10. Dán đoạn code sau vào đó.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/66256041/Menu/namkna-blogspot/ani_menu.js"></script>
6. Lưu Template lại.7. Bây giờ, bạn trở lại trang Thiết kế
8. Chọn Phần Tử trang
9. Chọn Thêm tiện ích =>HTML/Javacript
10. Dán đoạn code sau vào đó.
<ul id="topnav" class="v2">
<li><a href="URL Menu 1">MENU 1</a></li>
<li><a href="URL Menu 2">MENU 2</a></li>
<li><a href="URL Menu 3">MENU 3</a></li>
<li><a href="URL Menu 4">MENU 4</a></li>
<li><a href="URL Menu 5">MENU 5</a></li>
<li><a href="URL Menu 6">MENU 6</a></li>
</ul>
- Trong đó:
Sau khi thay đổi song các dòng màu đỏ và màu xanh bạn bấm lưu lại để xem thành quả.
- Dòng màu đỏ là URL liên kết tới bài viết, nhãn.
- Dòng Màu xanh là tên bài viết nhãn tương ứng
![Truyện cười tiếu lâm tục tĩu 18+ hay nhất [P3]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfBo-uJRwBOEwolBAyjP72CvE38UMpgUcMNtYAEuxpdFOciBDHX1FlCH_SvLfQjEfgsWi7LEPFfYQOX7NoIEmA5wedTzRB1SvKK-RcVRNRirY69uYUVZCGDw0psFs4BBLj_OaTnDjsfZN2/s72-c/tho-che-shock-cuoi-chut-choi.png)
No comments:
Post a Comment