 |
| Menu CSS3 ngang đẹp: phong cách tối sang trọng cho Web, blog |
Menu khá đẹp và sang trọng. Các bạn có thể xem Demo tại đây
itviet360 chia sẻ code và hướng dẫn thủ thuật này trên blogger
1. Code
1.A Code CSS
/* The CSS Code for the menu starts here bloggertrix.com */
#navigation1 { width:900px;height: 45px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzf1BBvDu0PoNoGe94jmUOz5ln7LN2cAB9D4lxsVYt6-UxoMTwBwTkWBGaTvM5AZMF80n33QV90w_WVNxdywiUIVt95pruJxL8UIgR2b2wn9wePYV1GMuA29s3xMCdx1K6BXdTN1-LtD8/s1600/nav-bg.gif) repeat-x 0 0;
border:inherit 2px #000000;
-moz-border-radius-topleft: 10px;-moz-border-radius-topright:10px;-moz-border-radius-bottomleft:10px;-moz-border-radius-bottomright:10px;-webkit-border-top-left-radius:10px;-webkit-border-top-right-radius:10px;-webkit-border-bottom-left-radius:10px;-webkit-border-bottom-right-radius:10px;
border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-left-radius:10px;border-bottom-right-radius:10px; }
#navigation1 ul { list-style: none outside; padding: 8px 0 0 8px; }
#navigation1 li { float: left; display: inline; height: 29px; line-height: 29px; text-transform: uppercase; margin-right: 3px }
#navigation1 li.last { margin-right: 0; }
#navigation1 li a,
#navigation1 li a span { float: left; display: inline; height: 29px; padding-left: 10px; background-position: 0 0; color: #919191; }
#navigation1 li a span { padding-left: 0; padding-right: 10px; background-position: right 0; }
#navigation1 ul.sf-menu li a:hover,
#navigation1 ul.sf-menu li a:hover span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglrL3nyVyU11HUDE3tQ3VxhB78l75jbIGgcVRVfcusytU4EBoogfovQ3Ah6PigRZgqsvnKODQ91fqduZ8_enp3n5fPnkomYdyztztcmsFlMuZymGaeNqZt7oeA6hx9nMaxr_VQOH2iHnw/s1600/bt_nav_hover.png); text-decoration: none; color: #fff; }
#navigation1 li a.clicked,
#navigation1 li a.clicked span { background-position: 0 bottom }
#navigation1 li a.clicked span { background-position: right bottom; }
1.B Code HTML
<div id="navigation1">
<ul class="sf-menu sf-js-enabled sf-shadow">
<li class="cat-item cat-item-29"><a title="Home" href="http://itviet360.com"><span>HOME</span></a></li>
<li class="cat-item cat-item-29"><a href="http://diendan.itviet360.com/" title="Diễn đàn"><span>Diễn đàn</span></a></li>
<li class="cat-item cat-item-31"><a href="http://www.itviet360.com/search/label/Kien-thuc" title="Kiến thức"><span>Kiến thức</span></a></li>
<li class="cat-item cat-item-18"><a href="http://www.itviet360.com/search/label/thu-thuat" title="thủ thuật"><span>Thủ thuật</span></a> </li>
<li class="cat-item cat-item-1"> <a href="http://www.itviet360.com/search/label/Download" title="Download"><span>Download</span></a></li>
<li class="cat-item cat-item-30"><a href="http://www.itviet360.com/search/label/Network" title="Netword"><span>Network</span></a></li>
<li class="cat-item cat-item-30"><a href="http://www.itviet360.com/search/label/SEO" title="SEO"><span>SEO</span></a></li>
<li class="cat-item cat-item-30"><a href="http://www.itviet360.com/search/label/cuoc%20song" title="SEO"><span>Cuộc sống</span></a></li>
<li class="cat-item cat-item-30"><a href="http://www.itviet360.com/search/label/Goc-thu-gian" title="Góc thư giãn"><span>Thư giãn</span></a></li>
</ul></div>
Trong đó:
2. Cách làm trên Blogger (Nền Website khác các bạn làm tương tự nhé)
- Vào bảng điều khiển Blogger -> Mẫu (Template) -> Chỉnh sửa mẫu (Edit HTML)
- Tìm tới ]]></b:skin> và dán code CSS ngay trên nó và lưu mẫu lại
- Vào bố cục (Layout) -> thêm tiện ích (Add a Widget) -> HTML/CSS
- Dán code HTML vào tiện ích vừa thêm và lưu lại xem kết quả :)
0 nhận xét:
Post a Comment