Home
Để 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 thiết kế > Chọn chỉnh sửa HTML, sau đó bạn bấm đồng thời cặp phím Ctrl+F để mở hộp tìm kiếm và gõ vào khung dòng lệnh <head>. Bây giờ bạn copy đoạn code này và dán phía dưới dòng lệnh đó.
|
<style type='text/css'>
html .jqueryslidemenu{height: 1%;} </style> <script src='http://dl.dropbox.com/u/66348944/jquery.min.js' type='text/javascript'/> <script src='http://dl.dropbox.com/u/66348944/drop_menu.js' type='text/javascript'/> |
Sau khi dán xong đoạn code này, bạn xoá dòng lệnh cũ đi và tiếp tục gõ vào khung tìm kiếm dòng lệnh </header> rồi copy tất cả các code này vào trên dòng lệnh đó và bấm Lưu mẫu.
|
<style>
.jqueryslidemenu{ font: bold 12px Verdana; background:#153E7E; /* màu nền của menu*/ width: 100%; } .jqueryslidemenu ul{ margin: 0; padding: 0; list-style-type: none; } .jqueryslidemenu ul li{ position: relative; display: inline; float: left; } .jqueryslidemenu ul li a{ display: block; background:#15317E; /* màu nền của thư mục chính*/ color: white; /*màu text thư mục chính*/ padding: 8px 10px; border-right: 1px solid #778; color: #ccc; text-decoration: none; } * html .jqueryslidemenu ul li a{ display: inline-block; } /*.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{ color: #ff0066; //màu cchữ các menu }*/ .jqueryslidemenu ul li a:hover{ background:#2B60DE; /* màu hiệu ứng khi rê chuột vào các link*/ color: white; /*màu text khi rê chuột*/ } .jqueryslidemenu ul li ul{ position: absolute; left: 0; display: block; visibility: hidden; } .jqueryslidemenu ul li ul li{ display: list-item; float: none; } .jqueryslidemenu ul li ul li ul{ top: 0; } .jqueryslidemenu ul li ul li a{ font: normal 13px Verdana; width: 160px; padding: 5px; margin: 0; border-top-width: 0; border-bottom: 1px solid gray; } .jqueryslidemenuz ul li ul li a:hover{ background: #eff9ff; color: black; } .downarrowclass{ position: absolute; top: 12px; right: 7px; } .rightarrowclass{ position: absolute; top: 6px; right: 5px; }</style> <div id="myslidemenu" class="jqueryslidemenu"> <ul> <li><a href="http://dungheineken8.blogspot.com/">Home</a></li> <li><a href="http://dungheineken.blogspot.com/">Thủ thuật máy computer</a></li> <li><a href="http://anhdepblog.blogspot.com/">Thủ thuật Ảnh </a> <ul> <li><a href="#">Sub Item 1.1</a></li> <li><a href="#">Sub Item 1.2</a></li> <li><a href="#">Sub Item 1.3</a></li> <li><a href="#">Sub Item 1.4</a></li> </ul></li> <li><a href="http://phimvang.org/">Xem phim</a></li> <li><a href="#">Blogspot</a> <ul> <li><a href="#">Sub Item 2.1</a></li> <li><a href="#">Folder 2.1</a> <ul> <li><a href="#">Sub Item 2.1.1</a></li> <li><a href="#">Sub Item 2.1.2</a></li> <li><a href="#">Folder 3.1.1</a> <ul> <li><a href="#">Sub Item 3.1.1.1</a></li> <li><a href="#">Sub Item 3.1.1.2</a></li> <li><a href="#">Sub Item 3.1.1.3</a></li> <li><a href="#">Sub Item 3.1.1.4</a></li> <li><a href="#">Sub Item 3.1.1.5</a></li> </ul> </li> <li><a href="#">Sub Item 2.1.4</a></li> </ul> </li> </ul></li> <li><a href="http://www.nhaccuatui.com/">Nghe nhạc</a></li> <li><a href="http://anhdepblog.blogspot.com/">Hình ảnh</a> <ul> <li><a href="#">Sub Item 1.1</a></li> <li><a href="#">Sub Item 1.2</a></li> </ul></li> <li><a href="#">Download</a> <ul> <li><a href="#">Sub Item 2.1</a></li> <li><a href="#">Sub Item 2.2</a></li> </ul></li> </ul><br style="clear: left" /> </div> |
Bây giờ điều bạn cần làm là thay đổi các dữ liệu trong các dòng lệnh <a herf="#" (thay # bằng địa chỉ link liên kết), tên menu và thay đổi màu cho menu, màu chữ theo ý thích của bạn (có ghi chú ở code) cho phù hợp với Blog của mình. Cuối cùng bấm Lưu mẫu và trở lại Blog để "thưởng thức" thành quả. Lưu ý: Có một số giao diện blog sẽ không có lệnh </header>, do vậy bạn phải thêm tiện ích HTML/Javacript rồi dán code phần 2 vào và lưu lại là xong.
Nguồn: Trai đất mũi
bạn làm ơn ghé qua địa chỉ https://anhluongmedia.blogspot.com/ xem giúp mình cái menu với , mình đã áp dụng cách trên không sai chỗ nào cả nhưng kết quả thì ko thấy cái menu con đâu cả ... Cảm ơn bạn rất nhiều
ReplyDelete