Loading post navigation ...
 
 

Pro page

12
Nhận xét

Tạo menu dạng cây thư mục vào blog

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

Make a D'tree Menu at Blog
[FD's Blog] -Trước khi giới thiệu bài viết này, Ngankvn có góp ý là các blogger đa phần xài menu ngang có sổ dọc xuống. Và xin giới thiệu thêm là menu ngang dạng sổ xuống mình có giới thiệu rồi, và bài viết này mình xin bổ xung thêm một kiểu menu khác vào trong kho thủ thuật blog của mình. Người này thích cái này, người nọ thích cái khác, cho nên thủ thuật này không phải là không cần thiết.

Hình ảnh minh họa:


►Bây giờ bắt đầu cài đặt:
1. Đăng nhập blog
2. Vào Bố Cục (Layout)
3. Vào chỉnh sửa Code HTML (Edit HTML)
4. Chèn đọan code CSS bên dưới vào ngay trên dòng </head>

<link rel="StyleSheet" href="http://ahom24.googlepages.com/dtree.css" type="text/css" />

<script type="text/javascript" src="http://ahom24.googlepages.com/dtree.js"></script>


5. Save template lại.
6. Vào Bố cục -> Phần tử trang -> tạo một Widget HTML/Javascript.
7. Chèn đọan code bên dưới vào Widget vừa tạo:

<div class="dtree">

<!-- Có thể bỏ đọan code này nếu bạn muốn -->

<p><a href="javascript: d.openAll();"><img src="http://amen24.googlepages.com/plus.gif"><b>Open all</b></a> | <a href="javascript: d.closeAll();"><img src="http://amen24.googlepages.com/minus.gif"><b>Close all</b></a></p>

<!-- Có thể bỏ đọan code này nếu bạn muốn -->


<script type="text/javascript">

d = new dTree('d');

d.add(0,-1,'Home','http://yourblog.blogspot.com');


d.add(1,0,'Main Menu 1')

d.add(2,0,'Main Menu 2','','','','URL Image of Main Menu 2');
d.add(10,2,'Sub Menu 2.1','Link Sub Menu 2.1','','','Link Image of Sub Menu 2.1');
d.add(20,2,'Sub Menu 2.2','Link Sub Menu 2.2','','','Link Image of Sub Menu 2.2');
d.add(30,2,'Sub Menu 2.3','Link Sub Menu 2.3','','','Link Image of Sub Menu 2.3');
d.add(40,2,'Sub Menu 2.4','Link Sub Menu 2.4','','','Link Image of Sub Menu 2.4');
d.add(50,2,'Sub Menu 2.5','Link Sub Menu 2.5','','','Link Image of Sub Menu 2.5');


d.add(3,1,'Main Menu 3','');
d.add(10,3,'Sub Menu 3.1','Link Sub Menu 3.1');
d.add(20,3,'Sub Menu 3.2','Link Sub Menu 3.2');
d.add(30,3,'Sub Menu 3.3','Link Sub Menu 3.3');
d.add(40,3,'Sub Menu 3.4','Link Sub Menu 3.4');
d.add(50,3,'Sub Menu 3.5','Link Sub Menu 3.5');

d.add(4,1,'Main Menu 4');
d.add(10,4,'Sub Menu 4.1','Link Sub Menu 4.1');
d.add(20,4,'Sub Menu 4.2','Link Sub Menu 4.2');
d.add(30,4,'Sub Menu 4.3','Link Sub Menu 4.3');
d.add(40,4,'Sub Menu 4.4','Link Sub Menu 4.4');
d.add(50,4,'Sub Menu 4.5','Link Sub Menu 4.5');



d.add(5,0,'Main Menu 5','Link URL Main Menu 5','{Your Text}','','Link Image for Main Menu 5');
d.add(6,0,'Main Menu 6','Link URL Main Menu 6','{Your Text}','','Link Image for Main Menu 6');
d.add(7,0,'Main Menu 7','Link URL Main Menu 7','{Your Text}','','Link Image for Main Menu 7');

d.add(8,0,'Recycle Bin','Link URL','Recycle bin','','http://amen24.googlepages.com/trash.gif');

document.write(d);

</script>
</div>


8. Save lại.

►Đọc hiểu code:
- Các dòng code màu đỏ là link liên kết của bạn.
- Các dòng code màu xanh là link ảnh (icon cho menu)
- http://yourblog.blogspot.com : thay bằng blog của bạn.
- Để thêm các menu chính bạn thêm code sau:

d.add(9,0,'Main Menu 9','Link URL Main Menu 9','{Your Text}','','Link Image for Main Menu 9');
d.add(10,0,'Main Menu 10','Link URL Main Menu 10','{Your Text}','','Link Image for Main Menu 10');

- Và thêm các menu phụ thì bạn thêm như sau, ví dụ menu phụ cho Main Menu 9:

d.add(9,0,'Main Menu 9','Link URL Main Menu 9','{Your Text}','','Link Image for Main Menu 9');
d.add(10,9,'Sub Menu 9.1','Link Sub Menu 9.1');
d.add(20,9,'Sub Menu 9.2','Link Sub Menu 9.2');
d.add(30,9,'Sub Menu 9.3','Link Sub Menu 9.3');
d.add(40,9,'Sub Menu 9.4','Link Sub Menu 9.4');
d.add(50,9,'Sub Menu 9.5','Link Sub Menu 9.5');

Lưu ý là các số 10, 20, 30 phải liên tục.

►Một lưu ý cuối cùng: có thể tiện ích sẽ không hiển thị được, điều này là do 2 link:

http://ahom24.googlepages.com/dtree.css

http://ahom24.googlepages.com/dtree.js

Hết Bandwidth. do đó nếu chắc thì bạn download 2 file này về và up lên host của riêng mình (tránh trường hợp xài chung sẽ dẫn đến hết bandwidth).

Nếu hết bandwidth mà bạn vẫn chưa down được, có thể vào đây tìm, (gõ từ khóa dtree.cssdtree.js sẽ có kết quả)
Chúc các bạn thành công.
Nguồn BlogTutotail


Enter your mail address:

12

Ngankvn ®

Hầu hết các Blogger ( trong đó có mình ) bây giờ chỉ đi tìm những Menu ngang dạng xổ ( chạy tốt trên nhiều trình duyệt ) thôi !!!!

fandung

Các menu ngang dạng sổ mình có giới thiệu rồi, cái này mình giới thiệu thêm.

Càng nhiều càng phong phú hơn :D

Oliver

Mí cái này có thể dùng 123flash làm cũng đc và khá nhanh nữa.
@Ngankvn: tui thì thấy khác, dạng xổ dọc này tạo cảm giác quen thuộc cho người dùng trong Windows explorer. Nhưng cũng chỉ là cách nhìn mà thui, cái chung vẫn là dạng ngang xổ dọc.:d

[!!]Mưa[ -(¯`v´¯)--(¯`v´¯)»]Ngâu[!!]

đúng cái đang cần >"< nhưng không down dc và search ko ra T_T. Anh Dũng giúp em với

Hội Kết Phong

thanks.
Hãy post cho mình một vài thủ thuật nữa nhé. Mình mới tập làm blogspot nên còn yếu lắm.

jimmyha

bạn có thể hướng dẫn lại cách tạo menu ngang được không, tôi không thể liên kết bài viết với các mục trong menu. vậy tôi phải làm thế nào. cám ơn bạn rất nhiều

thoisuqrt

Bạn có thể giúp mình tạo menu ngang được không ?

Lê Hoàng Chiến

Làm thì được nhưng chữ nhỏ quá làm sao chỉnh lại font-size cho menu đây hả Dũng?

Lê Hoàng Chiến

Làm thì được nhưng chữ nhỏ quá làm sao chỉnh lại font-size cho menu đây hả Dũng?

Thao Trinh

Rốt cuộc thì vẫn là tạo menu bằng tay chứ nó ko tự động như CMS khác.
Không biết cái này có hiển thị số bài viết như nhãn mặc định ko anh fandung nhỉ ?

Hoàng Tiểu Cát

không thể làm được....

Nguyen Phuong

Đẹp nhưng chỉ chạy được trên Firefox híc. Uổng quá! :(



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home