Mời bạn bấm vào Xem thử phía dưới để thấy rõ Menu ngang này.
Bạn chỉ cần đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML (đối với các bạn đang sử dụng giao diện blogspot mới thì đăng nhập vào Blog > Chọn Bố cục > Thêm tiện ích HTML) rồi dán đoạn code phía dưới vào.
<style>
/* CSS for sample sticky content */
.mattblacktabs{
overflow: hidden;
width:590px; /*Chiều rộng của menu*/
background:#736AFF; /*Màu nền phía dưới menu*/
}
.mattblacktabs ul{
margin: 0;
padding: 0;
font: bold 12px Verdana;
list-style-type: none;
}
.mattblacktabs li{
display: inline;
margin: 0;
}
.mattblacktabs li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 8px; /*padding inside each tab*/
border-right: 1px solid white; /*right divider between tabs*/
color: white;
background: #736AFF; /*Màu nền của mỗi tab*/
}
.mattblacktabs li a:visited{
color: white;
}
.mattblacktabs li a:hover, .mattblacktabs li.selected a{
background: red; /*Màu nền của tab khi rê chuột vào*/
}
/* Sample CSS class applied to sticky element */
.docked{
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow version*/
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://dl.dropbox.com/u/66348944/menungangtheoblog.js">
/***********************************************
* Mời bạn tham quan và ủng hộ dunghennessy:http://www.dunghennessy.blogspot.com
***********************************************/
</script>
<script>
//initialize sticky content:
jQuery(document).ready(function($){
$('#samplemenu').stickyit({
gap: 5,
stickyclass: "docked"
})
})
</script>
<div id="samplemenu" class="mattblacktabs">
<ul>
<li><a href="http://www.dunghennessy.blogspot.com/">Trang chủ</a></li>
<li><a href="http://dunghennessy.blogspot.com/search/label/C%C6%A0%20B%E1%BA%A2N">Thủ thuật cơ bản</a></li>
<li><a href="http://dunghennessy.blogspot.com/search/label/N%C3%82NG%20CAO">Thủ thuật nâng cao</a></li>
<li><a href="http://dunghennessy.blogspot.com/search/label/TRANG%20TR%C3%8D%20BLOG">Trang trí blog</a></li>
<li><a href="http://dunghennessy.blogspot.com/search/label/Template">Themes cho blog</a></li>
</ul>
</div>
<div style="height:0px"></div>
Bây giờ, bạn cần thay đổi các dòng lệnh màu đỏ theo ý thích của mình, sau cùng bấm Lưu lại là xong.
Mở rộng thêm:
Nếu bạn muốn có nhiều tab hơn nữa thì copy đoạn code này:
Dán trên dòng thẻ đóng </ul> cuối cùng phía dưới, sau đó bấm Lưu lại là xong
Mở rộng thêm:
Nếu bạn muốn có nhiều tab hơn nữa thì copy đoạn code này:
<li><a href="Link liên kết">Tên hiển thị</a></li>
Lưu ý: Bạn nên kéo tiện ích menu ngang này để xuống phía dưới banner hoặc trên khu vực bài đăng thì đẹp hơn
Chúc các bạn thành công!!!
Comments[ 0 ]
Đăng nhận xét
-HAHEINEKEN.BLOGSPOT.COM
- viết một nhận xét nếu thấy bài nào có ích