Menu CSS3 bar đẹp đa tầng với icon riêng cho Web, Blogspot

Friday, April 12, 2013

Menu sử dụng CSS3 luôn tạo cho chúng ta độ bóng bo rất đẹp, làm thế nào để thêm menu CSS3 bar cho blogger? Code menu CSS3 ngang cho Website, blog.

Thủ thuật hôm nay mình chia sẻ tới các bạn dùng cho Web và blogspot. 1 dạng menu rất thích hợp với Website, blog có nội dung nhiều chuyên mục con.

DEMO

Hướng dẫn cách thêm menu này trên Blogspot

1. Vào bảng điều khiển Blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)

2. Tìm tới thẻ > ]]> và dán code dưới đây ngay trên nó:


/* icons Css3 menu bar www.itviet360.com*/

ul#navbt {
display:block;
float:left;
font-family:Trebuchet MS,sans-serif;
font-size:0;
padding:5px 5px 5px 0;

background: -moz-linear-gradient(#f5f5f5, #c4c4c4); /* FF 3.6+ */  
background: -ms-linear-gradient(#f5f5f5, #c4c4c4); /* IE10 */  
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #c4c4c4)); /* Safari 4+, Chrome 2+ */  
background: -webkit-linear-gradient(#f5f5f5, #c4c4c4); /* Safari 5.1+, Chrome 10+ */  
background: -o-linear-gradient(#f5f5f5, #c4c4c4); /* Opera 11.10 */  
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#c4c4c4'); /* IE6 & IE7 */  
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#c4c4c4')"; /* IE8+ */  
background: linear-gradient(#f5f5f5, #c4c4c4); /* the standard */ 
}
ul#navbt,ul#navbt ul {
list-style:none;
margin:0;
}
ul#navbt,ul#navbt .subs {
background-color:#444;
border:1px solid #454545;

border-radius:9px;
-moz-border-radius:9px;
-webkit-border-radius:9px;
}
ul#navbt .subs {
background-color:#fff;
border:2px solid #222;
display:none;
float:left;
left:0;
padding:0 6px 6px;
position:absolute;
top:100%;
width:300px;

border-radius:7px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
}
ul#navbt li:hover>* {
display:block;
}
ul#navbt li:hover {
position:relative;
}
ul#navbt ul .subs {
left:100%;
position:absolute;
top:0;
}
ul#navbt ul {
padding:0 5px 5px;
}
ul#navbt .col {
float:left;
width:50%;
}
ul#navbt li {
display:block;
float:left;
font-size:0;
white-space:nowrap;
}
ul#navbt>li,ul#navbt li {
margin:0 0 0 5px;
}
ul#navbt ul>li {
margin:5px 0 0;
}
ul#navbt a:active,ul#navbt a:focus {
outline-style:none;
}
ul#navbt a {
border-style:none;
border-width:0;
color:#181818;
cursor:pointer;
display:block;
font-size:13px;
font-weight:bold;
padding:8px 18px;
text-align:left;
text-decoration:none;
text-shadow:#fff 0 1px 1px;
vertical-align:middle;
}
ul#navbt ul li {
float:none;
margin:6px 0 0;
}
ul#navbt ul a {
background-color:#fff;
border-color:#efefef;
border-style:solid;
border-width:0 0 1px;
color:#000;
font-size:11px;
padding:4px;
text-align:left;
text-decoration:none;
text-shadow:#fff 0 0 0;

border-radius:0;
-moz-border-radius:0;
-webkit-border-radius:0;
}
ul#navbt li:hover>a {
border-style:none;
color:#fff;
font-size:13px;
font-weight:bold;
text-decoration:none;
text-shadow:#181818 0 1px 1px;
}
ul#navbt img {
border:none;
margin-right:8px;
vertical-align:middle;
}
ul#navbt span {
background-position:right center;
background-repeat:no-repeat;
display:block;
overflow:visible;
padding-right:0;
}
ul#navbt ul span {
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzeP7lb1O2NJAl5p3iU79F-WmZjK7bvjuXt15iHkm7Y6YzN-NgjgMvbLnvosNnYIFGtUdWtj_9cIjbazlADVg1RGbTAUt6uEVuEQu6rfo27oG3SFru33I3srvSoEdOOK_ppzKZGufhkRA/s1600/bloggetrix-arrow.png");
padding-right:20px;
}
ul#navbt ul li:hover>a {
border-color:#444;
border-style:solid;
color:#444;
font-size:11px;
text-decoration:none;
text-shadow:#fff 0 0 0;
}
ul#navbt > li >a {
background-color:transpa;
height:25px;
line-height:25px;

border-radius:11px;
-moz-border-radius:11px;
-webkit-border-radius:11px;
}
ul#navbt > li:hover > a {
background-color:#313638;
line-height:25px;
}

Lưu mẫu lại.
3. Vào bố cục (Layout) -> Thêm tiện ích (Add a widget) -> HTML/Javascript
4. Dán đoạn code dưới đây vào tiện ích vừa thêm: