Hôm nay, giới thiệu với các bạn cách tạo menu ngang đơn giản (không có menu con xổ xuống). Đặc điểm nổi bật của menu này là đơn giản, đẹp, cài đặt dễ dàng mà không cần phải chèn code vào HTML của blog. Thích hợp với những blog có ít chuyên mục, đặc biệt là các mẫu mặc định của Blogspot và các bạn mới lập blog. Các bạn có thể xem trước mẫu menu này
Menu sẽ được tạo bằng các bước đơn giản sau đây:
1. Bấm vào "Thiết kế" trên thanh điều khiển sẽ hiện ra giao diện "Trang tổng quan". Tìm trong giao diện vừa hiện ra nút "Bố cục" và bấm vào đó. Một giao diện khác hiện ra, bấm "Thêm tiện ích" [1].
(Nên chọn vị trí "Thêm tiện ích" ở ngay dưới tiêu đề blog cho tiện.)
2. Trong bảng "Thêm tiện ích" hiện ra - bấm "HTML/Javascript" [2].
Tại giao diện "Định cấu hình HTML/JavaScript" - để trống tiêu đề và dán toàn bộ code trong khung dưới vào vị trí tương ứng.
<style>
/*------ CSS3 Menu By MBT (www.mybloggertricks.com)---------*/
#mbt-menu, {
margin: 0;
padding: 0;
list-style: none;
}
#mbt-menu {
width: 500px;
margin: 10px auto;
border: 0px solid #222;
background-color: #888;
background-image: -moz-linear-gradient(#666, #FAF);
background-image: -webkit-gradient(linear, left top, left bottom, from(#666), to(#FAF));
background-image: -webkit-linear-gradient(#666, #FAF);
background-image: -o-linear-gradient(#666, #FAF);
background-image: -ms-linear-gradient(#666, #FAF);
background-image: linear-gradient(#666, #FAF);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 1px #777;
-webkit-box-shadow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;
}
#mbt-menu {
zoom:1;
}
#mbt-menu li {
float: left;
border-right: 1px solid #222;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#mbt-menu a {
float: left;
padding: 12px 30px;
color: #FFF;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #222;
}
#mbt-menu li:hover > a {
color: #FC803D;
}
*html #mbt-menu li a:hover { /* IE6 only */
color: #FC803D;
}
#mbt-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#mbt-menu ul a:hover {
background-color: #FC803D;
background-image: -moz-linear-gradient(#07CDEF, #0186ba);
background-image: -webkit-gradient(linear, left top, left bottom, from(#07CDEF), to(#0295DG));
background-image: -webkit-linear-gradient(#07CDEF, #0295DG);
background-image: -o-linear-gradient(#07CDEF, #0295DG);
background-image: -ms-linear-gradient(#07CDEF, #0295DG);
background-image: linear-gradient(#07CDEF, #0295DG);
}
</style>
<ul id="mbt-menu">
<li><a href="LINK BLOG">TRANG CHỦ</a></li>
<li><a href="LINK NHÃN 1">TÊN NHÃN 1</a></li>
<li><a href="LINK NHÃN 2">TÊN NHÃN 2</a></li>
<li><a href="LINK NHÃN 3">TÊN NHÃN 3</a></li>
<li><a href="LINK NHÃN 4">TÊN NHÃN 4</a></li>
<li><a href="LINK NHÃN 5">TÊN NHÃN 5</a></li>
</ul>
Lưu ý:
- Con số "960" (tô màu xanh) trong dòng code "width: 960px" là độ rộng thanh menu - các bạn có thể tăng, giảm cho phù hợp với độ rộng của blog.
- Thay phần tô màu đỏ bằng link các nhãn trong blog của các bạn, và phần tô màu xanh thành tên các nhãn tương ứng. Các bạn chưa quen, có thể tham khảo cách lấy link và dán link tại bài viết:
3. Bấm "Lưu" [3] để lưu lại và hệ thống sẽ tự động trở lại giao diện như ở bước 1 và tại vị trí "Thêm tiện ích" ban đầu đã hiện thị một tiện ích mới với tiêu đề: "HTML/JavaScript" [4]. Đây chính là thanh menu đang tạo
- Trong bước này, các bạn có thể đặt lại vị trí thanh menu (dùng chuột kéo thả, di chuyển tiện ích vừa tạo đến vị trí thích hợp - trường hợp này chỉ cần thao tác khi bạn chọn "Thêm tiện ích" không nằm ngay dưới thanh tiêu đề từ bước 1.)
4. Bước cuối cùng: Bấm "Lưu sắp xếp" [5] để hoàn thành và trở lại trang chủ xem kết quả.
P/S: Các đoạn code trên do một nhà thiết kế người Indonesia chia sẻ đã chỉnh sửa lại màu sắc và Việt hóa cho phù hợp.
HƯỚNG DẪN TẠO MENU DROPDOWN CHO BLOG - KIỂU 1
Thứ ba, tháng chín 03, 2013
Menu là một công cụ không thể thiếu cho một trang blog đạt chuẩn. Ngoài tác dụng trang trí cho blog và giúp cho người truy cập dễ dàng tìm kiếm, đi tới các danh mục chứa thông tin trong đó, menu còn có tác dụng SEO (tối ưu hóa tìm kiếm) cho blog.
Theo email yêu cầu của một số bạn bè. Caocongkien 360 chia sẻ với các bạn cách tạo menu dropdown (có menu con xổ xuống) cho blog. Các bạn có thể xem mẫu menu này ngay trên đầu trang.
Cách tạo menu dropdown:
1. Đăng nhập vào blog, bấm "Thiết kế" - "Trang tổng quan", bấm vào "Mẫu", bấm tiếp "Chỉnh sửa HTML".
2. Tìm thẻ: ]]></b:skin> . (Xem cách tìm nhanh các thẻ TẠI ĐÂY).
3. Chèn đoạn mã trong khung dưới đây vào phía trên thẻ: ]]></b:skin> vừa tìm được.
#mbtnavbar {
background: #060505;
width: 960px;
color: #FFF;
margin: 0px;
padding: 0;
position: relative;
border-top:0px solid #960100;
height:35px;
}
#mbtnav {
margin: 0;
padding: 0;
}
#mbtnav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#mbtnav li {
list-style: none;
margin: 0;
padding: 0;
border-left:1px solid #333;
border-right:1px solid #333;
height:35px;
}
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
#mbtnav li a:hover, #mbtnav li a:active {
background: #BF0100;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
}
#mbtnav li {
float: left;
padding: 0;
}
#mbtnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#mbtnav li ul a {
width: 140px;
}
#mbtnav li ul ul {
margin: -25px 0 0 161px;
}
#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
left: -999em;
}
#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
left: auto;
}
#mbtnav li:hover, #mbtnav li.sfhover {
position: static;
}
#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
background: #BF0100;
width: 120px;
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;
}
#mbtnav li li a:hover, #mbtnavli li a:active {
background: #060505;
color: #FFF;
display: block; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
HTML +Java
<div id='mbtnavbar'>
<ul id='mbtnav'>
<li>
<a href=' link trang chủ'>TRANG CHỦ</a></li>
<li>
<a href='link chuyên mục'>TÊN MỤC</a></li>
<li>
<a href='link chuyên mục'>TÊN MỤC</a></li>
<li>
<a href='link chuyên mục'>TÊN MỤC</a></li>
<li>
<a href='link chuyên mục'>TÊN MỤC</a>
<ul>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
</ul>
</li>
<li>
<a href='link chuyên mục'>TÊN MỤC</a>
<ul>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
</ul>
</li>
<li>
<a href='link chuyên mục'>TÊN MỤC</a>
<ul>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
<li><a href='link nhãn'>TÊN NHÃN </a></li>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
</ul>
</li>
<li>
<a href='link chuyên mục'>TÊN MỤC</a>
<ul>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
</ul>
</li>
<li>
<a href='link chuyên mục'>TÊN MỤC</a>
<ul>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
<li><a href='link nhãn'> TÊN NHÃN</a></li>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
</ul>
</li>
<li>
</li>
</ul>
</div>
Chú ý: Con số (960) được tô màu đỏ, nằm trong nền xanh ở đoạn mã trên là độ rộng của thanh menu. Các bạn có thể thay đổi cho phù hợp với blog.
Sau khi dán mã, tìm ở cuối đoạn mã vừa dán và xóa dòng nhắc nhở này: "Bài gốc: http:// ......................... Bài viết đã được đăng ký bản quyền. Bạn vui lòng ghi rõ nguồn để thể hiện nhân cách của bạn! Xin cảm ơn!"
4. Bấm "Lưu mẫu" để lưu vào template.
5. Lặp lại các thao tác ở bước số 1 và bấm vào "Bố cục", bấm tiếp "Thêm tiện ích" [1] (ngay dưới tiêu đề blog - xem ảnh trên), chọn và thêm "HTML/JavaScript" [2] trong bảng tiện ích hiện ra. Để trống tiêu đề và dán đoạn mã trong khung dưới vào phần nội dung:
<div id='mbtnavbar'>
<ul id='mbtnav'>
<li>
<a href=' link trang chủ'>TRANG CHỦ</a></li>
<li>
<a href='link chuyên mục'>TÊN MỤC</a></li>
<li>
<a href='link chuyên mục'>TÊN MỤC</a></li>
<li>
<a href='link chuyên mục'>TÊN MỤC</a></li>
<li>
<a href='link chuyên mục'>TÊN MỤC</a>
<ul>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
</ul>
</li>
<li>
<a href='link chuyên mục'>TÊN MỤC</a>
<ul>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
</ul>
</li>
<li>
<a href='link chuyên mục'>TÊN MỤC</a>
<ul>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
<li><a href='link nhãn'>TÊN NHÃN </a></li>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
</ul>
</li>
<li>
<a href='link chuyên mục'>TÊN MỤC</a>
<ul>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
</ul>
</li>
<li>
<a href='link chuyên mục'>TÊN MỤC</a>
<ul>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
<li><a href='link nhãn'> TÊN NHÃN</a></li>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
</ul>
</li>
<li>
</li>
</ul>
</div>
- Phần mã nằm trong nền xanh ở khung trên là các menu con xổ xuống.
- Thay "link chuyên mục" bằng link của các danh mục hoặc trang tĩnh trong blog; "tên mục" bằng tên các trang hoặc danh mục trong blog của các bạn.
- Thay "linh nhãn" bằng link các nhãn trong blog; "tên nhãn" bằng tên của các nhãn trong blog của các bạn.
Các bạn chưa quen, có thể tham khảo cách lấy link và dán link tại bài viết:
6. Bấm "Lưu" và định vị tiện ích vừa tạo rồi bấm "Lưu sắp xếp" [3] là xong.
Mời các bạn trở lại trang chủ xem kết quả!
Các bạn có thể tham khảo thêm:
TẠO MENU CỐ ĐỊNH (STICKY MENU) CHO BLOGSPOT
Chúc các bạn áp dụng thành công và có một hệ thống menu drop đẹp!
P/S: Các đoạn code trên do một nhà thiết kế người Indonesia chia sẻ cho Caocongkien 360. Caocongkien 360 đã chỉnh sửa lại thêm vào một số chi tiết và Việt hóa cho phù hợp.
Nguồn:
http://caocongkien.blogspot.com/2013/10/tao-menu-ngang-ep-cho-blogspot.html
