▀▄▀▄▀▄▀▄▀▄▀▄ 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)

TẠO MENU DỌC CÓ HIỆU ỨNG ĐỘNG

Trước đây, tôi có chia sẻ với các bạn các mẫu menu dọc cho Blogspot (xem TẠI ĐÂY), hôm nay tôi giới thiệu đến các bạn một mẫu menu dọc khá đẹp, khi sử dụng menu này, bạn rê chuột vào một menu bất kỳ thì menu đó sẽ có hiệu ứng lật và chuyển đổi màu khá mướt. Các bạn bấm vào Xem thử phía dưới để xem trước nha.





Xem thử



Thủ thuật này khá là đơn giản, bạn đăng nhập vào Blog > chọn thiết kế > Thêm tiện ích HTML, và dán tất cả các code phía dưới vào.




<script type="text/javascript" src="http://dl.dropbox.com/u/66348944/Jquery1.3.2.js"></script>
<script src="http://dl.dropbox.com/u/66348944/flipmenu.js" type="text/javascript"> </script>
<style>
.flipmenu {
font-family: Times new roman;
font-size: 16px;
font-weight: bold;
position: relative;
}

.flipmenu_box {
overflow: hidden;
position: relative;
}

.flipmenu_link,.flipmenu_link_over,.flipmenu_link_active {
width:250px;
text-decoration: none;
text-shadow:1px 1px 1px #fff;
text-transform: uppercase;
color: #000000;
cursor: pointer;
margin-top:2px;
padding: 6px;
position: absolute;
background: #fdd78d;
background: -moz-linear-gradient(top, #fbdc88 0%, #fbbf57 50%, #fac319 51%, #fb9709 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbdc88), color-stop(50%,#fbbf57), color-stop(51%,#fac319), color-stop(100%,#fb9709)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbdc88', endColorstr='#fb9709',GradientType=0 );
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}

.flipmenu_link_over,
.flipmenu_link_active {
text-decoration: none;
text-shadow:1px 1px 1px #eee;
color: #fa0320;
background: #aebcbf;
background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=0 );
</style>

<div id="flip_menu">
<a href="#">● Thủ thuật Windows 7</a>
<a href="#">● Thủ thuật Windows XP</a>
<a href="#">● Thủ thuật Internet</a>
<a href="#">● Thủ thuật USB</a>
<a href="#">● Thủ thuật Yaoo-Gmail</a>
<a href="#">● Thủ thuật Windows</a>
<a href="#">● Thủ thuật Blogspot</a>
<a href="#">● Chuyên đề máy tính</a>
<a href="#">● Tổng hợp</a>
<a href="#">● Linh tinh</a>
</div>



Bây giờ, bạn thay đổi các dấu "#" màu xanh thành các địa chỉ tương ứng của các menu và thay đổi các tiêu đề hiển thị trên menu (các dòng chữ màu xanh) theo ý thích của bạn, ngoài ra bạn còn có thể thay đổi:
* Width: 250px (chiều rộng của tiện ích).
* Cỡ chữ hiển thị trên menu (Font-size:16px)

và bấm LƯU lại là xong



Chúc các bạn thành công



Nguồn: Trai đất mũi

11 nhận xét:

Unknown nói...

Cho mình hỏi, làm thế nào để nhấp vô từng menu tương ứng sẽ cho ra trang mình muốn tới, muốn tạo thì tạo như thế nào.hih, thank nha

dunghennessy nói...

Nếu bạn muốn nó đến trang nào thì thay dấu # bằng địa chỉ trang Web mà bạn muốn liên kết đến. Thí dụ như tôi muốn liên kết đến trang blog dungheineken thì thay dấu # bằng địa chỉ sau: http://www.dungheineken.blogspot.com và đặt tên sau dấu # là thủ thuật vi tính chẳng hạn, thì lúc này khi bấm vào menu mang tên THỦ THUẬT VI TÍNH thì nó sẽ dẫn bạn vào trang dungheineken.blogspot.com
Còn nếu bạn muốn nó dẫn đến các trang ở Blog của bạn thì trước tiên bạn phải tạo trang hoặc nhãn của bạn trước, rồi sau đó làm như thí dụ ở trên là được. Bạn có thể xem thêm bài TẠO NHÃN (CHỦ ĐỀ) CHO CÁC BÀI VIẾT ở địa chỉ http://dunghennessy.blogspot.com/2011/03/tao-nhan-chu-e-cho-cac-bai-viet.html thì bạn sẽ hiểu
Chúc bạn thành công

hpmongcho nói...

Rất hay nhưng không dùng được vì bị xung đột với javascipt khác. Chán@@ Dùng được cái này thì lại mất cái kia:(

dunghennessy nói...

Đúng vậy, mỗi code ít nhiều cũng có thể xung đột với các code khác, vì vậy bạn phải suy nghĩ trước khi dùng nó...

phamvanphuong nói...

Cho mình hỏi ngoài lề tí bạn nhe!
+ Có cách nào để tạo forum(diễn đàn) cho blogspot không bạn
+ Mình cũng tham khảo rất nhiều cách nhưng khó thật không biết chọn cái nào cho tiện
+ Bạn có cách nào hay hay và tiện lợi không chỉ giúp mình với!

dunghennessy nói...

Ok, để hôm nào mình tìm hiểu xem rồi hướng dẫn cho bạn nha

hpmongcho nói...

Bạn ơi, tiện thể ghé quá nói cái này. Cái lịch của bạn đó. nó che mất cái menu xổ xuống của "Chọn thủ thuật" rồi. Không biết người khác có bị thế không, mình dùng google chrome

dunghennessy nói...

Cám ơn bạn, bạn nói đúng rồi đó, vì vậy mình hay khuyến cáo mọi người nên xem dunghennessy trên trình duyệt FireFox, còn ở google Chrome nó hay bị lỗi lắm...
Một lần nữa cám ơn bạn đã cảnh báo cho tôi

Unknown nói...

cho mình hỏi lam thế nào để khi thêm thẻ li, nhấn vô vd: thủ thuật window nó hiện thanh con ở dưới , help me,

dunghennessy nói...

À, menu này được thiết kế không có menu con phía dưới bạn ạ...

Tiểu học Vĩnh Phước nói...

hi

Đăng nhận xét

 
Powered by by: Blogger