Trang chủ
Đầ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/AVvXsEj7vNGQI8YSdq4b-HZiZORi0NiE-YQwSC-ahlpPO0gDii1A0gzSP_fD2HCBDr4YqN6c01Qs2vNHI50JlLyXQQTzvCZ6V68eZWpWG6xRGpUh8hDk1UjeLupvbepwPe60DwecaR-EVy0vX5KJ/) 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/AVvXsEj7vNGQI8YSdq4b-HZiZORi0NiE-YQwSC-ahlpPO0gDii1A0gzSP_fD2HCBDr4YqN6c01Qs2vNHI50JlLyXQQTzvCZ6V68eZWpWG6xRGpUh8hDk1UjeLupvbepwPe60DwecaR-EVy0vX5KJ/) 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/AVvXsEj7vNGQI8YSdq4b-HZiZORi0NiE-YQwSC-ahlpPO0gDii1A0gzSP_fD2HCBDr4YqN6c01Qs2vNHI50JlLyXQQTzvCZ6V68eZWpWG6xRGpUh8hDk1UjeLupvbepwPe60DwecaR-EVy0vX5KJ/) 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/AVvXsEj7vNGQI8YSdq4b-HZiZORi0NiE-YQwSC-ahlpPO0gDii1A0gzSP_fD2HCBDr4YqN6c01Qs2vNHI50JlLyXQQTzvCZ6V68eZWpWG6xRGpUh8hDk1UjeLupvbepwPe60DwecaR-EVy0vX5KJ/) 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
Thủ thuật computer
Kho phim, nhạc tổng hợp
Giaro1961-Ảnh động
Vudinhhao
Kimduccz
Achro-Ảnh động
Phamtuankietdn
CĐQTKD5A
BonsaiKutu
Karaoke online
Căn hộ của bạn
Blog'Thanh Truyền
Kiếm tiền trên mạng
vloghayvl
August Pink
GiapQb blog
Chính Trực Blog
Tin tức, giải trí, thủ thuật
Thủ thuật, điện tử, tin học...
Phố bất động sản
Căn hộ The Imperia
Vinet360Pro
Thi công bảng hiệu
Góc nhìn mới
Hoang Huu blog-Chia sẻ thủ thuật.
In PP giá rẻ
Shimi Blog
Blog Hà Công Quốc
Con tin Chúa ơi!
Avatar, tải game avatar
Tải game hay chơi game hot
In pp giá rẻ
DigitalOcean coupon
Thủ thuật máy tính
12 nhận xét:
uhm hôm nay mình đã biết tuổi bạn rùi. Mình sẽ kêu bạn = anh. Anh Dũng ơi cho em hỏi khi mình tạo menu xổ xuống rồi mình có thể tạo thêm menu ko có menu con nữa được ko anh
Vẫn được như bình thường Tùng ạ, làm thử xem
anh ơi đoạn code này khi em áp dụng thử thì cũng có một khoảng trống khoảng 1cm nằm ở trên thanh điều hướng đó anh, anh xem lại dùm em nha, cám ơn anh nhiều.
Anh đã vào boog của em và không thấy menu ngang này, em thử làm lại và để nguyên để anh vào xem xem nó bị lỗi như thế nào mới chỉnh sửa lại cho em nha
em đã làm thử rồi anh vào trang của em mới tạo xem thử nha hattung.blogspot.com. có một khoảng trống nằm trên thanh điều hướng đó anh.
Đó là do lỗi của code thứ hai, anh đã chỉnh lại rồi đó, em thử làm lại code hai xem sao nha
cám ơn anh nhiều, em đã sữa lại được rồi, chúc anh có một buổi tối vui vẻ, và tràn đầy niềm vui..........
a oi anh chi giup e cach lay linh menu , e zot lam
Cách lấy link menu như sau:
Thí dụ em muốn đặt tên hiển thị của một menu có tên là: Ảo thuật (tên hiển thị này tương ứng chữ màu xanh trên bài hướng dẫn), còn link URL là: http://magiccardtricksvn.blogspot.com/ (đây là địa chỉ Blog của em tương ứng với màu đỏ trên bài hướng dẫn), có nghĩa là khi khách tham quan bấm vào thẻ Ảo thuật nó sẽ dẫn khách tham quan đến trang của em. Copy đường URL này bằng cách copy trên thanh adress của trình duyệt blog.
bạn ui cho mình hỏi giờ mình muốn thiết kế cái thanh menu ngang như trang nè mà ko biết http://thoitrangcasau.blogspot.com/ mình muốn thiết kế thanh menu ngang chàn ra hai bên như vậy.mong được hồi âm sớm, cảm ơn ban nhiều nha.
Tôi chưa hiểu ý bạn lắm, "menu ngang chàn ra 2 bên là sao?", bạn nêu rõ hơn đi tôi sẽ hướng dẫn bạn (nếu biết)
sao anh gioi the:X:X
Đăng nhận xét