▀▄▀▄▀▄▀▄▀▄▀▄ 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 XỔ DỌC XUỐNG NHIỀU CẤP (KIỂU 2)

Trước đây, tôi có đăng bài TẠO MENU  NGANG XỔ DỌC XUỐNG NHIỀU CẤP (KIỂU 1), với kiểu này thì menu chỉ có một màu đen, chữ trắng và các bạn không thể đổi màu được.

Do có một số bạn hỏi: Sao không đổi màu cho menu được?, vì vậy hôm nay tôi xin giới thiệu đến các bạn MENU NGANG XỔ DỌC XUỐNG NHIỀU CẤP (KIỂU 2), menu này cũng giống với menu kiểu 1 nhưng thay vào đó các bạn có thể dễ dàng đổi màu cho menu, đổi màu cho chữ trên menu... 

Mời bạn bấm vào "Xem thử" phía dưới để thấy rõ hiệu ứng xổ dọc của menu này




Xem thử


Để tạo được như vậy, các bạn cần làm theo các bước sau đây:
Đầu tiên, bạn đăng nhập vào Blog > Chọn thiết kế > Chọn chỉnh sửa HTML, sau đó bạn bấm đồng thời cặp phím Ctrl+F để mở hộp tìm kiếm và gõ vào khung dòng lệnh <head>. Bây giờ bạn copy đoạn code này và dán phía dưới dòng lệnh đó.




<style type='text/css'>
html .jqueryslidemenu{height: 1%;}
</style>

<script src='http://dl.dropbox.com/u/66348944/jquery.min.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/66348944/drop_menu.js' type='text/javascript'/>



Sau khi dán xong đoạn code này, bạn xoá dòng lệnh cũ đi và tiếp tục gõ vào khung tìm kiếm dòng lệnh </header> rồi copy tất cả các code này vào trên dòng lệnh đó và bấm Lưu mẫu.



<style>
.jqueryslidemenu{
font: bold 12px Verdana;
background:#153E7E; /* màu nền của menu*/
width: 100%;
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

.jqueryslidemenu ul li a{
display: block;
background:#15317E; /* màu nền của thư mục chính*/
color: white; /*màu text thư mục chính*/
padding: 8px 10px;
border-right: 1px solid #778;
color: #ccc;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{
display: inline-block;
}

/*.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: #ff0066; //màu cchữ các menu
}*/

.jqueryslidemenu ul li a:hover{
background:#2B60DE; /* màu hiệu ứng khi rê chuột vào các link*/
color: white; /*màu text khi rê chuột*/
}

.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

.jqueryslidemenu ul li ul li ul{
top: 0;
}

.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px;
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.jqueryslidemenuz ul li ul li a:hover{
background: #eff9ff;
color: black;
}

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}</style>

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://dungheineken8.blogspot.com/">Home</a></li>

<li><a href="http://dungheineken.blogspot.com/">Thủ thuật máy computer</a></li>

<li><a href="http://anhdepblog.blogspot.com/">Thủ thuật Ảnh </a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul></li>

<li><a href="http://phimvang.org/">Xem phim</a></li>

<li><a href="#">Blogspot</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul> </li> </ul></li>

<li><a href="http://www.nhaccuatui.com/">Nghe nhạc</a></li>

<li><a href="http://anhdepblog.blogspot.com/">Hình ảnh</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
</ul></li>

<li><a href="#">Download</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Sub Item 2.2</a></li>
</ul></li>


</ul><br style="clear: left" />
</div>


