Tạo menu ngang xổ dọc nhiều cấp cho blogspot bằng tiện ích HTML/Javascript ( Mẫu 1 )

 humghn.com 

Thiết kế blog/web theo xu hướng đặt thanh menu ngang phía trên , sau đó khi rê chuột qua có xổ dọc đã là một thiết kế kinh điển và khá là quen thuộc với nhiều webmaster . Trong bài viết lần này , chuyên mục sẽ hướng dẫn các bạn cách tạo menu xổ dọc nhiều cấp như vậy cho blogspot . 

Với cùng một mẫu menu ngang xổ dọc nhiều cấp như vậy ,trong nhiều trang mạng thường hay hướng dẫn làm bằng cách tạo các file script , nếu các bạn làm như vậy thì tốc độ load website/blog của bạn sẽ rất chậm , gây khó chịu cho người đọc và ảnh hưởng tới SEO . Nhưng với cách sử dụng mã CSS dưới đây , các bạn hoàn toàn yên tâm về tốc độ load của web cũng như là tối ưu về SEO. Và với cách làm này ,đảm bảo rằng , sau khi thực hiện , site/blog của bạn sẽ trở nên khoa học và chuyên nghiệp hơn rất nhiều . 

Để thực hiện một cách hoàn mỹ nhất thủ thuật này thì trước hết ,các bạn cần xác định xem nên đặt thanh menu ngang đang tạo ở đâu . Và thông thường , đó là vị trí của đầu web/blog , tại vị trí " header " . 

DEMO

• Home
• Archive
• About
• Tool »
  • Item #1
  • Item #2 »
    • Sub Item #1
    • Sub Item #2
    • Sub Item #3
  • Item #3
• Blogging »
  • Item #1
  • Item #2
  • Item #3

Cách thực hiện 

Bước 1 : Đăng nhập blogspot , vào mục " Bố cục " - Tạo tiện ích HTML/JavaScript

Bước 2 : Đặt thanh HTML/JavaScript vào vị trí mong muốn

Bước 3 : Đặt toàn bộ đoạn mã sau vào thẻ HTML/JavaScript vừa tạo

<style>#ozgmenubar { 


    background: #8B2C00;/*Màu của thanh menu*/ 


    width: 960px; 


    color: #FFF;


margin: 0px; 
padding: 0; 


ative; 

height:40px;
position: re
l
}
#ozgnav { 
    margin: 0; 


{ 

float: le
padding: 0; 
} 
#ozgnav ul
 ft; 
    list-style: none; 
    margin: 0; 


tyle: none; 
padding: 0; 
} 

#ozgnav li { 
    list-
s margin: 0; 
    padding: 0; 
} 


ozgnav li a:visited { 

color: #FFF; 

display: bl
#ozgnav li a, #ozgnav li a:link, 
#ock; 
    font: normal 14px verdana,geneva,arial,helvetica,sans-serif;    


; 

border-r
margin: 0; 
    padding: 12px 12px 10px 12px; 
    text-decoration: non
eight:1px solid #611F00; 
} 
#ozgnav li a:hover, #ozgnav li a:active { 


#3C3C3C;/*Màu khi rê chuột qua*/
background:
 


color: #FFF; 


display: block; 


text-decoration: none; 
margin: 0; 


x 12px 10px 12px; 

}

#ozgnav li { 
padding: 12
p
    float: left; 
    padding: 0; 
} 


position: absol
#ozgnav li ul { 
     z-index: 200;
   
 ute;
     display:none;
     height: auto;


ing: 0;

filte
width: 170px;
     margin: 0;
     pad
dr:alpha(opacity=95);
     opacity:0.95;
} 
#ozgnav li ul a { 


165px; 

} 

#ozgna
width: 150px; 
} 
#ozgnav li ul ul { 
    margin: -38px 0 


0v li:hover ul ul, #ozgnav li:hover ul ul ul, #ozgnav li.sfhover ul ul, #ozgnav li.sfhover ul ul ul { 
display:none;
} 


#ozgnav li li:hover ul, #ozgnav li li li:hover ul, #ozgnav li.sfhover ul, #ozgnav li li.sfhover ul, #ozgnav li li li.sfhover ul { 

display:block;
#ozgnav li:hover ul
,} 
#ozgnav li:hover, #ozgnav li.sfhover { 
    position: static; 
}
#ozgnav li li a, #ozgnav li li a:link, #ozgnav li li a:visited { 
width: 150px;


#3C3C3C;/*Màu của menu phụ*/
background:
 
    color: #fff; 


margin: 0; 
display: block
;  padding: 10px 5px 10px 10px; 


eight: auto;

text-align
text-decoration: none; 
    
h: left;
    border-top: 1px solid #666;


gnav li li a:hover, #ozgnavli li a
border-bottom: 1px solid #111;
} 
#o
z:active { 
width: 150px;


#13DF27;/*Màu của menu phụ khi rê chuột qua*/
background:
 


color: #000; 


display: block;     
margin: 0; 


x 5px 10px 10px; 

text-decora
padding: 10
ption: none; 
    height: auto;


div id='ozgmenubar'>
text-align: left;
}</style>

< 
      <ul id='ozgnav'> 


e</a></li> 
<li><a href='#'>Ho
m


       <li><a href='#'>Archive</a></li> 



<li><a href='#'>About</a></li> 
<li><a href='#'>Tool &#187;</a>


<li><a href='#'>
<ul> 
              
 Item #1</a></li> 


><a href='#'>Item #2  &#187;</a>
<l
i   <ul> 


<li><a href='#'>Sub Item #1</a></li> 
<li><a href='#'>Sub Item #2</a></li> 


></li> 

</ul> 

</li> 
<li><a href='#'>Sub Item #3</
a        <li><a href='#'>Item #3</a></li> 
          </ul> 
        </li>


<li><a href='#'>Item #1</a></li> 
<li><a href='#'>Blogging  &#187;</a>
             <ul> 
         
             <li><a href='#'>Item #2</a></li> 
                <li><a href='#'>Item #3</a></li> 
             </ul> 


</li>
       
      </ul> 


</div>

Bước 4 : Nhấp lưu và kiểm tra kết quả

Chú ý : Các mã được bôi xanh bạn có thể tùy biến màu sắc theo ý muốn bằng cách đổi lại bằng các màu theo bảng mã màu HTML tại đây .

+ Nếu bạn muốn thêm một menu chính , bạn chỉ việc copy đoạn mã dưới đây vào sau </li>

<li><a href='#'>Archive</a></li>

+ Nếu bạn muốn thêm một menu phụ vào trong menu chính , bạn copy đoạn mã dưới đây vào trước </li> của thẻ menu chính tương ứng 

<ul> 


                <li><a href='#'>Item #1</a></li> 
                <li><a href='#'>Item #2</a></li> 


</ul> 


<li><a href='#'>Item #3</a></li> 

Chúc các bạn thành công !