Tiện ích menu sổ dọc xuống cho blog - Drop Down menu in Blogger

Một menu trình đơn sổ dọc xuống là rất cần thiết cho phần Header trên blogger,  khi blog bạn có quá nhiều nội dung đích trên blog,  mỗi khi tìm kiếm chúng rất phức tạp và mất thời giời, để sắp xếp chúng có "tổ chức" và đẹp các bạn làm theo hướng dẫn sau:

Bước 1: Đăng nhập Blog  > Thiết kế (Design) > Phần tử trang (Page Elements).

Bước 2: Chọn một Widget (nhúng HTML / JavaScript) để dưới phần tiêu đề và dán đoạn mã sau vào Widget vừa mới tạo xong (có thể Lưu lại để tùy chỉnh sau cũng được):

<div id='mbtnavbar'> <ul id='mbtnav'> <li> <a href='#'>Home</a> </li> <li> <a href='#'>About</a> </li> <li> <a href='#'>Contact</a> </li> <li> <a href='#'>Sitemap</a> <ul> <li><a href='#'>Sub Page #1</a></li> <li><a href='#'>Sub Page #2</a></li> <li><a href='#'>Sub Page #3</a></li> </ul> </li> </ul> </div>

Trong đó: Thay thế # là link kiên kết đích trong trang của bạn và Home, About...là tên hiện thị của trang đích liên quan và địa chỉ các menu con sổ xuống Sub Page # 1, #2, #3. Bên cạnh đó bạn cũng có thể sao chép và dán các thành phần menu chính và menu con thành nhiều menu mới khác tương tự như đoạn code đã có. Sau đó Lưu lại để đó.

Bước 3: Vào thiết kế (Design) > Chỉnh sửa HTML (Edit HTML). (Không Mở rộng Mẫu Tiện ích). Nhấn Ctrl + F tìm đoạn mã  ]]></b:skin> và dán đoán code bên dưới vào bên trên ]]></b:skin>

/*----- MBT Drop Down Menu ----*/ #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; }

Trong đó: Các mã số Hex, Color màu sắc, kích thước Height, Width... của menu các bạn có thể tùy chỉnh lại cho phù hợp với blog bạn hơn, nếu không để nguyên cũng được miễn là thấy đẹp.Sau đó Xem trước hoặc Lưu lại và xem thành quả. Như vậy bạn đã có Menu sổ dọc xuống cho blog trông đẹp mắt hơn trước đó.

Sưu tầm và biên soạn.

Please share it! :(