Dropdown Menu hiện vẫn đang rất phổ biến đối với các Blogger vì nó mang tính chuyên nghiệp, rất phù hợp cho các blog có nhiều chuyên mục mẹ và chuyên mục con, hơn nữa lại không ảnh hưởng tới tốc độ load trang (vì là CSS). Hôm nay mình tiếp tục chia sẻ một style CSS Dropdown Menu cho các bạn tham khảo. Sau đây là các bước tạo menu cho Blogger:
Ảnh minh hoạ
Bước 1: Tại trang quản trị blog, các bạn vào Mẫu > Chỉnh sửa HTML, chèn đoạn code sau vào trước thẻ ]]></b:skin>:
/* CSS Dropdown Menu by kjmagic.blogspot.com */ nav ul { list-style: none; position: relative; display: inline-table; } nav ul li a { display: block; padding: 25px 40px; text-decoration: none; } nav ul li { float: left; } nav ul ul li { position: relative; float: none; } /*Third Step*/ nav ul ul { position: absolute; top: 100%; } nav ul ul ul { position: absolute; left: 100%; top: 0; } /*Colors*/ nav ul { background: #0052a4; background: linear-gradient(top, #0052a4 0%, #0052a4 100%); background: -moz-linear-gradient(top, #0052a4 0%, #0052a4 100%); background: -webkit-linear-gradient(top, #0052a4 0%,#0052a4 100%); box-shadow: 0px 0px 9px rgba(0,0,0,0.15); border-radius: 10px; } nav ul li:hover { background: #C0C0C0; background: linear-gradient(top, #C0C0C0 0%, #C0C0C0 40%); background: -moz-linear-gradient(top, #C0C0C0 0%, #C0C0C0 40%); background: -webkit-linear-gradient(top, #C0C0C0 0%,#C0C0C0 40%); } nav ul ul { background: #C0C0C0; background: linear-gradient(top, #C0C0C0 0%, #C0C0C0 40%); background: -moz-linear-gradient(top, #C0C0C0 0%, #C0C0C0 40%); background: -webkit-linear-gradient(top, #C0C0C0 0%,#C0C0C0 40%); border-radius: 0px; padding: 0; } nav ul ul li { border-top: 1px solid #000; border-bottom: 1px solid #000; } nav ul li a { color: #FFF; } nav ul li:hover a { color: #000; } nav ul ul li a { color: #fff; } nav ul ul li a:hover { color: #fff; background: #0052a4; }
Bước 2: Chèn đoạn code sau vào vị trí muốn hiển thị menu rồi lưu template lại:
<!--CSS Dropdown Menu by kjmagic.blogspot.com--> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Articles</a> <ul> <li><a href="#">Fun</a></li> <li><a href="#">freebies</a></li> <li><a href="#">Web Design</a> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> </ul> </li> </ul> </li> <li><a href="#">Archives</a> <ul> <li><a href="#">January</a></li> <li><a href="#">February</a></li> </ul> </li> <li><a href="#">AboutMe</a></li> </ul> </nav> <!--/CSS Dropdown Menu by kjmagic.blogspot.com-->
Chỉnh sửa lại các link và tên link cho phù hợp với blog của bạn.
Chúc các bạn thành công !
Xem thêm thủ thuật: kjmagic.blogspot.com
Nhận xét
Vào trang khanh98.blogspot.com kiểm tra cái bài liên quan và Hiện Next & Previous kèm tiêu dề bài viết cho blogger giúp e anh ơi!!!!!!!
Trả lờiXóaCái template mới nó không bình thường
Bạn Quốc Khánh: Tìm đến đoạn Css: .bogger-pager {
XóaRồi thêm thuộc tính: clear: both; vào sau nó là được.
Hôm nay đọc quyên mất không trả lời em :) đang mải làm cái mẫu redirect cho một bạn yêu cầu ;) EM thực hiện lại như 2 bạn trên xem sao nha. nếu không được anh suppost thêm.
Xóathêm thuộc tính clear: both; thì ổn rồi, cảm ơn!!!
Xóaanh kiểm tra giúp em cái trích dẫn của tiện ích bài liên quan với , rồi cả mấy cái cmt facebook, g+ nó cũng không bình thường.
Nhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóacô muốn menu hiện trên đầu blog bên dười ảnh nóc nhà thì đặt code ở bước 2 sau thẻ nào vậy NT ? cô mong tin cháu
Trả lờiXóaCô cho cháu cái link trang nha cô, cô có nhiều trang quá :)
XóaNhận xét này đã bị tác giả xóa.
Trả lờiXóaBạn chỉ mình cách làm menu đổ xuống trong temp hola dc ko, cảm ơn nhiều.
Trả lờiXóaTất nhiên là được bạn hãy để lại địa chỉ trang bạn muốn tạo menu ở đây nha.
XóaAnh ơi sao em làm mãi menu thả xuống k được, giúp e với được k a, cảm ơn a nhiều nhé
Trả lờiXóatrang của e :http://hopquyhopchuan.blogspot.com/
Em phải áp dụng thì a mới kiểm tra xem lỗi ở đầu còn hướng dẫn chứ e.
Xóae áp dụng rồi đó a, a kiểm tra giúp e với ạ. cảm ơn a nha
XóaAnh vào nhưng không thấy, em gửi mẫu đó vào tavannam01@gmail.com ánh sẽ thêm cho, nhớ ghi rõ menu e muốn thêm vào nha.
Xóaem gửi mẫu vô mail a rồi, a xem có gì giúp đỡ e với a nha. cảm ơn a ạ.
Trả lờiXóaAnh chưa nhận được mail của em đâu .
XóaTerocket xem giùm menu của mình tại www.viethoangit.com/ với, mình làm theo hướng dẫn ở www.mybloggertricks.com/2012/01/css3-drop-down-menu-no-images-and-no.html nhưng menu bị lỗi width, height không chuẩn, với lại menu con nằm trong mục "Sống" và "CNTT" nó không hiển thị hết.
Trả lờiXóaCảm ơn!
Nhận xét này đã bị tác giả xóa.
Trả lờiXóaMenu xổ xuống rất đẹp xin cảm ơn nha!
Trả lờiXóaNhận xét này đã bị tác giả xóa.
Trả lờiXóaSky Mega Menu Đẹp Tuyệt Bằng Css3 Với Hiệu Ứng Scale
Trả lờiXóaCảm ơn bạn đã chia sẻ.
Trả lờiXóaNhưng bạn ơi cho mình hỏi thêm sao trong giao diện điện thoại không hiển thị được các menu mình đã tạo vậy bạn?
http://nipponstudy.blogspot.com/
nhiều bài hay quá
Trả lờiXóathanks anh nhiều nhé