Xem thử:
DEMO
Làm thế nào để thêm menu này vào blogger
Cũng khá đơn giản vì bạn chỉ cần thêm 1 tiện ích rồi bố trí tiện ích này ở vị trí thích hợp tùy theo yêu cầu blog của bạn<style>Và nhớ thay # là các liên kết(URL) nhãn cần tới.
/* The CSS Code for the menu starts here bloggertrix.com */
.btrix_glossymenu1{
position: relative;padding: 0 0 0 34px;margin: 0 auto 0 auto;
background: url(http://2.bp.blogspot.com/-qGp4yDwRwGw/UdI-am9fKCI/AAAAAAAAhg0/atyOiUswufg/s46/btrix_menupu_bg.gif) repeat-x;
height: 46px;
list-style: none;
}
.btrix_glossymenu1 li{
float:left;
}
.btrix_glossymenu1 li a{
float: left;display: block;color:#000;
text-decoration: none;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
padding:0 0 0 16px;
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;
}
.btrix_glossymenu1 li a b{
float: left;display: block;padding: 0 24px 0 8px;
}
.btrix_glossymenu1 li.current a, .btrix_glossymenu1 li a:hover{
color: #fff;
background: url(http://1.bp.blogspot.com/-BByMYECtCFg/UdI-uSm3gbI/AAAAAAAAhg8/fhfJi9P_3B4/s46/btrix_menupu_hover_left.gif) no-repeat;
background-position: left;
}
.btrix_glossymenu1 li.current a b, .btrix_glossymenu1 li a:hover b{
color: #fff;
background: url(http://4.bp.blogspot.com/-bLRNkvSt8vA/UdI-8WwL9DI/AAAAAAAAhhE/9YeZQLzwIVc/s250/btrix_menupu_hover_right.gif) no-repeat right top;
}</style>
<ul class="btrix_glossymenu1">
<li class="current"><a href="#"><b>Home</b></a></li>
<li><a href="#"><b>CSS</b></a></li>
<li><a href="#"><b>Forums</b></a></li>
<li><a href="#"><b>Webmaster Tools</b></a></li>
<li><a href="#"><b>JavaScript</b></a></li>
<li><a href="#"><b>Contact Us</b></a></li>
</ul>
Chúc thành công.