▀▄▀▄▀▄▀▄▀▄▀▄ 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 ĐỔI MÀU TAB KHI RÊ CHUỘT (Kiểu 1)

Trước đây, tôi có post một bài về các mẫu menu ngang (Xem TẠI ĐÂY). Hôm nay, tôi "post" thêm một mẫu menu ngang đơn giản nhưng khá đẹp, menu ngang này sẽ có hiệu ứng đổi màu các Tab khi bạn rê chuột vào.
Menu này không có menu con nên rất thích hợp với các blog có ít nhãn. 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 đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML rồi dán code này vào.

<style>
#bt4unavmenu{height:46px;display:block;overflow:hidden;padding:5px 0;margin-bottom:6px;border:1px solid #333;-moz-border-radius:07px; -khtml-border-radius:07px;-moz-border-radius:15px; -khtml-border-radius:15px;box-shadow:0px 0px 15px #252525;
-webkit-box-shadow:0px 0px 10px #252525;
-moz-box-shadow: 0px 0px 10px #252525;background:#222 url() left top repeat-x}
#bt4unavmenu .current-cat a{background:#dc0000 url() top left repeat-x;color:#FFF;-moz-border-radius:15px; -khtml-border-radius:15px;border:1px solid #111}
#bt4unav a,#subMenusContainer a{text-decoration:none;display:block}
#bt4unav a{margin:0;float:left;background:none;padding:15px 15px 15px 15px;color:#fff;text-transform:uppercase;font-weight:bold;font-size:12px;border:1px solid #222}
#bt4unav li a:hover,#bt4unav li a:focus,#bt4unav a.mainMenuParentBtnFocused{background:#8eda22 url() top left repeat-x;color:#fff;-moz-border-radius:15px; -khtml-border-radius:15px;border:1px solid #333}
#bt4unav,#bt4unav ul,#bt4unav ol,#subMenusContainer ul,#subMenusContainer ol{padding:0;margin:0;list-style:none;line-height:1em}
#bt4unav ol,#bt4unav ul,#subMenusContainer ul,#subMenusContainer ol{background:none;left:0}
#bt4unav li{cursor:pointer;float:left;margin:0 2px 0 0;padding:0 2px 0 4px;height:44px;display:inline;background:url() left center no-repeat}
#bt4unav li:first-child{background:none;padding:0 2px 0 0}
#bt4unav{width:940px;margin:0 auto;clear:both;overflow:hidden;font-size:12px;display:block}
</style>
<div id='bt4unavmenu'>
<ul id='bt4unav'>
<li class='current-cat'><a href='http://anhdepblog.blogspot.com/'>Trang chủ</a></li>
<li><a href='#'>Tên menu</a></li>
<li><a href='#'>
Tên menu</a></li>
<li><a href='#'>
Tên menu</a></li>
<li><a href='#'>
Tên menu</a></li>
<li><a href='#'>
Tên menu</a></li>
<li><a href='#'>
Tên menu</a></li>
<li><a href='#'>
Tên menu</a></li>
<li><a href='#'>
Tên menu</a></li>
</ul>
</div>

Bây giờ, bạn có thể thay đổi các dòng lệnh màu đỏ để phù hợp với blog của mình. Trong đó:
Color: #fff là màu chữ của menu
Font size: 12px là kích cỡ của chữ
Background: #8eda22: màu tab khi rê chuột vào. 
Width: 940px là chiều dài của thanh menu.
Thay các dấu thăng "#" thành các link mà bạn muốn liên kết đến.
Thay đổi tên menu thành tên khác mà bạn muốn.
Sau cùng bấm Lưu lại và trở vào blog xem thành quả nha.
Chúc các bạn thành công.


Nguồn: Thủ thuật code

4 nhận xét:

HOACUOI nói...

Cái khung (Tư viện ảnh...)mà nó chạy dưới banner là cái gì vậy Dũng? Có thể chia sẻ cho mình được không? Cảm ơn Dũng nhiều!

dunghennessy nói...

Đó là tiện ích các bài đăng của trang anhdepblog.blogspot.com
Muốn làm giống như vậy thì bạn xem bài này nha:
http://dunghennessy.blogspot.com/2011/11/hien-thi-bai-viet-trong-cung-mot-nhan.html

Mục Vụ Truyền Thông Chí Hòa nói...

mến chào bạn, bạn làm tốt quá,còn mình mò mẫm hoài mà chưa xong, mình không làm sao đưa các bài viết vào các muc menu được

dunghennessy nói...

Bạn chỉ việc thay dấu # bằng đường link của bài viết vào là ok mà...Thử lại xem sao

Đăng nhận xét

 
Powered by by: Blogger