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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvS54SoeJlYMN4cb3VORwAGip3OpakLHY79EVhFU6FtJ7j9pZwMahBV4L5a4RjMpFpepyOWGKiczav3zvEhtVcO2h7cmwVwowh592VAeTkeXiJl4rpEo_onCp-nrYeeqmyglu7kYdRL1Q_/s1600/a_bg-quangvietmkt-blogspot.png) repeat-x left top; /*màu nen cua menu*/
}
ul#topnav.v2 a{
color: #555;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvS54SoeJlYMN4cb3VORwAGip3OpakLHY79EVhFU6FtJ7j9pZwMahBV4L5a4RjMpFpepyOWGKiczav3zvEhtVcO2h7cmwVwowh592VAeTkeXiJl4rpEo_onCp-nrYeeqmyglu7kYdRL1Q_/s1600/a_bg-quangvietmkt-blogspot.png) 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
No comments:
Post a Comment