Tạo me nu dọc cho blog

1. Blogger> Thiết kế
2. Chọn HTML / Javascript Widget. Chọn tiện ích này từ phần sidebar bên trong bố trí của bạn
3. Dán đoạn mã sau bên trong nó,

Do lấy từ trang tiếng Anh nên tôi để chữ nhỏ cho không sai code sẽ khó chỉnh
Đoạn mã này bạn cóp cho vào blog như nói ở đầu:

<script src='http://mybloggertricks.googlecode.com/files/dropdownddlevel.js' type='text/javascript'> </ script>
<style>
/ * # # # # # # # # # Sidebar Menu bởi www.MyBloggerTricks.com # # # # # # # # # * /
. Ddsubmenustyle, ddsubmenustyle div {/ * trên cùng và phụ DIVs, tương ứng * /
font: 13px bình thường Verdana;
margin: 0;
padding: 0;
vị trí: tuyệt đối;
bên trái: 0;
top: 0;
list-style-type: không có;
nền: trắng;
border: 1px solid màu đen;
cửa dưới chiều rộng: 0;
khả năng hiển thị: ẩn;
z-index: 100;
}
Ddsubmenustyle ul. {
margin: 0;
padding: 0;
vị trí: tuyệt đối;
bên trái: 0;
top: 0;
list-style-type: không có;
không có biên giới: 0px;
}
Ddsubmenustyle li. 1 {
màn hình hiển thị: block;
width: 170px; / * chiều rộng của menu (không bao gồm paddings phụ) * /
color: # 000000;
background-color: # FFFFE0;
text-decoration: none;
padding: 4px 5px;
biên giới-bottom: 1px đen;
}
* Html ddsubmenustyle li {/ * IE6 CSS Hack /
màn hình hiển thị: inline-block;
width: 170px; / chiều rộng của trình đơn (bao gồm paddings bên LI A / *
}
Ddsubmenustyle li a: hover {
background-color: # 000000;
color: # ffffff;
}
Downarrowpointer {/ * CSS cho hình ảnh "xuống" mũi tên được thêm vào các menu trên cùng * /
padding-left: 4px;
border: 0;
}
Rightarrowpointer {/ * CSS cho hình ảnh "" mũi tên thả xuống các mục menu * /
vị trí: tuyệt đối;
padding-top: 3px;
bên trái: 100px;
border: 0;
}
. Ddiframeshim {
vị trí: tuyệt đối;
z-index: 500;
background: transparent;
border-width: 0;
width: 0;
chiều cao: 0;
màn hình hiển thị: block;
}
/ * # # # # # # # # # Dọc menu # # # # # # # # # * /
. Markermenu {
width: 175px; / chiều rộng của trình đơn thanh bên * /
rõ ràng: bên trái;
vị trí: tương đối;
}
Markermenu ul. {
list-style-type: không có;
margin: 5px 0;
padding: 0;
border: 1px solid # 9A9A9A;
}
Markermenu ul li a {
không lặp lại trung tâm 3px;
font: đậm 13px "Lucida Grande", "Trebuchet MS" color: # 00014e;
màn hình hiển thị: block;
chiều rộng: tự động;
padding: 3px 0;
padding-left: 20px;
text-decoration: none;
biên giới-bottom: 1px solid # B5B5B5;
}
* Html markermenu ul li a {/ * IE6 Hack * /
width: 155px;
}
Markermenu ul li a: visited, markermenu ul li a: active {
color: # 00014e
}
Markermenu ul li a: hover, markermenu ul li a.selected {
color: # ffffff;
background-color: # 000000;
}
</ Style>
<div id="ddsidemenubar" class="markermenu">
<ul>
<li> <a href="#"> link1 </ a> </ li>
<li> <a href="#" rel="ddsubmenuside1"> link2 </ a> </ li>
<li> <a href="#" rel="ddsubmenuside2"> link3 </ a> </ li>
<li> <a href="#"> link4 </ a> </ li>
<li> <a href="#" rel="ddsubmenuside3"> LINK5 </ a> </ li>
</ Ul> </ Div>

<script type="text/javascript">
ddlevelsmenu.setup ("ddsidemenubar", "sidebar") / / ddlevelsmenu.setup ("mainmenuid", "topbar | sidebar")
</ Script>
<ul id=" ddsubmenuside1 "class="ddsubmenustyle blackwhite">
<li> <a href='#'> link2 ITEM 1 </ a> </ li>
<li> <a href='#'> link2 ITEM 2 </ a>
<ul>
<li> <a href='#'> link2 ITEM 2,1 </ a> </ li>
<li> <a href='#'> link2 ITEM 2,2 </ a> </ li>
</ Ul>
</ Li>
<li> <a href='#'> link2 ITEM 3 </ a>
<ul>
<li> <a href='#'> link2 ITEM 3,1 </ a> </ li>

</ Ul>
</ Li>

<li> <a href='#'> link2 ITEM 4 </ a> </ li>
</ Ul>
<ul id=" ddsubmenuside2 "class="ddsubmenustyle blackwhite">
<li> <a href='#'> link3 ITEM 1 </ a> </ li>
<li> <a href='#'> link3 ITEM 2 </ a> </ li>
<li> <a href='#'> link3 ITEM 3 </ a>
<ul>
<li> <a href='#'> link3 ITEM 3,1 </ a> </ li>
<li> <a href='#'> link3 ITEM 3,2 </ a> </ li>
<li> <a href='#'> link3 ITEM 3,3 </ a> </ li>
<li> <a href='#'> link3 ITEM 3,4 </ a> </ li>
</ Ul>
</ Li>
<li> <a href='#'> link3 ITEM 4 </ a> </ li>
<li> <a href='#'> link3 ITEM 5 </ a>
<ul>
<li> <a href='#'> link3 ITEM 5,1 </ a> </ li>
<li> <a href='#'> link3 ITEM 5,2 </ a>
<ul>
<li> <a href='#'> link3 ITEM 5,2 1 </ a> </ li>
<li> <a href='#'> link3 ITEM 5,2 2 </ a> </ li>
<li> <a href='#'> link3 ITEM 5,2 3 </ a> </ li>
</ Ul>
</ Li>
</ Ul>
</ Li>
<li> <a href='#'> link3 ITEM 6 </ a> </ li>
</ Ul>
<ul id=" ddsubmenuside3 "class="ddsubmenustyle blackwhite">
<li> <a href='#'> LINK5 ITEM 1 </ a> </ li>
<li> <a href='#'> LINK5 ITEM 2 </ a> </ li>
<li> <a href='#'> LINK5 ITEM 3 </ a> </ li>
<li> <a href='#'> LINK5 ITEM 4 </ a> </ li>
<li> <a href='#'> LINK5 ITEM 5 </ a> </ li>
</ Ul>


............................................................

• Thay thế các ký hiệu # ở khắp mọi nơi với các liên kết trang web tương ứng
• Thay thế các văn bản in đậm màu đen với tiêu đề trang
• Để tạo ra một slidemenu phụ bên trong một liên kết Menu chính chỉ cần thêm một thuộc tính rel như rel = "ddsubmenuside 1 Thay đổi thả xuống số slidemenu phù hợp.
• Bình thường HTML li và ul quy tắc áp dụng ở đây để tạo ra slidemenu phụ và các liên kết slidemenu tiểu phụ.
• Liên kết chính được đề cập đầu tiên và liên kết slidemenu phụ được đề cập riêng rẽ sau khi các chức năng cuộc gọi JavaScript.
• Để thay đổi màu nền của chỉnh sửa menu # F2F2F2
• Để thay đổi độ rộng, màu nền và màu chữ của slidemenu phụ chỉnh sửa tương ứng # FFFFE0, # 000000 và 170px
• Để thay đổi màu nền và màu chữ ở chuột di chuột chế độ chỉnh sửa # FFFFFF, # 000000

4. Lưu widget của bạn
5. Tất cả đã hoàn tất!

THỦ THUẬT 04:05