trang chủ
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.
 |
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/AVvXsEi9jRWI86ki_ODM0y1YfKBd2cZyZgV46Xa0qWVZrXqO2pWqn_PU4yS6r__MxhcdfmCTvblfICtO9WHaHqV8SW930woIn0VfTRs6k60hzQWP3i7okD1ShbCl3dwiaSLflfohYZ3K5OHQBxj6/s1600/a_bg-namkna-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/AVvXsEi9jRWI86ki_ODM0y1YfKBd2cZyZgV46Xa0qWVZrXqO2pWqn_PU4yS6r__MxhcdfmCTvblfICtO9WHaHqV8SW930woIn0VfTRs6k60hzQWP3i7okD1ShbCl3dwiaSLflfohYZ3K5OHQBxj6/s1600/a_bg-namkna-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> .
<script type="text/javascript" src="http://tanchau123.googlecode.com/files/Menu_ngang_hieuungrechuot1.txt"></script> <script type="text/javascript" src="http://tanchau123.googlecode.com/files/Menu_ngang_hieuungrechuot2.txt"></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
Chúc các bạn thành công!!!
