Bạn đã từng nghĩ sẽ tự tạo cho blog mình một mẫu menu hoàn toàn khác so với các blog khác chư? Nếu chưa thì namkna chắc chắn bạn sẽ thay đổi các nhìn sau khi đọc bài viết này.
Mẫu meunu xổ dọc hôm nay namkna giới thiệu đến các bạn có điểm đặc biệt là các sub menu mang phong cách hoàn toàn mới đan xen nhau mang lại cảm giác mờ ảo khi nó hiện ra, Màu hồng khá nữ tính nhưng bạn có thể thay đổi nó cho phù hợp với phong cách và màu chủ đạo trong blog của bạn...
Bạn có thể xem demo trực tiếp ở đây:
» XEM DEMO
☼ Thêm Menu hiệu ứng mờ ảo đẹp cho blogger của bạn
1- Đăng nhập vào Blog
2- Vào thẻ Mẫu (Template)
3- Bấm vào nút Chỉnh sửa HTML (Edit HTML)
4- Thêm đoạn code bên dưới vào trước thẻ ]]></b:skin> trong mẫu của bạn:
.aii:before, .aii:after { content: " "; display: table; } .aii:after { clear: both; } .aii { *zoom: 1; } /* Menu chính */ .menu { margin: 50px auto; width: 800px; width: fit-content; } .menu > li {list-style:none!important; background: #FE80DF; float: left; position: relative; transform: skewX(25deg); } .menu a { display: block; color: #000; text-transform: uppercase; text-decoration: none; font-family: Arial; font-size: 13px; } .menu li:hover { background: #FE80DF; } .menu > li > a { transform: skewX(-25deg); padding: 1em 2em; } /* Trình Menu thả xuống*/ .submenu { position: absolute; width: 200px; left: 50%; margin-left: -100px; transform: skewX(-25deg); transform-origin: left top; } .submenu li { background-color: #FEBFEF; position: relative; overflow: hidden; } .submenu > li > a { padding: 1em 2em; } .submenu > li::after { content: ''; position: absolute; top: -125%; height: 100%; width: 100%; box-shadow: 0 0 50px rgba(0, 0, 0, .9); } /* Odd stuff */ .submenu > li:nth-child(odd){ transform: skewX(-25deg) translateX(0); } .submenu > li:nth-child(odd) > a { transform: skewX(25deg); } .submenu > li:nth-child(odd)::after { right: -50%; transform: skewX(-25deg) rotate(3deg); } /* Even stuff */ .submenu > li:nth-child(even){ transform: skewX(25deg) translateX(0); } .submenu > li:nth-child(even) > a { transform: skewX(-25deg); } .submenu > li:nth-child(even)::after { left: -50%; transform: skewX(25deg) rotate(3deg); } /* Xem menu thả xuống */ .submenu, .submenu li { opacity: 0; visibility: hidden; } .submenu li { transition: .2s ease-out transform; } .menu > li:hover .submenu, .menu > li:hover .submenu li { opacity: 1; visibility: visible; } .menu > li:hover .submenu li:nth-child(even){ transform: skewX(25deg) translateX(15px); } .menu > li:hover .submenu li:nth-child(odd){ transform: skewX(-25deg) translateX(-15px); }
» Tùy chỉnh:
5- Lưu mẫu của bạn lại và tiến hành bước tiếp theo.
- background: #FE80DF; là màu nền menu chính khi chưa dê chuột vào
- background: #FE80DF; Là màu nền của các tiêu đề menu chính và các sub menu xổ xống khi dê chuột lên đó
- background-color: #FEBFEF; là màu nền của sub menu xổ xuống khi chưa dê chuột lên các submenu con.
5- Lưu mẫu của bạn lại và tiến hành bước tiếp theo.
6- Quay trở lại Bố cục (Layout) blog của bạn và thêm một tiện ích HTML/Javascripts và dán đoạn code bên dưới vào phần nội dung của tiện ích bạn vừa thêm nha (Tất nhiên là bạn có thể thêm nó thẳng vào mẫu (template) của bạn nếu bạn am hiểu về code. Nếu không thì hãy comment ở dưới mình sẽ chỉ vị trí đó cho các bạn).
<ul class="menu aii"> <li><a href="">Menu 1</a></li> <li> <a href="">Menu 2</a> <ul class="submenu"> <li><a href="">Submenu 1</a></li> <li><a href="">Submenu 2</a></li> <li><a href="">Submenu 3</a></li> </ul> </li> <li> <a href="">Menu 3</a> <ul class="submenu"> <li><a href="">Submenu 1</a></li> <li><a href="">Submenu 2</a></li> <li><a href="">Submenu 3</a></li> <li><a href="">Submenu 4</a></li> </ul> </li> <li><a href="">Menu 4</a></li> <li><a href="">Menu 5</a></li> </ul>
7- Lưu tiện ích lại và quay trở lại blog của bạn để xem tiện ích này hoạt động tốt như thế nào nha.
Hỗ trợ: Nếu bạn gặp bất cứ khó khăn nào khi áp dụng thủ thuật này? đừng ngần ngại hãy comment ngay bên dưới mình sẽ giải đáp và cùng bạn tháo gỡ vướng mắc đó.
Và cuối cùng nếu bài viết này có ích hãy bấm vào liên kết like cuối bài viết này để chia sẽ nó đến với nhiều người hơn nữa nha cac bạn. Chúc vui vẻ và hạnh phúc
Và cuối cùng nếu bài viết này có ích hãy bấm vào liên kết like cuối bài viết này để chia sẽ nó đến với nhiều người hơn nữa nha cac bạn. Chúc vui vẻ và hạnh phúc
Nhận xét
Làm sao có thể bỏ cái dấu chấm đen đầu tiên đc admin nhỉ?
Trả lờiXóa.menu ul {list-style: none;}
XóaCách đó cũng được tuy nhiên ta cũng có thể sửa thẻ:
Xóa.menu > li {
background: #FE80DF;
float: left;
position: relative;
transform: skewX(25deg);
}
thành:
.menu > li {
list-style:none!important;
background: #FE80DF;
float: left;
position: relative;
transform: skewX(25deg);
}
Chào Bạn! Mình đã gửi mail cho Bạn! Rất mong Bạn đọc mail và giúp mình! Cảm ơn Bạn!
Trả lờiXóaOke lát mình check mail ngay :)
XóaAnh nam xem hình cho em hỏi tí nhé
Trả lờiXóaTẠI ĐÂY Ạ
Em nên hiểu khi mình cài đặt tên miền cho một blog thì tất cả các kết quả tìm kiếm đều chỉ hướng về tên miền mới hiện đang sử dụng của em. Các kết quả trên tên miền mặc định sẽ không có tác dụng gì hết. Nó sẽ bị google hiểu đó là những link chết hoặc link rác vì kết quả trả về trên tên miền đó đều được chuyển hướng đến tên miền tùy chỉnh của em. Nói chung nó không có lợi gì đâu.
Xóaxin lỗi vì đã làm phiền, bạn có thể giúp mình phần này đc k, dù k liên quan đến bài viết này cho lắm
Trả lờiXóablog mình sử dụng theme có sẵn chứ k tự thiết kế, có 2 phần mình k sử dụng và cũng k sử dụng đc, mình muốn xóa đi thì phải làm sao?
http://i.imgur.com/NC8QS5D.png
mong đc reply nhanh, tks
Những đoạn đó khá đẹp và cũng tương đối cần thiếu đó em. EM có thể chỉnh sửa lại theo ý em hoặc xóa nó đi bằng cách xóa (hoặc chỉnh sửa) đoạn bên dưới nha:
Xóa<div class='menujohanes'><ul class='dark_menu'>
<li><a class='selected' href='http://h-keiheevn.blogspot.com/' title='Home'>Home</a></li>
<li data-role='dropdown'><a href='#'>About</a><ul>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
</ul></li><li data-role='dropdown'><a href='#'>Contact</a><ul>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
</ul></li>
<li data-role='dropdown'><a href='#'>Download</a><ul>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
</ul></li>
<li><a href='#'>Report</a></li>
<li><a href='#'>Miku</a></li>
</ul>
</div>
<a href='http://feeds.feedburner.com/YOUR_USERNAME'><div class='rssjo'></div></a>
<a href='http://twitter.com/YOUR_USERNAME'><div class='twitterjo'></div></a>
<a href='http://www.facebook.com/YOUR_USERNAME'><div class='facebookjo'></div></a>
<form action='http://h-keiheevn.blogspot.com/search/' id='search' method='get'>
<input name='q' placeholder='Search Somethings..' size='40' type='text'/></form>
Đoạn code đó bạn có thể tìm nó ở trong phần MẪU => CHỈNH SỬA HTML nha bạn.
Xóabước 6. dán đoạn code vào phần nào vậy a. e chưa hiểu lắm?
Trả lờiXóaBước đó tạo một tiện ích HTML/Javascripts và dán đoạn code đo vào nội dung của tiện ích HTML/Javascripts đó.
XóaNếu am hiểu về xml em có thẻ chèn thẳng vào mẫu cũng được.
Làm phiền Anh Nam giúp em cái nha, ví em thử search google và có thử làm theo vài cái mà cũng ko được, >:<
Trả lờiXóaBlog của em: www.ketoanpt.com
Em down template này và chỉnh sửa: http://www.templateism.com/2013/05/metro-classic-responsive-blogspot.html
Nhưng bây giờ Em muốn thêm 1 menu con xổ dọc (định dạng giống menu chính) ở phần "Dịch vụ", nhưng làm hoài ko được. Anh giúp giùm em với.
À còn 1 vấn đề nữa là, cái slider jquery trên trang chủ em làm theo hướng dẫn của anh. Em để ý thì có một số lúc nó ko trượt (đa phần bị ở lần đầu truy cập web, sau đó refresh lại thì nó mới trượt). Em ko hiểu tại sao?
Mong Anh giúp dùm em. Một lần nữa cám ơn Anh nhiều lắm.
À, em viết còn thiếu, menu con xổ dọc đó xuất hiện bên cạnh menu chính nha Anh Nam. ^ ^
Trả lờiXóachủ top cho em hoi sao em tim kiesm doạn mã để copy vào mà hoa hết cả mắt đi không thấy chủ top ákl
Trả lờiXóaBạn hãy sử dụng chức năng tìm kiếm nội tuyến của blogger cho nhanh nha. Nếu chưa biết chức năng đó hãy xem bài viết này nha bạn" XEM NGAY
XóaChào Nam . Mình đã làm như trên nhưng sao nó ra như thế này . Nam giúp mình được không . web của mình . www.sieuthichungcuhn.com
Trả lờiXóaThanks Nam
Đầu tiên bạn Tạo khung "Thêm tiện ích" (Add Widget) cho Header của blogger
Trả lờiXóa- Sau đó tạo một tiện ích dưới phần header vừa tạo và thêm đoạn mã menu vào nha.
-> Cách khác dan toàn bộ mã của menu vào trước đoạn <div class='tabs-outer'> trong mẫu của bạn.
Hi, Nam Ta. Mình add menu lên blog của mình nhưng làm hoài không hiểu vì sao nó lại không hiện các phần menu xổ xuống, giống như bị che vậy.
Trả lờiXóaBlog của mình là: http://diendanmayda.blogspot.com/ . Xin cám ơn.
Mẫu đó bạn dán vào trước đoạn <div class='content'> nha bạn.
XóaĐã làm được rồi, xin cám ơn Nam Ta nhiều lắm lắm. Chúc Blog lúc nào đũng đông member.
Trả lờiXóakhông có gì dâu rất vui vì giúp được bạn.
Xóasory ngoài lề ạ. làm sao để add menu trang này vào dc vậy bác @@! www.menucool.com/horizontal/css-menu#view2
Trả lờiXóaPHần HTML bạn chèn vào tiện ích HTML./Javarscripts hoặc chèn vào trong mẫu nơi bạn muốn hiển thị.
XóaPhần CSS chèn vào trước thẻ ]]></b:skin>
Phần menucss.htc bạn chèn vào giữa 2 thẻ
<script type='text/javascript'>
mã menucss.htc
</script>
sau đó chèn toàn bộ đoạn đó trước thẻ </head>
anh ơi cho em hỏi . Sao để menu dưới tiêu đề nó bị lỗi gì mà ko hiển thị submenu . Để dưới khung bài đăng thì bình thường . tks
Trả lờiXóaCái này là do nội dung của bạn bị vỡ khung đó, nên nó lấn hết :D
XóaAn Thành ơi cho mình hỏi ngoài chút. Blog mình: http://taichinhtudo.blogspot.com/
Trả lờiXóaSao cái widget thêm quảng cáo nằm ở bên phải phía trên (header) nó ko hiện ra vậy. Nên mình ko thêm html vào được.
Giúp mình với. Thanks
Cậu vào phần Bố cục ấy :D và chỉnh sửa để thêm quảng cáo vào!
XóaKo cậu ạ. Nó ko có hiện cái widget đó trong phần bố cục. Mình cũng pó tay. Bạn xem giúp mình
XóaNam Ta ơi, xem giúp mình với: lehuymau.blogspot.com
Trả lờiXóa1) menu chính bị xuống dòng
2) menu nằm trên tiêu đề. mình muốn menu nằm dưới tiêu đề.
Email của mình: lehuymau@gmail.com.
Rất cảm ơn bạn.
giúp mình với nó ko chạy ad ơi!.
Trả lờiXóawww.yensao79.com
nó chạy luôn hai menu rồi anh ơi
Trả lờiXóa