Tạo dropdowm menu cho blogger cực kỳ dễ
Bước 1.
Đăng nhập vào Blogger, chọn "Thiết kế" -> "Chỉnh sửa HTML"
Bước 2:
Tìm thẻ
và paste đoạn code dưới đây vào trước nó.
Xong rồi bấm "Lưu mẫu". Bạn cũng nên chỉnh sửa màu sắc lại (background:...) cho hợp với blog của bạn.
Bước 3.
Vào "Thiết kế" -->"Phần tử trang" -->"Thêm tiện ích" (Phía trên "Bài đăng trong blog") chọn "HTML/Javascript" bạn paste đoạn code dưới đây vào ô "Nội dung" còn phần tiêu đề để trống.
Vậy là bạn đã có một menu đổ xuống rồi đó.![]()
* Chú ý, trong đoạn code ở Bước 3 bạn đặt lại tên cho các Menu con: Javascrip, Drop Down Menu, jQuery Plugin,... theo ý thích của bạn (thường là chủ đề, nhãn trong blog của bạn). Và thay dấu # trong a href="#" bằng đường dẫn đến "Nhãn" tương ứng.http://www.blogger.com/img/blank.gif
Nguồn ruabien.net
Đăng nhập vào Blogger, chọn "Thiết kế" -> "Chỉnh sửa HTML"
Bước 2:
Tìm thẻ
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| </head> |
và paste đoạn code dưới đây vào trước nó.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!--jquery-DD-Menu-Starts--> | |
| <style type="text/css"> | |
| /* menu styles */ | |
| #jsddm | |
| { margin: 0; | |
| padding: 0} | |
| #jsddm li | |
| { float: left; | |
| list-style: none; | |
| font: 12px Tahoma, Arial} | |
| #jsddm li a | |
| { display: block; | |
| background: #324143; /*DARK-GREEN*/ | |
| padding: 5px 12px; | |
| text-decoration: none; | |
| border-right: 1px solid white; | |
| width: 70px; | |
| color: #EAFFED; | |
| white-space: nowrap} | |
| #jsddm li a:hover | |
| { background: #24313C} | |
| #jsddm li ul | |
| { margin: 0; | |
| padding: 0; | |
| position: absolute; | |
| visibility: hidden; | |
| border-top: 1px solid white} | |
| #jsddm li ul li | |
| { float: none; | |
| display: inline} | |
| #jsddm li ul li a | |
| { width: auto; | |
| background: #A9C251; /*LIGHT-GREEN*/ | |
| color: #24313C} | |
| #jsddm li ul li a:hover | |
| { background: #8EA344} | |
| </style> | |
| <!-- script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script --> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script> | |
| <script type="text/javascript"> | |
| var timeout = 500; | |
| var closetimer = 0; | |
| var ddmenuitem = 0; | |
| function jsddm_open() | |
| { jsddm_canceltimer(); | |
| jsddm_close(); | |
| ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');} | |
| function jsddm_close() | |
| { if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');} | |
| function jsddm_timer() | |
| { closetimer = window.setTimeout(jsddm_close, timeout);} | |
| function jsddm_canceltimer() | |
| { if(closetimer) | |
| { window.clearTimeout(closetimer); | |
| closetimer = null;}} | |
| $(document).ready(function() | |
| { $('#jsddm > li').bind('mouseover', jsddm_open); | |
| $('#jsddm > li').bind('mouseout', jsddm_timer);}); | |
| document.onclick = jsddm_close; | |
| </script> | |
| <!--jquery-DD-Menu-Stops-http://ruabien.net--> |
Xong rồi bấm "Lưu mẫu". Bạn cũng nên chỉnh sửa màu sắc lại (background:...) cho hợp với blog của bạn.
Bước 3.
Vào "Thiết kế" -->"Phần tử trang" -->"Thêm tiện ích" (Phía trên "Bài đăng trong blog") chọn "HTML/Javascript" bạn paste đoạn code dưới đây vào ô "Nội dung" còn phần tiêu đề để trống.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!--BODY-CODE--> | |
| <ul id="jsddm"> | |
| <li><a href="#">JavaScript</a> | |
| <ul> | |
| <li><a href="#">Drop Down Menu</a></li> | |
| <li><a href="#">jQuery Plugin</a></li> | |
| <li><a href="#">Ajax Navigation</a></li> | |
| </ul> | |
| </li> | |
| <li><a href="#">Effect</a> | |
| <ul> | |
| <li><a href="#">Slide Effect</a></li> | |
| <li><a href="#">Fade Effect</a></li> | |
| <li><a href="#">Opacity Mode</a></li> | |
| <li><a href="#">Drop Shadow</a></li> | |
| <li><a href="#">Semitransparent</a></li> | |
| </ul> | |
| </li> | |
| <li><a href="#">Navigation</a></li> | |
| <li><a href="#">HTML/CSS</a></li> | |
| <li><a href="http://blogger.com">Blogger Help</a></li> | |
| </ul> |
Vậy là bạn đã có một menu đổ xuống rồi đó.
* Chú ý, trong đoạn code ở Bước 3 bạn đặt lại tên cho các Menu con: Javascrip, Drop Down Menu, jQuery Plugin,... theo ý thích của bạn (thường là chủ đề, nhãn trong blog của bạn). Và thay dấu # trong a href="#" bằng đường dẫn đến "Nhãn" tương ứng.http://www.blogger.com/img/blank.gif
Nguồn ruabien.net
Tags: blogger
Đăng ký:
Đăng Nhận xét (Atom)
Share your views...
1 Respones to "Tạo dropdowm menu cho blogger cực kỳ dễ"
Cám ơn bài của bạn, nhưng mà sao tạo drop down rồi nhưng vẫn ko chọn vào được các mục con bên dưới của nó. Đa nhập đường linh rôi, vẫn ko được?
lúc 11:50 25 tháng 12, 2011
Đăng nhận xét
Khi đăng nhận xét, bạn vui lòng viết Tiếng Việt có dấu và nhận xét đó phải liên quan đến bài viết. Rất vui vì bạn đã đọc bài và cho ý kiến.