October 18, 2014

HƯỚNG DẪN TẠO MENU DROPDOWN CHO BLOG - KIỂU 2

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>  . (Xem cách tìm nhanh các thẻ TẠI ĐÂY).
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: #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;
}

HTML +Java
    <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>


Chú ý: Con số (960) được tô màu đỏ, nằm trong nền xanh ở đoạn mã trên là độ rộng của thanh menu. Các bạn có thể thay đổi cho phù hợp với blog. 
Sau khi dán mã, tìm ở 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!" 
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" [1]  (ngay dưới tiêu đề blog - xem ảnh trên), chọn và thêm "HTML/JavaScript[2] 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>
                     
nguồn : caocongkien


No comments:

Post a Comment