Thêm menu ngang 3D với CSS cho blog

Đăng bởi Admin | 20/10/13 | 0 nhận xét

Bạn thực hiện theo các bước sau:

1. Tới Blogger Bảng điều khiển> Mẫu

2. Sao lưu mẫu của bạn 

3. Nhấp chuột vào Chỉnh sửa HTML 

4. Tìm 

</head>

 và thêm mã dưới đây ngay trên nó:

<style type='text/css'>
#tabs22 {
float:left;
width:100%;
background:#efefef;
font-size:93%;
line-height:normal;
border-bottom:1px solid #666;
}
#tabs22 ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabs22 li {
display:inline;
margin:0;
padding:0;
}
#tabs22 a {
float:left;
background:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiHtvTCV9qgu7C3s_6xfkYTJe7Enx7RkCb0ONj0M2xo7u7p199OcRRWK_iYGiO7tm2HizSqWJVvu_EO9uEQNmztlAzQq_hDKtlQcNTApy8jXifBU-GZFzi99Xxvh4RpxbsXvvVBt-zvlNM/&quot;) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs22 a span {
float:left;
display:block;
background:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM7E-CR9sWIEJwzBQKHJq-p3jBpa5xW1bpaeCCeOgIa9fUI8-dDOkIyj9RZp8xxg2_8K64J3oLYPDCmm37KyvJASSFZTgfXjXdaFEC9A7m15GgcPi-lq5v8DimPl-wkGXF0TXIWNBnFe1E/&quot;) no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
#tabs22 a span {float:none;}

#tabsF a:hover span {
color:#FFF;
}
#tabs22 a:hover {
background-position:0% -42px;
}
#tabs22 a:hover span {
background-position:100% -42px;
}
</style>

* Lưu ý: bạn có thể thay link màu tím ở trên bằng linh ảnh do mình tự chọn.

6. Tới blogger và nhấn vào Bố cục
7. Bấm vào Thêm tiện ích và chọn "HTML / Javascript 
8. Dán mã dưới đây:

<div id="tabs22">

<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>HTML</span></a></li>
<li><a href="#"><span>CSS</span></a></li>
<li><a href="#"><span>Java Script</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li><a href="#"><span>Contact</span></a></li>
<li><a href="#"><span>Privacy Policy</span></a></li>
</ul>

</div>

9. Lưu mã và xem thành quả !

                                                                        Theo: bloggertipandtrick.net