MENU NGANG TRƯỢT THEO BLOG

Menu ngang này thuộc loại đơn giản (không có xổ xuống) nhưng menu này đặc biệt ở chỗ là lúc nào cũng nằm trên đầu trang blog. Khi bạn kéo thanh trượt xuống phía dưới cùng của blog thì nó vẫn xuất hiện ở đầu blog sẳn sàng cho bạn sử dụng.
Mời bạn bấm vào Xem thử phía dưới để thấy rõ Menu ngang này.

Xem thử

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="https://sites.google.com/site/dunghennessyjs/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:

<li><a href="Link liên kết">Tên hiển thị</a></li>

 

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

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!!! 

Người đăng: dunghennessy vào lúc 20:56