Home Home » Thủ Thuật » Thủ Thuật Blogger » Cách tạo menu dropdown cho blog

Cách tạo menu dropdown cho blog

Thứ Năm, 23 tháng 4, 2015


Cách tạo menu dropdown như trên blog của mình
  
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> ( Click chuột vào dòng bất kỳ trong đoạn code và nhấn Ctrl+F ) 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: #999999;
width: 770px;
color: #FFF;
margin: 0px;
padding: 0;
position: relative;
border-top:0px solid #666666;
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: #666666;
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: 155px;
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: #666666;
width: 130px;
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;
}

Chú ý: 
+ Các con số được tô màu xanh ở đoạn mã trên là độ rộng của thanh menu. 
+ Các con số được tô màu đỏ ở đoạn mã trên là màu của thanh menu và chữ trên thanh menu.
Các bạn có thể thay đổi cho phù hợp với blog.  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" chọn và thêm "HTML/JavaScript" 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.
 
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" là xong. 

 
Nguồn: St
Chia sẻ bài viết
Bài liên quan

Comments[ 0 ]


Đăng nhận xét

Xuống cuối trang