Để có thể dễ dàng truy cập và tìm thấy thông tin về bài viết trên blog của bạn thì phổ biến nhất là tạo 1 menu truy cập cho blog.
Ở đây mình sẽ giới thiệu menu nằm ngang và có liên kết với các menu con khác, và hiển thị của các menu con này là sổ dọc xuống theo từng menu chính.
Kết quả nhận được:
Các bước thực hiện:
1. Đăng nhập blog
2. Vào Mẫu > Chỉnh sửa HTML
3. Nhấn Ctrl + F và tìm "]]></b:skin>"
Chèn đoạn mã sau vào ngay phía trên vị trí tìm được:
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
margin: 0;
padding: 0;
position: relative;
}
#cssmenu {
line-height: 1;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
background: #141414;
background: -moz-linear-gradient(top, #333333 0%, #141414 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #141414));
background: -webkit-linear-gradient(top, #333333 0%, #141414 100%);
background: -o-linear-gradient(top, #333333 0%, #141414 100%);
background: -ms-linear-gradient(top, #333333 0%, #141414 100%);
background: linear-gradient(to bottom, #333333 0%, #141414 100%);
border-bottom: 2px solid #0fa1e0;
width: auto;
}
#cssmenu:after,
#cssmenu ul:after {
content: '';
display: block;
clear: both;
}
#cssmenu a {
background: #141414;
background: -moz-linear-gradient(top, #333333 0%, #141414 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #141414));
background: -webkit-linear-gradient(top, #333333 0%, #141414 100%);
background: -o-linear-gradient(top, #333333 0%, #141414 100%);
background: -ms-linear-gradient(top, #333333 0%, #141414 100%);
background: linear-gradient(to bottom, #333333 0%, #141414 100%);
color: #ffffff;
display: block;
font-family: Helvetica, Arial, Verdana, sans-serif;
padding: 19px 40px;
text-decoration: none;
}
#cssmenu ul {
list-style: none;
}
#cssmenu > ul > li {
display: inline-block;
float: left;
margin: 0;
}
#cssmenu.align-center {
text-align: center;
}
#cssmenu.align-center > ul > li {
float: none;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu.align-right > ul {
float: right;
}
#cssmenu.align-right ul ul {
text-align: right;
}
#cssmenu > ul > li > a {
color: #ffffff;
font-size: 12px;
}
#cssmenu > ul > li:hover:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #0fa1e0;
margin-left: -10px;
}
#cssmenu > ul > li:first-child > a {
border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
}
#cssmenu.align-right > ul > li:first-child > a,
#cssmenu.align-center > ul > li:first-child > a {
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
#cssmenu.align-right > ul > li:last-child > a {
border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
}
#cssmenu > ul > li.active > a,
#cssmenu > ul > li:hover > a {
color: #ffffff;
box-shadow: inset 0 0 3px #000000;
-moz-box-shadow: inset 0 0 3px #000000;
-webkit-box-shadow: inset 0 0 3px #000000;
background: #070707;
background: -moz-linear-gradient(top, #262626 0%, #070707 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #262626), color-stop(100%, #070707));
background: -webkit-linear-gradient(top, #262626 0%, #070707 100%);
background: -o-linear-gradient(top, #262626 0%, #070707 100%);
background: -ms-linear-gradient(top, #262626 0%, #070707 100%);
background: linear-gradient(to bottom, #262626 0%, #070707 100%);
}
#cssmenu .has-sub {
z-index: 1;
}
#cssmenu .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub ul {
display: none;
position: absolute;
width: 200px;
top: 100%;
left: 0;
}
#cssmenu.align-right .has-sub ul {
left: auto;
right: 0;
}
#cssmenu .has-sub ul li {
*margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
background: #0fa1e0;
border-bottom: 1px dotted #31b7f1;
font-size: 12px;
filter: none;
display: block;
line-height: 120%;
padding: 10px;
color: #ffffff;
}
#cssmenu .has-sub ul li:hover a {
background: #0c7fb0;
}
#cssmenu ul ul li:hover > a {
color: #ffffff;
}
#cssmenu .has-sub .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub .has-sub ul {
display: none;
position: absolute;
left: 100%;
top: 0;
}
#cssmenu.align-right .has-sub .has-sub ul,
#cssmenu.align-right ul ul ul {
left: auto;
right: 100%;
}
#cssmenu .has-sub .has-sub ul li a {
background: #0c7fb0;
border-bottom: 1px dotted #31b7f1;
}
#cssmenu .has-sub .has-sub ul li a:hover {
background: #0a6d98;
}
#cssmenu ul ul li.last > a,
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul ul li.last > a,
#cssmenu ul ul ul li:last-child > a,
#cssmenu .has-sub ul li:last-child > a,
#cssmenu .has-sub ul li.last > a {
border-bottom: 0;
}
4. Nhấn Ctrl + F và tìm dòng "class='header' id='header'"
Xóa maxwidgets='1'
Sửa showaddelement='no' thành showaddelement='yes'
5. Save template lại.
6. Quay trở lại Bố cục, nhấn vào Thêm Tiện ích ở vị trí bạn muốn đặt Menu, tạo 1 cái widget HTML/Javascript, sau đó dán đoạn code bên dưới vào
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li class='has-sub'><a href='#'><span>Products</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Product 1</span></a>
<ul>
<li><a href='#'><span>Sub Item</span></a></li>
<li class='last'><a href='#'><span>Sub Item</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Product 2</span></a>
<ul>
<li><a href='#'><span>Sub Item</span></a></li>
<li class='last'><a href='#'><span>Sub Item</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
Chỉnh sửa các từ màu đỏ (tên Menu), xanh (liên kết của Menu đó) cho phù hợp với Blog của bạn
Xong rồi, Xem blog và tận hưởng thành quả của bạn thôi!
