TẠO MENU NGANG ĐẸP CHO BLOGSPOT
Thứ Hai, tháng 10 07, 2013
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].
<style>
/*------ CSS3 Menu By MBT (www.mybloggertricks.com)---------*/
#mbt-menu, { margin: 0; padding: 0; list-style: none; } #mbt-menu { width: 960px; 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>
- Sau khi dán code, các bạn tìm ở phần 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!"
- 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ả.
Lưu ý: Tùy 1 số mẫu các bạn không cần như các bước trên chỉ cần vào bố cục, bấm "Thêm tiện ích"Trong bảng "Thêm tiện ích" hiện ra - bấm Trang
