Tạo menu dạng cây thư mục máy tính

5 Th12

►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&#8221; type=”text/css” />

<script type=”text/javascript” src=”http://ahom24.googlepages.com/dtree.js”></script&gt;

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 bn mun –>

<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 bn mun –>

<script type=”text/javascript”>

d = new dTree(‘d’);

d.add(0,-1,’Home’,’http://yourblog.blogspot.com&#8217;);

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&#8217;);

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:

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óadtree.cssdtree.js sẽ có kết quả)
Chúc các bạn thành công.


FANDUNG
Advertisements

Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Đăng xuất / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Đăng xuất / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Đăng xuất / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Đăng xuất / Thay đổi )

Connecting to %s

%d bloggers like this: