▀▄▀▄▀▄▀▄▀▄▀▄ Các bài đăng mới ▀▄▀▄▀▄▀▄▀▄▀
    Kenh sctv1 Kenh sctv1 Kenh sctv1
    Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1
    Kenh sctv1 Kenh sctv5 Kenh HTV2 Kenh SCTV16




Xem truyền hình trực tuyến (Click here)

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




19 nhận xét:

QUỐC HƯNG TRẦN nói...

Cảm ơn bạn dunghennessy nhiều. Mong được học hỏi ở bạn nhiều hơn nữa !

dungheineken nói...

Mình cũng cám ơn bạn đã ghé tham quan và ủng hộ dunghennessy

Van Phuc Nguyen nói...

Chào bạn. Mình làm một cái menu nhưng sao mình định vị trên baner theo máy mình thì ok nhy7hg mở ở máy khác ví dụ như các máy laptop nhỏ hơn màn hình vuông, độ phân giải thấp hơn thì cái menu nằm lệch qua một bên. Để khắc phục làm sao bạn ơi. Cảm ơn bạn trước nghe.

dungheineken nói...

Chỉ có một cách là bạn phải chỉnh độ phân giải của máy tính laptop theo độ phân giải chuẩn hiện nay là 1024x768 mà thôi...

Xuan Binh Huynh nói...

Anh ơi? cho em hỏi em đã copy đoạn code trên vào tiện ịhs rồi nhưng làm sao em chuyển lên đầu trang được ạ? Tại vì mình thêm tiện ích ở đâu thì nó ở đó lun. mà trên đầu trang thì không có tiện ích nào!

dungheineken nói...

Em copy đoạn code này cho vào thẻ head trong mã nguồn HTML thì nó sẽ nằm trên cùng.

Anh Ngô nói...

cho mình hỏi làm sao để thay đổi màu nền dưới menu và mỗi tab, mình ko biết điền kí hiệu nào vào

dungheineken nói...

Muốn thay đổi màu nền hay màu tab thì bạn chỉ cần thay đổi mã màu ở các mục background (mình có ghi chú trên code đó), còn mã màu thì bạn xem bài này:
http://dunghennessy.blogspot.com/2012/02/bang-ma-mau.html

Pi Ti Shop nói...

chào bạn, mình đã copy đầy đủ đoạn code của bạn nhưng sao nó lại báo lỗi: "Lỗi khi phân tích cú pháp XML, dòng 948, cột 2: The markup in the document following the root element must be well-formed". Nếu có thể cho mình sđt để tiện hỏi han nha bạn. Thank bạn

dungheineken nói...

Đó là do bạn chép code này vào mã nguồn HTML nên nó bị lỗi, bạn chỉ cần thêm tiện ích HTML rồi dán code vào là OK, làm lại thử xem
Số ĐTDD của dunghennessy: 0908391181

Lộc Vừng nói...

Bạn ơi sao mình chèn được menu này vào blog rồi nhưng thanh menu lại kéo dài toàn bộ chiều ngang của trang (dù mình đã chọn kích cỡ chiều rộng vừa đủ). Mình đã đổi nền cho hợp với nên blog nhưng nó không hiện lên nền mình đã chọn?

dungheineken nói...

Không thể nào, chắc do bạn chọn màu nền sai hoặc thiếu cái gì đó rồi, bạn thử chèn vào blog và cho mình địa chỉ blog bạn để mình vào xem và có hướng khắc phục cụ thể hơn

Nhu Mai nói...

Em làm menu theo như hướng dẫn của anh, ra được thanh menu nhưng mà tên nhãn nó bị nhảy dòng, không có cùng nằm chung trên 1 dòng duy nhất, không biết có phải là do chữ quá dài nên nó phải xuống hàng như vậy nữa! Anh chỉ em với! Em mới học tạo blog! Cảm ơn anh!

dunghennessy nói...

Em cho anh xin địa chỉ blog của em để anh vào xem thử xem, rồi anh sẽ hướng dẫn em cách khắc phục nha

Nhu Mai nói...

http://blogsieumuathoitrang.blogspot.com/ địa chỉ blog này ạ! Anh xem giúp em!

dunghennessy nói...

Em chỉnh chiều rộng của toàn bộ menu lại là Ok

Nhu Mai nói...

Đã chỉnh được rồi ạ! Cám ơn anh! :)

ply sty nói...

làm sao đưablog len google dc vay chị

dunghennessy nói...

Câu hỏi của em Anh chưa hiểu rõ??? Đưa lên Google là sao???

Đăng nhận xét

 
Powered by by: Blogger