Nếu trên Blog của bạn có quá nhiều trang riêng lẻ thì công việc tạo menu ngang là cần thiết, có nhiều cách để tạo ra menu ngang (bạn có thể xem các mẫu menu ngang đơn giản TẠI ĐÂY).
Ngoài cách trên, bạn có thể tạo cho mình một menu có nhiều menu con xổ dọc xuống khi bạn click vào một menu chính bất kỳ, điều này sẽ làm cho Blog bạn trông "gọn gàng" hơn và "Pro" hơn rất nhiều.
Mời bạn bấm Xem thử phía dưới để trải nghiệm trước menu ngang này
Xem thử
Mời bạn bấm Xem thử phía dưới để trải nghiệm trước menu ngang này
Để tạo được như vậy, các bạn cần làm theo các bước sau đây:
Đầu tiên, bạn đăng nhập vào Blog > Chọn bố cục > Thêm tiện ích HTML/Javacript (nếu chưa biết cách thêm tiện ích HTML/Javacript thì mời bạn xem TẠI ĐÂY). Sau đó dán toàn bộ code phía dưới vào.
<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/u/66348944/dunghennessy/menungangxodoc1.css" />
<link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/u/66348944/dunghennessy/menungangxodoc1-v.css" />
<script type="text/javascript" src="https://dl.dropbox.com/u/66348944/dunghennessy/jquery.min.js"></script>
<script type="text/javascript" src="https://dl.dropbox.com/u/66348944/dunghennessy/menungangxodoc1.js">
</script>
<script type="text/javascript">
ddsmoothmenu.init({
mainmenuid: "smoothmenu1", //menu DIV id
orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu', //class added to menu's outer DIV
//customtheme: ["#1c5a80", "#18374a"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
ddsmoothmenu.init({
mainmenuid: "smoothmenu2", //Menu DIV id
orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu-v', //class added to menu's outer DIV
//customtheme: ["#804000", "#482400"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
</script>
<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="http://www.dunghennessy.blogspot.com">Home</a></li>
<li><a href="#"> Tên menu chính 1 </a>
<ul>
<li><a href=" địa chỉ trang "> Tên menu phụ 1 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 1 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 1 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 1 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 1 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 1 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 1 </a></li>
</ul>
</li>
<li><a href="#"> Tên menu chính 2</a>
<ul>
<li><a href=" địa chỉ trang "> Tên menu phụ 2 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 2 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 2 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 2 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 2 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 2 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 2 </a></li>
</ul>
</li>
<li><a href=" địa chỉ trang "> Tên menu chính 3</a></li>
<li><a href="#"> Tên menu chính 4</a>
<ul>
<li><a href=" địa chỉ trang "> Tên menu phụ 4 </a></li>
<li><a href="#"> Tên menu phụ 4 </a>
<ul>
<li><a href=" địa chỉ trang "> Tên menu phụ 4/1 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 4/1 </a></li>
<li><a href="#"> Tên menu phụ 4/2 </a>
<ul>
<li><a href=" địa chỉ trang "> Tên menu phụ 4/3 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 4/3 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 4/3 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 4/3 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 4/3 </a></li>
</ul>
</li>
<li><a href=" địa chỉ trang "> Tên menu phụ 4/2 </a></li>
</ul>
</li>
</ul>
</li>
<li><a href=" địa chỉ trang "> Tên menu chính 5 </a></li>
</ul>
<br style="clear: left" />
</div></!doctype>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/u/66348944/dunghennessy/menungangxodoc1.css" />
<link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/u/66348944/dunghennessy/menungangxodoc1-v.css" />
<script type="text/javascript" src="https://dl.dropbox.com/u/66348944/dunghennessy/jquery.min.js"></script>
<script type="text/javascript" src="https://dl.dropbox.com/u/66348944/dunghennessy/menungangxodoc1.js">
</script>
<script type="text/javascript">
ddsmoothmenu.init({
mainmenuid: "smoothmenu1", //menu DIV id
orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu', //class added to menu's outer DIV
//customtheme: ["#1c5a80", "#18374a"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
ddsmoothmenu.init({
mainmenuid: "smoothmenu2", //Menu DIV id
orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu-v', //class added to menu's outer DIV
//customtheme: ["#804000", "#482400"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
</script>
<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="http://www.dunghennessy.blogspot.com">Home</a></li>
<li><a href="#"> Tên menu chính 1 </a>
<ul>
<li><a href=" địa chỉ trang "> Tên menu phụ 1 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 1 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 1 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 1 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 1 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 1 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 1 </a></li>
</ul>
</li>
<li><a href="#"> Tên menu chính 2</a>
<ul>
<li><a href=" địa chỉ trang "> Tên menu phụ 2 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 2 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 2 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 2 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 2 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 2 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 2 </a></li>
</ul>
</li>
<li><a href=" địa chỉ trang "> Tên menu chính 3</a></li>
<li><a href="#"> Tên menu chính 4</a>
<ul>
<li><a href=" địa chỉ trang "> Tên menu phụ 4 </a></li>
<li><a href="#"> Tên menu phụ 4 </a>
<ul>
<li><a href=" địa chỉ trang "> Tên menu phụ 4/1 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 4/1 </a></li>
<li><a href="#"> Tên menu phụ 4/2 </a>
<ul>
<li><a href=" địa chỉ trang "> Tên menu phụ 4/3 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 4/3 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 4/3 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 4/3 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 4/3 </a></li>
</ul>
</li>
<li><a href=" địa chỉ trang "> Tên menu phụ 4/2 </a></li>
</ul>
</li>
</ul>
</li>
<li><a href=" địa chỉ trang "> Tên menu chính 5 </a></li>
</ul>
<br style="clear: left" />
</div></!doctype>
Bây giờ bạn chỉ việc thay đổi các dòng lệnh màu đỏ và màu xanh theo ý của bạn, cuối cùng bấm Lưu và trở lại blog bạn sẽ thấy blog của mình sẽ có một menu ngang xổ dọc xuống các menu con khá tiện dụng...
Chúc bạn thành công
233 nhận xét:
«Cũ nhất ‹Cũ hơn 201 – 233 trên 233 Mới hơn› Mới nhất»Mình cũng cám ơn bạn đã ghé tham quan và ủng hộ dunghennessy
Bạn ơi cho mình hỏi. mình muốn làm cái mune ngang như của bạn mà không được.
Menu nhu của bạn đó. trang chủ Thủ thuật Win7 Thủ thuật WinXP
Thủ thuật USB .... đó
Nhìn cái blogspot của bạn quá đẹp luôn.
Menu đó là menu đơn giản mà thôi, bạn có thể vào đây kiếm cho mình vài mẫu ưng ý nha
* TẠO MENU NGANG DỌC
Chúc bạn thành công
Mình làm đi làm lại mà vẫn không được! bạn làm ơn chỉ giùm mình nhé
blog của mình là http://duantragop.blogspot.com/
Cảm ơn nhiều!
Blog của bạn đang sử dụng giao diện mặc định của Blogspot nên tiện ích này đã bị hạn chế, bạn phải kéo tiện ích này lên khu vực bài đăng thì nó mới xổ dọc menu con (không phải để dưới banner...)
bạn ak.nếu menu con bị che bởi ảnh thì làm sao?
http://thegioinuochoachinhhang.blogspot.com/
Vấn đề của bạn giống như của bạn Lê Quốc Việt (comment ở trên), Bạn phải kéo menu này trên khu vực bài đăng thì mới được.
amind ơi! mình có làm như bạn hướng dần chèn vào website ko hiện ra dc,amind có thể giup mình đoạn code mennu ngang,gồm
trang chu,sản phẩm(có 8 menu con),cách đặt hàng(có 4 mennu con),giới thiệu,sản phẩm mới về,liên hệ,phản hồi
kích thước menu ngang rộng 960,màu nền menu hồng
gmail:aoquangchautk2011@gmail.com
cám ơn Amind nhiều
Code menu ngang này mình chỉ thử nghiệm trên Blogspot mà thôi, còn về trang Web khác thì mình cũng không biết nó có hoạt động được không nữa bạn à...
Anh dung ah? anh hướng dẫn em duy chuyển cái menu ngang lên trên dc hok anh, em làm như anh nhưng cái temple của em nó hok cho duy chuyển lên nữa, chỉ vào trang chủ mới thấy còn lại hok thấy. Đây là blogspot của em: http://kysupanda90.blogspot.com/ mong anh giúp đỡ.
bạn ơi cho mình hỏi?
sao mình kéo thanh menu lên hàng ngang như bạn thì nó ko xổ menu con xuống.
còn khi mình kéo thanh menu sang bên hông thì nó có xổ menu xuống nè.
còn nữa nè bạn
khi minh kéo xuống cuối trang blog thì nó vẫn có menu con xổ xuống nè
Anh ơi sao em làm như anh mà không có menu con xổ xuống vậy? anh làm giúp em với: www.ktsnguyenkeluc.blogspot.com. thanks anh!
Đó là vì giao diện em đang sử dụng là giao diện có nền phía dưới nên không áp dụng được thủ thuật này em ạ!!!
Anh giúp em với!
Làm sao để liên kết bài viết với các mục trong menu đó hả anh? Khi mình bấm vào mục nào trên menu thì nó hiện ra bài viết đó
Thay địa chỉ trang bài viết vào dòng lệnh màu đỏ (địa chỉ trang), cuối cùng bấm Lưu là xong mà
Em làm được rồi, thanks anh.
Cái giao diện của em giờ không có cách nào làm cái menu xổ xuống hả anh?
Chỉ còn một cách là chọn giao diện khác mà thôi em trai à...
a dung oi sao em lam nhu bai viết của anh mà click vàonó ko xổ xuống vay?
Gởi anh địa chỉ blog của em để anh xem thử nào...!!!!
sao tôi làm mà font menu to vậy có cách nào chỉ dùm tôi với.
To là to như thế nào??? Mình chưa hiểu ý bạn lắm?
Code ở trên nếu làm thành công sẽ cho ra menu giiống như bản xem thử đấy bạn
anh giúp e với được không ạ? e cũng mới học làm bloger nhưng mà e làm cũng k được cái menu sọc ngang ở dưới :(
Menu sọc ngang là menu nào vậy em??? Em nêu cụ thể đi rồi Anh sẽ hướng dẫn cho Em
a à sao e làm thanh menu ngang giống a không khác chúc nào mà vẫn hông được zậy a
yahoo : timnhoxpekute mong a chỉ e
"Nó" bị lỗi như thế nào???
Anh dũng oi, menu ngang có nhiều menu con , em làm ok rồi , nhưng nó bị lấp phía sau noi dung bài viết , anh có cách nào làm cho menu này hiện lên trên bài viết không anh ? giúp em với , thanks anh
chào anh ạ em đã làm theo hướng dẫn như trên nhung ko thấy hiện ra cái mục menu con đâu cả
Blog em là http://luongdh.blogspot.com/ anh vào xem xem nó bị lỗi gì chỉnh sửa hộ em nhé .
Chào Add. Minh cũng thử làm như Add hướng dẫn. Không hiểu sao chỉ có thanh ngang chính. Còn những Menu sổ dọc bị ẩn đi. Add có cách nào khách phục không vậy. Cảm ơn
Giao diện mà bạn đang sử dụng chắc là có nền nổi, vì vậy các menu con này sẽ bị ẩn dưới nền...Vấn đề này mình cũng đang nghiên cứu khắc phục nhưng không được.
Do vậy bạn chỉ còn cách là đổi lại nền cho blog mà thôi..
mình đã thử nhg chỉ hiện ra menu ngang thôi, không xổ xuống đc, mình thích menu dạng này
giúp mình nhé: yahoo : nguyenthao_70
Bạn làm lại vài lần thử xem sao...Bên mình thử lại vẫn xổ xuống bình thường mà
Tôi chép nguyên code của bạn vào áp cho Blog mà không thấy nó xổ dọc xuống bạn ạ
Đăng nhận xét