Vẻ đẹp là thành phần quan trọng của một blog đây là lý do tại sao hầu hết blogger luôn muốn làm cho blog của họ như là bắt mắt nhất có thể.
(Me nu này mình lấy từ một trang tiếng Anh)
Để xây dựng các blog tiện cho người xem đễ tìm bài, chủ đề thì me nu không thể thiếu. Vì vậy, ta sẽ chèn Animated CSS Drop Down Menu trong blogger, với các hiệu ứng JQuery ngoạn mục! Tôi sẽ chia sẻ một phiên bản tùy chỉnh hoạt động hoàn hảo với blogger, thực sự của CSS3 với sự kết hợp của JQuery. Làm cho Blogger Blogspot của bạn thêm đẹp và hấp dẫn.
Tôi nghĩ bạn sẽ thích Menu này, vì vậy đầu tiên chúng ta hãy nhìn vào bản demo trực tiếp của nó.
MBL Animated CSS3 nhiều Drop Down Menu (DEMO)
Các tính năng của CSS3 Drop Down Menu:
Đây là một trong những Drop CSS3 xổ xuống, nó độc đáo từ tất cả các menu. Chúng ta hãy nhìn vào một vài trong số các tính năng của nó.
Tạo me nu Blogger chỉ cần theo các bước sau:
Bước 1: Đầu tiên Tới Blogger.com >> Blog của bạn
Bước 2: Chọn Layout >> Thêm Tiện ích (nơi mà bạn muốn để chèn của bạn thả xuống).
Bước 3: Sau đó, Click vào HTML / JavaScript >> và dán đoạn mã sau.
<- MBL Animated CSS3 nhiều đơn thả xuống cho Blogger ->
<link rel="stylesheet" type="text/css" href="http://mybloggerlab.com/StyleSheet/MBLNAV.css"/>
<nav id="mbl-menu-wrap">
<ul id="mbl-menu">
<li> <a href=" URL-Here "> Trang chủ </ a> </ li>
<li>
<a href=" URL-Here "> Categories </ a>
<ul>
<li><a href=" URL-Here "> CSS </ a><ul><li> <a href=" URL-Here "> mục 11 </ a> </ li><li> <a href=" URL-Here "> khoản 12 </ a> </ li><li> <a href=" URL-Here "> Khoản 13 </ a> </ li><li> <a href=" URL-Here "> mục 14 </ a> </ li></ Ul></ Li><li><a href=" URL-Here "> Thiết kế đồ họa </ a><ul><li> <a href=" URL-Here "> mục 21 </ a> </ li><li> <a href=" URL-Here "> khoản 22 </ a> </ li><li> <a href=" URL-Here "> mục 23 </ a> </ li><li> <a href=" URL-Here "> mục 24 </ a> </ li></ Ul></ Li><li><a href=" URL-Here "> Phát triển các công cụ </ a><ul><li> <a href=" URL-Here "> mục 31 </ a> </ li><li> <a href=" URL-Here "> mục 32 </ a> </ li><li> <a href=" URL-Here "> mục 33 </ a> </ li><li> <a href=" URL-Here "> khoản 34 </ a> </ li></ Ul></ Li><li><a href=" URL-Here "> Thiết kế web </ a><ul><li> <a href=" URL-Here "> mục 41 </ a> </ li><li> <a href=" URL-Here "> mục 42 </ a> </ li><li> <a href=" URL-Here "> mục 43 </ a> </ li><li> <a href=" URL-Here "> khoản 44 </ a> </ li></ Ul></ Li></ Ul></ Li><li><a href=" URL-Here "> làm việc </ a><ul><li> <a href=" URL-Here "> Work1 </ a> </ li><li> <a href=" URL-Here "> Work2 </ a> </ li><li> <a href=" URL-Here "> Work3 </ a> </ li><li> <a href=" URL-Here "> Work4 </ a> </ li></ Ul></ Li><li> <a href=" URL-Here "> Khoảng </ a> </ li><li> <a href=" URL-Here "> Liên hệ </ a> </ li> <li> <a href="http://www.mybloggerlab.com"> MyBloggerLab </ a> </ li> </ ul></ Nav><script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"> </ script><script type="text/javascript">$ (Function () {if ($. browser.msie && $ browser.version.substr (0,1) <7){$ ('Li') ('ul'). Mouseover (function () {$ (This) trẻ em ('ul') css ('tầm nhìn', 'nhìn thấy').;}). Mouseout (function () {$ (This) trẻ em ('ul') css ('tầm nhìn', 'ẩn');})}/ * Di động * /$ ('# MBL-menu-wrap) Thêm tiền tố (' <div id="mbl-menu-trigger"> MBL-Menu </ div> ');$ ("# MBL-menu-trigger") trên ("click", function () {$ ("# Menu") slideToggle ();});/ / IPadvar isiPad = navigator.userAgent.match (/ iPad / i) = null;nếu (isiPad) $ ('# MBL-menu ul') addClass (không chuyển đổi);});</ Script>
Để chèn linh theo sự lựa chọn của bạn thay thế URL-Đây
Đừng quên thay địa chỉ blog của bạn nhé http://www.
Customizating widget này rất đơn giản nhưng vẫn còn để làm cho nó dễ dàng hơn chúng tôi đã nêu bật những yếu tố cần phải được thay đổi tên chủ đề.
Bước 4: Sau khi tùy biến widget của bạn chỉ cần lưu mẫu của bạn bằng cách nhấn nút Save.
Bước 5: Bây giờ đi và kiểm tra blog của bạn, bạn sẽ thấy kết quả tuyệt vời.
Các bạn thấy hay thì cho ý kiến nha, Chúc bạn thành công!
