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

►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

<link rel="StyleSheet" href="http://buonmuonkiepsauthienthu.webng.com/dtree.css" type="text/css" />
<script type="text/javascript" src="http://buonmuonkiepsauthienthu.webng.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">

<!-- tuy chon co the bo -->

<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>

<!-- tuy chon co the bo -->


<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');