Đầu tiên, 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/AVvXsEi6QxT8QdGVz0qfzYSsmCIAUvcRRhDUnchZUdL_1iT8QK_NnYoiPiwN3UNiZMIwNU09Q5JUjOGVuyyWjmnsRLwrXnwqbHeWki0ISUUJLXCbdmTB7HKvUsRLJVNxB8ePHWuSZKHcPY32G8Yk/) 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/AVvXsEi6QxT8QdGVz0qfzYSsmCIAUvcRRhDUnchZUdL_1iT8QK_NnYoiPiwN3UNiZMIwNU09Q5JUjOGVuyyWjmnsRLwrXnwqbHeWki0ISUUJLXCbdmTB7HKvUsRLJVNxB8ePHWuSZKHcPY32G8Yk/) repeat-x left bottom; /*màu nền của menu*/
}
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/AVvXsEi6QxT8QdGVz0qfzYSsmCIAUvcRRhDUnchZUdL_1iT8QK_NnYoiPiwN3UNiZMIwNU09Q5JUjOGVuyyWjmnsRLwrXnwqbHeWki0ISUUJLXCbdmTB7HKvUsRLJVNxB8ePHWuSZKHcPY32G8Yk/) 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/AVvXsEi6QxT8QdGVz0qfzYSsmCIAUvcRRhDUnchZUdL_1iT8QK_NnYoiPiwN3UNiZMIwNU09Q5JUjOGVuyyWjmnsRLwrXnwqbHeWki0ISUUJLXCbdmTB7HKvUsRLJVNxB8ePHWuSZKHcPY32G8Yk/) 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'/>
Cuối cùng bấm Lưu lại. Bây giờ, bạn trở lại trang thiết kế > Thêm tiện ích > Thêm HTML/Javacript rồi dán đoạn code phía 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>
<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>
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
Không có nhận xét nào:
Đăng nhận xét