Hướng dẫn tạo menu ngang cho blog

Menu ngang có thể coi như là một sơ đồ trang thu gọn của trang web, blog, nó thể hiện tính chuyên nghiệp của website. Có nhiều loại menu ngang khác nhau, nhưng tựu chung có thể phân làm 2 loại đó là menu ngang đơn giản (không có menu con sổ xuống) và menu ngang phức tạp (gồm nhiều menu con sổ xuống, có thể là 2 cấp hay 3 cấp). Tuy nhiên tùy từng trang web khác nhau, bạn có thể lựa chọn loại menu theo ý muốn.

Bài viết này, chúng tôi giới thiệu với các bạn cách tạo menu ngang đơn giản mà tôi sưu tầm được từ blog của Namkna và thay đổi thêm một số thuộc tính cho giao diện đẹp hơn. Ưu điểm của loại này đó là: đơn giản, tốc độ load nhanh và cũng khá phù hợp với các giao diện khác nhau. Đây cũng là loại menu mà chúng tôi sử dụng cho trang web này (11/2013), đây là demo:

Trình tự các bước tạo menu ngang cho blog như sau:

- Đăng nhập vào trang quản trị của blog, đến phần Dashboard >> Template >> Edit HTML

- Copy đoạn mã dưới đây (click Select All sau đó copy) dán nó vào phần Edit HTM trước thẻ đóng ]]></b:skin> (nhấn Ctrl +F rồi dán ]]></b:skin> vào ô hiện ra để tìm cho nhanh)

/*----- Drop Down Menu share by videothuthuatblog.blogspot.com----*/

#drop {
margin: 0;
padding: 15px;
z-index:100;
position:relative;
}

#dropmenu_namkna li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}

#dropmenu_namkna li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px solid #AAAAAA;
background: #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#F57900), to(#cccccc));
background: -moz-linear-gradient(top, #F57900, #cccccc);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 1px 0;
color: #363636;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}

#dropmenu_namkna li a:hover {
background: #C8C8C8;
}

#dropmenu_namkna li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
z-index:30; /* thuộc tính hiện menu con đối với các blog để nổi bracgrou */
}

#dropmenu_namkna li ul li {
float: none;
display: inline;
}

#dropmenu_namkna li ul li a {
width: auto;
background: #CAE8FA;
}

#dropmenu_namkna li ul li a:hover {
background: #A3CEE5;
}

- Tiếp theo, bạn nhấn Save Template để lưu mẫu.

- Bây giờ, bạn đến phần Dashboard >> Layout, chọn thêm tiện ích dưới phần header rồi chọn loại tiện ích HTML/JavaScript và dán đoạn code sau vào trong đó, đây cũng chính là nội dung sẽ hiển thị của menu, các bạn thay đổi các tiêu đề và link cho phù hợp nhé.

- Cuối cùng lưu Layout và reload lại trang để xem kết quả.

Lưu ý, code trên ở một số mẫu bạn vẫn có thể sử dụng để làm menu đổ xuống 2 lớp hoặc 3 lớp. Với blog Videothuthuatblog sử dụng mẫu chuẩn của blogger và chưa hề có chỉnh sửa code nên không hiển thị được dạng menu đổ xuống. Chúc các bạn thành công!