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):
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):
<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>
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;
}
Như vậy bạn đã có Menu sổ dọc xuống cho blog trông đẹp mắt hơn trước đó.
Chúc các bạn thành công!