Bây giờ điều bạn cần làm là thay đổi các dữ liệu trong các dòng lệnh <a herf="#" (thay # bằng địa chỉ link liên kết), tên menu và thay đổi màu cho menu, màu chữ theo ý thích của bạn (có ghi chú ở code) cho phù hợp với Blog của mình. Cuối cùng bấm Lưu mẫu và trở lại Blog để "thưởng thức" thành quả. Lưu ý: Có một số giao diện blog sẽ không có lệnh </header>, do vậy bạn phải thêm tiện ích HTML/Javacript rồi dán code phần 2 vào và lưu lại là xong. 

Nguồn: Trai đất mũi

64 nhận xét:

Nặc danh nói...

hiếu

bạn ơi cho mình hỏi mình làm được rùi nhưng có
một chuyện
khi menu con xổ xuống nó lại nằm dưới bài viết vậy mình phải làm sao
nhờ bạn chỉ dùm cảm ơn bạn trước
blog của mình đây http://caycanhban.blogspot.com/

dungheineken nói...

Do giao diện blogger của bạn có background nổi ở trên, do đó nó sẽ bị che khuất, đâu bạn thử làm kiểu 1 xem có bị không nha?

Nặc danh nói...

hiếu
ban oi ! co cách nào mình đổi giao diện được ko bạn

dungheineken nói...

Đổi giao diện thì dễ mà, bạn đăng nhập vào Blog > chọn Thiết kế, sau đó bấm chọn thẻ Trình thiết kế mẫu ở phía trên, tại đây có sẳn các mẫu giao diện của Blogger, bạn chọn một mẫu rồi bấm áp dụng cho Blog là xong
Chúc bạn thành công

Phuong Trinh nói...

alo A.Dung
Giup em voi
anh huong dan em viet bai vao trong may cai menu ngang voi em lam dung nhu anh ma khong duoc

dungheineken nói...

Trinh cho anh địa chỉ mail đi, để anh gởi hình qua cho em hoặc em gởi hình chụp khi em làm cho anh: dungheineken@gmail.com, anh xem xem em làm như thế nào thì mới hướng dẫn cụ thể được

Your Smile nói...

anh ơi cho em hỏi: em làm được rôi nhưng làm sao dăng bài trên các menu con đó ạ?

Your Smile nói...

anh ơi cho em hỏi: là em làm được rồi nhưng làm sao đăng bài trên các menu con đó ?
vuonguyenmar@yahoo.com

dungheineken nói...

Bây giờ thì em copy địa chỉ bài đăng nào muốn hiển thị dán vào chỗ dấu "#" màu xanh và thay thế tên bài đăng vào chữ Sub menu là được

Your Smile nói...

với nhiều bài thì làm sao anh?

dungheineken nói...

Ý em là một menu xổ xuống sẽ có nhiều bài đăng trong menu đó hả?, nếu vậy thì em cứ làm tương tự là được

Your Smile nói...

ko, với nhiều bài trong 1 trang đó anh, làm sao a? 1 mục trong menu xổ xuống đăng nhiều bài đó anh

dungheineken nói...

Xin lôi em, anh không hiểu rõ lắm về câu hỏi của em, em có thể gởi hình chụp cho anh qua địa chỉ dungheineken@gmail.com để anh xem xem có giúp ích gì cho em không nha?
Thân!!!

tuongnguyen nói...

bạn cho mình hỏi, có thể áp dụng cách này để chèn menu flash vào Google Site được ko? Nếu được bạn có thể vui lòng hướng dẫn thêm cho mình ko?
Cảm ơn!

dungheineken nói...

Xin lỗi bạn, vì tôi không có "chơi" Google site nên không biết có làm được không nữa?
Bạn thử tìm hiểu trên Google xem sao

Lê văn Giang nói...

bạn ơi bạn gửi lại cho mình đi mình hua nhận được,cho mình hỏi thêm mình làm menu ngang như bạn chỉ dẫn nhưng khung ngang menu ko dài bằng mẫu blog thì phải làm như thế nào?

dungheineken nói...

Mình đã gởi lại code lịch cho Giang rồi đó, check mail nha.
Còn menu ngang có "chiều dài không bằng Blog" là do Giang có ít mục quá, tạo thêm mục nữa thì nó sẽ bằng thôi

tung5a nói...

Bạn ơi cho mình hỏi để tạo đươc thanh trượt lên xuống(ví dụ như thanh trượt nằm bên phải của phần nhận xét của bạn) thì làm thế nào vậy bạn, bạn có thể hướng dẫn cho mình được không. Cám ơn bạn rất nhiều.

dungheineken nói...

Xin lỗi bạn mình chỉ biết code làm thanh trượt ở phần comments thôi, còn các phần khác mình chưa tìm hiểu, bạn muốn làm thanh trượt ở phần nào? Nếu biết mình sẽ chia sẻ cho bạn

binhminhcoem nói...

anh ơi em hỏi chút sao em làm thanh menu của anh nhưng nó lại hiện trên cùng trang blog vậy anh giúp em cho nó nằm bên trên khùng đăng bài được không anh cảm ơn anh nhiều

dungheineken nói...

Muốn cho nó hiện lên trên khung bài đăng thì ở code thứ hai em không dán vào header nữa mà đăng nhập vào blog > chọn thiết kế > Thêm tiện ích HTML rồi dán nó vào và kéo lên trên khung bài đăng là được

Galaxy® nói...

ANH ƠI SAO EM CHỈNH SỬA TÊN TRONG THANH MENU NHƯNG NÓ BÁO LỖI http://quangbinhexplorer.blogspot.com/p/du-lich-nuoc-ngoai.html
ANH CHỈ CACHS CHO EM VỚI VÀ HÌNH NHƯ CÁC LINK CŨNG LOẠN XẠ LÊN RỒI HU HU , NẾU LÀM MỚI LẠI CHẮC EM CHẾT MẤT

dungheineken nói...

Bình tĩnh, bây giờ em xoá các code tạo menu lúc nãy và làm lại từng bước theo hướng dẫn, ở code thứ hai thì em đừng dán vào header nữa mà hãy tạo một HTML rồi dán vào và kéo nó lên trên bài đăng là được
Chúc em thành công

Galaxy® nói...

http://quangbinhexplorer.blogspot.com/
EM MUỐN SỬA CÁI TÊN LẠI PHÍA TRÊN NHƯNG EM KHÔNG TÌM THẤY CHỖ THAY , ANH ƠI HELP EM !

dungheineken nói...

Cái tên ở trên là một file ảnh, vì vậy em phải có file ảnh trước rồi up lên host riêng của mình để lấy link sau đó em đăng nhập vào Blog chọn Chỉnh sửa HTMl và kiếm link hình ở mục Logo và thay thế link của mình vào là được

Xuongrong nói...

mình làm đc rồi nhưng cái đó nó lại nằm cùng với cái trang chủ của blog làm sao bây giờ, bây giờ nó thành hai cái menu luôn 1 là củblog có sẵn
1 là của mình sửa html?

dungheineken nói...

Thì đúng rồi, menu này nó sẽ xuất hiện ở trang chủ, nếu bạn không muốn xuất hiện ở trang chủ thì làm ẩn nó đi, xem bàn ẨN TIỆN ÍCH

Võ Văn Tùng nói...

trường hợp mẫu ko có thì tạo sao vậy anh, có thể giúp e với đc ko anh

dungheineken nói...

Ý em là sao? không có thì mình tạo chớ sao nữa em trai, làm theo hướng dẫn trên bài là được

Võ Văn Tùng nói...

hôm qua em hỏi ko rõ. ý em là một số template ko có đó anh, thì làm sao, xi lỗi a vì câu hỏi ko rõ

dungheineken nói...

Nếu giao diện nào không có thì mình phải tạo cái mới cho nó thôi và kéo nó lên phía trên là được

love4u nói...

anh nói rõ cách làm 5 Tab với
Chỉ rõ phần làm nội dung ấy
có thể chèn link mà nếu chèn cái khác thì phải thế nào
giống như chèn của anh đó

dungheineken nói...

Ở phần nội dung cho các Tab, em có thể thêm bất kỳ vào nội dung nào mà mình muốn như hình ảnh, chữ viết...Nhớ chú ý là nội dung phải là các code HTML (ngoài trừ chữ viết là không cần)

Anhlevan nói...

Tặng Dũng Code Menu 3D có link của Dũng đó:

Anhlevan nói...

Mình cắt phần thẻ p rồi vì diễn đàn không chấp nhận, khi dùng bạn thêm phần thẻ p vào nhé

dungheineken nói...

Cám ơn bạn nhưng sao tôi không thấy code nào bạn gởi tặng cả, bạn gởi ở đâu???

giang97 nói...

Chào Dũng.
"Sau khi dán xong đoạn code này, bạn xoá dòng lệnh cũ đi và tiếp tục gõ vào khung tìm kiếm dòng lệnh rồi copy tất cả các code này vào trên dòng lệnh đó và bấm Lưu mẫu."
Bạn cho mình hỏi xóa dòng lệnh cũ là xóa lệnh nào?
Trong đó rất nhiều vậy bạn nói rõ xóa từ đâu đến đâu nhé.
Cám ơn bạn
Chúc sức khỏe

dungheineken nói...

Xoá lệnh cũ có nghĩa là xoá chữ head lúc đâu mới gõ vào hộp tìm kiếm đó và thay vào hộp tìm kiếm chữ header (chứ không phải xoá lệnh trong HTML...)

Admin nói...

Em làm giống anh nhưng submenu đổ xuống nhưng hiện thị ko dc hết .........

dungheineken nói...

Em chụp hình gởi qua mail cho Anh dungheineken@gmail.com để anh xem thử bị lỗi như thế nào để hướng dẫn cho em

S2 Team nói...

Em làm giống anh như sao e rà và kích chuột vào menu con không được , Anh giúp em với blog của em : http://s2teamz.blogspot.com/

dungheineken nói...

Có thể là do em áp dụng hiệu ứng con trỏ chuột, vì vậy em thử bỏ hiệu ứng sao rơi ở con trỏ chuột thử xem...

S2 Team nói...

Hôm trước em áp dụng hiệu ứng con trỏ , giờ em không biết nó nằm ở chổ nào để xóa .hihi , Anh giúp em với . thanks anh nhiều

dungheineken nói...

Em đăng nhập vào Blog chọn tiện ích nào có hiệu ứng chuột thì xoá nó

S2 Team nói...

hi E bỏ hiệu ứng con chuột rồi mà vẫn không được , không rà và click chuột vào menu con được . A giúp em với

dungheineken nói...

Em đăng nhập vào blog chọn thiết kế, chọn chỉnh sửa HTML rồi dán code vào trước thẻ đóng head thử xem

S2 Team nói...

Thanks A Em Kích chuột được rồi , nhưng kích dòng menu con thứ 2 thứ 3 hơi khó .Chúc A Năm mới vui vẽ :D

Chíp Việt nói...

Dung oi,minh da co lam nhu kieu 1 va kieu 2 ra rat ok nhung chi tiec 1 dieu la phia duoi thanh menu lai la cai Javascript banner dong nen ko nhin thay hang thu 2 xo xuong ma chi thay duoc hang 1 xo thoi,co cach nao khac phuc giup minh voi.Mail : mrdohuy@gmail.com tks Dung rat nhieu neu duoc hoi am

dungheineken nói...

Bạn thử dán code trên thẻ đóng header xem sao

Chíp Việt nói...

Dung oi!Minh da dan code 1 ben duoi the mở head va dan code 2 tren the dong header roi,menu ngang rat tot xo doc xuong day du nhưng vì vướng cái banner động nên ko nhin được hàng menu con thứ 2 trở đi(có lẽ do cái banner động nó che mất nên không nhìn thấy được cái menu con thứ 2 trở xuống).Rất mong được giúp đỡ

dungheineken nói...

Ok, để mình nghiên cứu lại kiểu khác, nếu thành công sẽ đăng bài cho bạn tham khảo nha

Chíp Việt nói...

Tks Dũng nhiều!Hi vọng sẽ có kết quả sớm nhất.Blog của bạn dẹp thật

vuongsungdong nói...

bạn ơi mình cảm ơn vè bài viết rất hay của bạn nhưng mình có thắc mắc là giờ mình ko thích màu xanh của thanh menu đó mà mình muốn màu khác thì làm sao?rất mong hồi âm sớm của bạn. email của mình là vuongsungdong@yahoo.com

dungheineken nói...

Muốn đổi màu nền cho menu, bạn đổi mã màu ở mục background (tôi có ghi chú ở trên code đó). Nếu bạn chưa biết mã màu thì mời bạn xem bài này để chọn mã màu rồi thay vào là xong.
http://dunghennessy.blogspot.com/2012/02/bang-ma-mau.html
Chúc bạn thành công

AnhThương nói...

Mình code mẫu của bạn rùi và đã thành công, nhưng khi rê chuôt vào menu để hiện ra menu con thì chỉ rê chuột lại tới menu con thứ 1 thui, còn 2và 3...thì nó tự nhiên đóng lại (VD như khi rê chuột vào Thủ Thuật Ảnh thì nó hiện ra Sub item 1.1 cho đến 1.4, rê chuột lại 1.1 thì dc, còn mấy cái kia khi rê chuột lại thì nó tự dưng đóng lại)

dungheineken nói...

Chắc là do giao diện của bạn không phù hợp hoặc code menu này xung đột với code khác trên blog của bạn.

AnhThương nói...

vậy phải chọn giao diễn gì mới phù hợp với cái meny này za

dungheineken nói...

Bạn thử chọn một trong những giao diện này thử xem:
http://dunghennessy.blogspot.com/search/label/Template

Sang Nguyen nói...

cho mình hỏi giao diện của mình màu den giờ muốn đổi sang màu khác dc không A Dũng

dungheineken nói...

Tuỳ theo giao diện mà mình có thể đổi được, bạn kiếm trong dòng lệnh background và thay thế mã màu khác, cuối cùng lưu lại là Ok

Thành Huyên nói...

Anh dung giup e cai nay voi ạ.
hom bua e lam menu ngang xổ doc, theo bai viet cua anh ma kieu nào ko nho rõ, ma sao để HTML/Javascript chỗ khác thì dc binh thuong nhung để ngay chỗ nay thì ko xổ xuong nó trùng với menu trang mặc đinh của blog hay sao do vì khi chỉnh trong mẫu nâng cao nó cung thây đổi màu theo luôn, a xem giup chi e cach khac phuc voi blog:thanhhuyenkt.blogspot.com
thanks anh!

dungheineken nói...

Có thể code menu ngang này "nó" xung đột với một code tiện ích nào đó ở blog của em rồi...Vụ này thì "bó tay" chỉ có thể tìm và xoá code đã xung đột với "nó" mà thôi

Thành Huyên nói...

ma cái này la tất cả code mặc định cua blogspot luon, e them code menu cua a đầu tiên luôn ma cũng đụng code,vay e cung bo tay,thanks anh

Nguyen Trung Luan nói...

Tôi cũng bị tình trạng giống vậy, menu con xổ xuống bị che khuất. Không có cách khắc phục nào sao hả bạn? Tôi thường thấy trên blog đa số code menu như thế này đều bị che khuất. không thấy ai hướng dẫn cách khắc phục chi tiết hơn. Nhờ bạn chỉ giúp.thanks

Đăng nhận xét

 
Powered by by: Blogger