QUANGHIEN968.: MENU NGAN CÓ HIỆU ỨNG.

Thứ Năm, 5 tháng 7, 2012

MENU NGAN CÓ HIỆU ỨNG.

Các bước thực hiện:

1. Vào Thiết Kế -> Phần Tử Trang

2. Chọn Thêm Tiện Ích

3. Tạo một HTML/Javarscrip và thêm đoạn code bên dưới 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>
<li><a href="URL Menu 5">MENU 5</a></li>
<li><a href="URL Menu 6">MENU 6</a></li>
</ul>

Sau đó bạn đăng nhập vào Blog > chọn Thiết kế > chọn Chỉnh sửa HTML, bạn bấm đồng thời cặp phím Ctrl+F để mở hộp tìm kiếm và gõ vào lệnh ]]></b:skin>, sau đó dán đoạn code phía dưới trước dòng lệnh đó.



ul#topnav {
margin: 0px 0 0px;
padding: 0;
list-style: none;
font-size: 1.1em;
clear: both;
float: left;
width: 650px; /*độ rộng của menu*/
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;
float: left;
height:40px; /*chiều cao của menu*/
}
ul#topnav a, ul#topnav span {
padding: 10px 20px;
float: left;
text-decoration: none;
color: #fff; /*màu text của 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/AVvXsEi6PtTgwjFD0nz0gn9inTzZNlIPkqNtVPBqRpppIdpX63w9nP_uTwBJFSGZ1BxGLdKoxX2UfvuC0gSugBsYNUVNYSqTf8EzAJSJ-sFXeljEKWKIFok7i_fYmLtOfMxg4AjpcI2Ollyd8nAH/) repeat-x left top; /*màu nền của menu*/
}
ul#topnav.v2 a{
color: #555;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6PtTgwjFD0nz0gn9inTzZNlIPkqNtVPBqRpppIdpX63w9nP_uTwBJFSGZ1BxGLdKoxX2UfvuC0gSugBsYNUVNYSqTf8EzAJSJ-sFXeljEKWKIFok7i_fYmLtOfMxg4AjpcI2Ollyd8nAH/) repeat-x left bottom; /*màu nền của menu*/
}




 Tiếp tục, trong khung tìm kiếm nhỏ bạn thay dòng lệnh ]]></b:skin> bằng lệnh <head> và dán đoạn code dưới đây vào sau nó.


<script src='http://dl.dropbox.com/u/66348944/jquery.min.js' type='text/javascript'/>

<script src='http://dl.dropbox.com/u/66348944/ani_menu.js' type='text/javascript'/>





Bạn thay đổi các dòng màu đỏ và màu xanh theo ý mình và bấm Lưu lại.

Bạn trở lại vào Blog sẽ thấy có một menu ngang màu đỏ và khi bạn rê chuột vào menu này sẽ có hiệu ứng chuyển động tuyệt đẹp.

Chúc bạn thành công    XEM TRƯỚC MẪU MENU.


LƯU Ý : sau khi chèn các đoạn code theo hướng dẩn , các bạn không nên chọn lưu mẫu ngay mà nên chọn chế độ xem trước , khi quay lại trang chính trong chế độ xem trước các bạn xem nó có hiển thị đúng cái mình cần hay không , nếu đúng thì lưu lại còn không đúng thì bạn chọn xoá chỉnh sữa để làm lại từ đầu cho tiên. một lưu ý nữa là tuỳ theo mẫu blog bạn chọn đôi khi sẽ có những kết quả khác nhau.