Cách tạo Menu ngang sổ dọc cho Blogspot

Trong tiện ích trước, mình đã hướng dẫn các bạn cách tạo 1 thanh Menu nằm ngang đơn giản cho Blogspot . Hôm nay, mình sẽ tiếp tục hướng dẫn các bạn tạo 1 thanh Menu ngang cao cấp hơn 1 chút, có khả năng sổ dọc xuống 1 cấp cho Blog nhằm giúp bạn có thể bố trí nhiều hơn các đường link đến nơi cần thiết.

Các bước tiến hành:

1. Đăng nhập Blogspot

2. Vào Thiết kế => Mẫu => Chỉnh sửa HTML

3. Thêm đoạn Code dưới đây vào trước thẻ ]]></b:skin>

ul.topnav {
list-style: none;
padding: 0 20px;
margin: 0;
width: 100%;
float: left;
background: #222;
font-size: 1.2em;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAF38xMXu4Puhsbb-TXYxFZC91lQ8XXlp9Rt6ZINl2-MKsWXmz2kAGDbGzfVUztcg1nGtJBPZ61MNnBVPjjNE9T6KYJBoYVe4LkfVVP-DEjmsfB4XttNdOJ5sgLavfSrjRcNgRtiRolso/w1-h35-no/topnav_bg.gif) repeat-x;
z-index:100}
ul.topnav li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative; /*--Declare X and Y axis base--*/
z-index:100}
ul.topnav li a{
padding: 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.topnav li a:hover{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw8h3nGIKNvkEvJqyewsq9wia7Xyr-TogcAJUYBR9luWcZhxNbpyPoUNMheRrKbSDH9aRTr9m2o9AvAuUjq8e0Fy_MR9hc6nl7dt5J-O8vUjgUGnEp7RqICnyMu-s_h0uLRlzM6elhyUo/w46-h16-no/topnav_hover.gif) no-repeat center top;
z-index:100}
ul.topnav li span { /*--Drop down trigger styles--*/
width: 17px;
height: 35px;
float: left;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-uzb6eeKUossHoRTDkh5VndxX_UIo8ysl7zBduase-ZM7CmX6CfBoH0kMghqiTtWYyuIwuFQdPm3os9tG_nEidQ5L_6geHq83kphcF9n0zY7sqwN17kToVueFPt7SnxQq9MgDlT2f-Ds/w13-h70-no/subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
list-style: none;
position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border: 1px solid #111;
}
ul.topnav li ul.subnav li{
margin: 0; padding: 0;
border-top: 1px solid #252525; /*--Create bevel effect--*/
border-bottom: 1px solid #444; /*--Create bevel effect--*/
clear: both;
width: 170px;
}
html ul.topnav li ul.subnav li a {
float: left;
width: 145px;
background: #333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJZdMvD9yzFU5mmtIYpYFgAf8ULkdc7HpBh1tdVz9HYjW4pfn5hzkbIF7aSH-XOnIZoHWIMcqm82y8BPqumDnn4AsS54-L8IFeHbuZKc3SRs2-H5qSB4SD-pUPEmuYtYH6PdAxEzdgBlo/w7-h9-no/dropdown_linkbg.gif) no-repeat 10px center;
padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
background: #222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJZdMvD9yzFU5mmtIYpYFgAf8ULkdc7HpBh1tdVz9HYjW4pfn5hzkbIF7aSH-XOnIZoHWIMcqm82y8BPqumDnn4AsS54-L8IFeHbuZKc3SRs2-H5qSB4SD-pUPEmuYtYH6PdAxEzdgBlo/w7-h9-no/dropdown_linkbg.gif) no-repeat 10px center;
}
#header img {
margin: 20px 0 10px;
}

4. Tiếp tục thêm đoạn Code sau vào trước thẻ </head>

<script src='https://bongnguoilangle.googlecode.com/files/jquery.min-1.8.2.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

$(&quot;ul.subnav&quot;).parent().append(&quot;<span/>&quot;); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav

$(&quot;ul.topnav li span&quot;).click(function() { //When trigger is clicked...

//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find(&quot;ul.subnav&quot;).slideDown(&#39;fast&#39;).show(); //Drop down the subnav on click

$(this).parent().hover(function() {
}, function(){
$(this).parent().find(&quot;ul.subnav&quot;).slideUp(&#39;slow&#39;); //When the mouse hovers out of the subnav, move it back up
});

//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass(&quot;subhover&quot;); //On hover over, add class &quot;subhover&quot;
}, function(){ //On Hover Out
$(this).removeClass(&quot;subhover&quot;); //On hover out, remove class &quot;subhover&quot;
});

});
</script>

***Lưu ý: nếu blog của bạn đã từng sử dụng JQuery thì hãy bỏ đoạn code được tô nền hồng phía trên đi.

5. Lưu mẫu .

6. Vào Thiết kế => Bố cục => Thêm tiện ích => HTML/Javascript. Tạo 1 tiện ích HTML/Javascript ở phía dưới phần tiêu đề blog rồi Copy đoạn Code sau và Paste vào phần nội dung của tiện ích

<ul class='topnav'>
<li><a href='/'>Homepage</a></li>
<li>
<a href='#'>Menu 1</a>
<ul class='subnav'>
  <li><a href='#'>Menu con 1.1</a></li>
  <li><a href='#'>Menu con 1.2</a></li>
  <li><a href='#'>Menu con 1.3</a></li>
  <li><a href='#'>Menu con 1.4</a></li>
  <li><a href='#'>Menu con 1.5</a></li>
</ul>
</li>
<li>
<a href='#'>Menu 2</a>
<ul class='subnav'>
  <li><a href='#'>Menu con 2.1</a></li>
  <li><a href='#'>Menu con 2.2</a></li>
  <li><a href='#'>Menu con 2.3</a></li>
  <li><a href='#'>Menu con 2.4</a></li>
  <li><a href='#'>Menu con 2.5</a></li>
  <li><a href='#'>Menu con 2.6</a></li>
</ul>
</li>
<li><a href='#'>Menu 3</a></li>
<li><a href='#'>Menu 4</a></li>
<li><a href='#'>Menu 5</a></li>
<li><a href='#'>Menu 6</a></li>
</ul>

Trong đó:

Thay dấu # (màu hồng)bằng liên kết tới nhãn, bài viết thuộc các thẻ Menu chính.
Thay dấu # (màu cam) thành liên kết tới nhãn bài viết thuộc các thẻ Menu con.
Thay chữ Homepage (màu đỏ) thành tên trang chủ hoặc tên bạn thích đặt cho thanh Menu.
Thay chữ màu Menu 1/2/3... (màu xanh nước biển) thành tên bài viết, nhãn thuộc Menu chính.
Thay chữ Menu con 1.1/1.2/1.3/... (màu xanh lá) thành tên bài viết nhãn thuộc Menu con.

7. Quan sát cấu trúc lệnh để bổ sung đầy đủ các nội dung Menu mà bạn mong muốn. Với mỗi thẻ Menu tương ứng với 1 đường link (dấu #) và tên gọi (Menu 1/2..., Menu con 1.1/1.2/...)

8. Lưu tiện ích và xem kết quả.

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