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
Read More
Add your Comment
1 nhận xét
Không làm blog trên hostfree nữa.
Sau hai năm lăn lộn với host free thì cũng có ít nhiều kinh nghiệm. Việc sử dụng host free đã giúp mình thu thập được nhiều kiến thức bổ ích 
. Tuy nhiên hôm nay nghĩ mình sẽ thử khả năng tọc mạch của mình ở mức khác, đó là làm sao trên các điều khoản chung của blogger mà mình vẫn tùy biến được theo ý mình. Mình sẽ thử sức xem sao.
Read More
Add your Comment
0
nhận xét
