Chia sẻ đến với các bạn cách tạo menu ngang có hiệu ứng động khi rê chuột (không có menu con).Mời bạn xem thủ thuật blogger tạo hiệu ứng rất đẹp và kiểu dáng khá bắt mắt.
>>Drop Down Menu - Thủ thuật Menu xổ xuống tự động cập nhật cho Label Blogger
>>Drop Menu - Thủ thuật tạo Menu click thì xổ dọc xuống Blogger
>>Trang chủ - Thủ thuật code đặt website làm trang chủ trình duyệt cho Blogger
>>Loading - Thủ thuật tạo hiệu ứng loading cho Blogger
>>Code - Thủ thuật tạo khung chứa Code có nút Chọn tất cả cho Blogger
>>Breadrumbs - Thủ thuật tạo Breadrumbs cho Blogger / Blogspot
>>2 Columns - Thủ thuật tạo 2 cột cho Main Blogger
>>Drop Down Menu - Thủ thuật Menu xổ xuống tự động cập nhật cho Label Blogger
>>Drop Menu - Thủ thuật tạo Menu click thì xổ dọc xuống Blogger
>>Trang chủ - Thủ thuật code đặt website làm trang chủ trình duyệt cho Blogger
>>Loading - Thủ thuật tạo hiệu ứng loading cho Blogger
>>Code - Thủ thuật tạo khung chứa Code có nút Chọn tất cả cho Blogger
>>Breadrumbs - Thủ thuật tạo Breadrumbs cho Blogger / Blogspot
>>2 Columns - Thủ thuật tạo 2 cột cho Main Blogger
1- Bạn Đăng nhập vào Blogger / Blogspot
2- Chọn Thiết kế
2- Chọn Thiết kế
3- Chọn Chỉnh sửa HTML và 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(http://1.bp.blogspot.com/-BSG0tzXDbFU/UaryYFzjWUI/AAAAAAAADSY/i5lJ_oe83xQ/s1600/menu+1.gif) repeat-x left top; /*màu nen cua menu*/
}
ul#topnav.v2 a{
color: #555;
background: url(http://1.bp.blogspot.com/-BSG0tzXDbFU/UaryYFzjWUI/AAAAAAAADSY/i5lJ_oe83xQ/s1600/menu+1.gif) repeat-x left bottom; /*màu nen cua menu*/
}
5. Dán đoạn code bên dưới vào sau thẻ <head> .
6. Lưu Template lại.<script type="text/javascript" src="http://thietkewebplus.googlecode.com/files/jquery.min.js"></script> <script type="text/javascript" src="http://thietkewebplus.googlecode.com/files/ani_menu.js"></script>
7. Bây giờ, bạn trở lại trang Bố cục
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 đó.
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>
- 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
Đăng nhận xét