Đầu tiên, bạn chèn đoạn code bên dưới sau ngay thẻ <body> hoặc trước thẻ <div id='outer-wrapper'>.
<b:section id='menu' maxwidgets='1' showaddelement='no'>
<b:widget id='HTML91' locked='false' title='Menu' type='HTML'/>
</b:section>
Tiếp theo bạn chèn code màu xanh bên dưới vào phía trên thẻ </b:skin> trong phần "Chỉnh sửa HTML" có check vào "Mở rộng Mẫu tiện ích".
#menu h2 {display:none}
.menu,.menu h3,.menu a,.menu ul,.menu li {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
:focus { outline: 0 }
.menu ul,.menu li {
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
line-height:21px;
text-align:left; }
.menu h3 {
font-family:Arial, Helvetica, sans-serif;
font-weight:600;
font-size:14px;
line-height:21px;
margin-top:7px;
margin-bottom:14px;
padding-bottom:7px;
text-shadow: 1px 1px 1px #FFFFFF;
border-bottom:1px solid #888888; }
.menu {
list-style:none;
width:900px;
margin:30px auto 0px auto;
height:43px;
padding:0px 20px 0px 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background: #830701;
border: 1px solid #a40802;
border-top: 1px solid #fd190f;
background: -moz-linear-gradient(top, #d70b02, #830701);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d70b02), to(#830701)); }
.menu li {
float:left;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:30px;
margin-top:7px;
border:none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px; }
.menu li:hover {
z-index:2;
background:#F4F4F4;
border:1px solid #aaaaaa;
padding: 4px 9px 4px 9px;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
-khtml-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px; }
.menu li.no_drop:hover {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px; }
.menu li a {
color: #FFFFFF;
outline:0;
text-decoration:none;
display:block;
text-shadow: 1px 1px 1px #000; }
.menu li:hover a { color:#161616; text-shadow: none; }
.menu li .drop {
padding-right:21px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3tF7QLoFxOdZtQ1kp6DKTDbmWLYnqo9bVvQ4V6aokpvAM-qmEAKSWhI2T-m9hjrjnNxPlgX0Uy6eCbCEE-IfRNqDUxx6Llxh4VoXdYnHExCvKGyCxL4AMtFOUoXflso5VFS4iROzPfpg/) no-repeat right 8px; }
.menu li:hover .drop {
padding-right:21px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3tF7QLoFxOdZtQ1kp6DKTDbmWLYnqo9bVvQ4V6aokpvAM-qmEAKSWhI2T-m9hjrjnNxPlgX0Uy6eCbCEE-IfRNqDUxx6Llxh4VoXdYnHExCvKGyCxL4AMtFOUoXflso5VFS4iROzPfpg/) no-repeat right 7px; }
.menu li:hover div a { color:#a40802; }
.menu li:hover div a:hover { color:#fd190f; }
.menu li ul li a:hover { color:#fd190f; }
.dropdown_1column,.dropdown_2columns {
margin:4px auto;
position:absolute;
background:#F4F4F4;
border:1px solid #aaaaaa;
border-top:none;
padding:10px 5px 10px 5px;
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB)); }
.dropdown_1column,.dropdown_2columns {
left:-999em;
text-align:left;
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
-khtml-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px; }
.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.menu li:hover .dropdown_1column,.menu li:hover .dropdown_2columns{left:-1px;top:auto}
.col_1,.col_2 {
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px; }
.col_1 {width:130px;}
.col_2 {width:270px;}
.menu li ul { list-style:none; padding:0; margin:0 0 12px 0; }
.menu li ul li {
font-size:12px;
line-height:24px;
position:relative;
text-shadow: 1px 1px 1px #ffffff;
padding:0;
margin:0;
float:none;
text-align:left;
width:130px; }
.menu li ul li:hover {background:none; border:none; padding:0; margin:0; }Đoạn mã trên sẽ tạo một tiện ích Javascript/HTML mới trên blog của bạn, hãy quay lại "Phần tử trang" rồi tiếp tục chèn vào tiện ích này :
<ul class="menu">
< li class="no_drop"><a href="#">Home</a></li>
< li><a href="#" class="drop">1 Column</a>
< div class="dropdown_1column">
< div class="col_1">
< ul>
< li><a href="#">FreelanceSwitch</a></li>
< li><a href="#">Creattica</a></li>
< li><a href="#">WorkAwesome</a></li>
< li><a href="#">Mac Apps</a></li>
< li><a href="#">Web Apps</a></li>
< li><a href="#">NetTuts</a></li>
< li><a href="#">Design</a></li>
< li><a href="#">Logo</a></li>
< li><a href="#">Flash</a></li>
< li><a href="#">Illustration</a></li>
< li><a href="#">More...</a></li>
< /ul>
< /div></div></li>
< li><a href="#" class="drop">2 columns</a>
< div class="dropdown_2columns">
< div class="col_1">
< h3>Some Links</h3>
< ul>
< li><a href="#">ThemeForest</a></li>
< li><a href="#">GraphicRiver</a></li>
< li><a href="#">ActiveDen</a></li>
< /ul>
< /div>
< div class="col_1">
< h3>Useful Links</h3>
< ul>
< li><a href="#">NetTuts</a></li>
< li><a href="#">VectorTuts</a></li>
< li><a href="#">PsdTuts</a></li>
< /ul>
< /div>
< div class="col_1">
< h3>Other Stuff</h3>
< ul>
< li><a href="#">FreelanceSwitch</a></li>
< li><a href="#">Creattica</a></li>
< li><a href="#">WorkAwesome</a></li>
< /ul>
< /div>
< div class="col_1">
< h3>Misc</h3>
< ul>
< li><a href="#">Design</a></li>
< li><a href="#">Logo</a></li>
< li><a href="#">Flash</a></li>
< /ul>
< /div></div></li></ul>
Muốn chỉnh sửa lại màu cho menu thì ta vào đoạn code mà ta vừa chèn vào phía trên thẻ trong phần "Chỉnh sửa HTML" :
.menu {
list-style:none;
width:900px;
margin:30px auto 0px auto;
height:43px;
padding:0px 20px 0px 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background: #830701; (Màu nền của menu)
border: 1px solid #a40802; (Màu của đường viền phía dưới menu)
border-top: 1px solid #fd190f; (Màu của đường viền phía trên menu)
background: -moz-linear-gradient(top, #d70b02, #830701);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d70b02), to(#830701)); }Bạn thay màu from(#d70b02), to(#830701)thành các màu mà bạn thích.
Bài viết được lấy từ http://www.thuvien.khunglong.info. Tuy nhiên, do bài viết bên trang của thuvien.khunglong hơi khó hiểu nên mình đã viết lại hoàn chỉnh và dễ hiểu và dễ thực hiện hơn nhiều.
0 nhận xét:
Post a Comment
Kể từ ngày hôm nay, những ai không có trách nhiệm thì không được vào chỉnh sửa blog hay gởi nội dung linh tinh. Chỉ những người nào có trách nhiệm, đã đăng ký, hay là thành viên của blog mới làm được chuyện này thôi. Sở dĩ, mình làm điều này vì tránh spam vào blog của mình, vì mình khó khăn lắm mới làm được blog này. Mong các bạn thông cảm. Xin cám ơn.