1. Sign in to Blogger > Layout > Edit HTML and look for

<b:skin><![CDATA[/*

Now copy following code and place it to ABOVE <b:skin><![CDATA[/*

<script src='http://sites.google.com/site/freebloggerhelpbiz/freebloggerhelp/dtree.js' type='text/javascript'/>


Save Template.

2. Now go to Add Page Element > Add A Gadget > HTML/JAVA Script. Add following code there and save.

<style type="text/css">

/*--------------------------------------------------|
| dTree 2.05 | www.destroydrop.com/javascript/tree/ |
|---------------------------------------------------|
| Copyright (c) 2002-2003 Geir Landrö |
|--------------------------------------------------*/

.dtree {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
width:480px;
color: #000;
white-space: nowrap;
}
.dtree img {
border: 0px;
vertical-align: middle;
}
.dtree a {
color: #333;
text-decoration: none;
}
.dtree a.node, .dtree a.nodeSel {
white-space: nowrap;
padding: 1px 2px 1px 2px;
}
.dtree a.node:hover, .dtree a.nodeSel:hover {
color: #333;
text-decoration: underline;
}
.dtree a.nodeSel {
background-color: #c0d2ec;
}
.dtree .clip {
overflow: hidden;
}

</style>
<div class="dtree">

<p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>

<script type="text/javascript">
<!--

d = new dTree('d');

d.add(0,-1,'My example tree');
d.add(1,0,'Node 1','example01.html');
d.add(3,1,'Node 1.1','example01.html');
d.add(5,3,'Node 1.1.1','example01.html');
d.add(6,5,'Node 1.1.1.1','example01.html');
d.add(2,0,'Node 2','example01.html');
d.add(4,0,'Node 3','example01.html');
d.add(7,0,'Node 4','example01.html');
d.add(8,1,'Node 1.2','example01.html');

document.write(d);
//-->
</script>
</div>
It's done. Now you have to add labels and their links to above code manually.

Concentrate on

d = new dTree('d');

d.add(0,-1,'My example tree');

d.add(1,0,'Node 1','example01.html');
d.add(3,1,'Node 1.1','example01.html');
d.add(8,1,'Node 1.2','example01.html');
d.add(5,3,'Node 1.1.1','example01.html');
d.add(6,5,'Node 1.1.1.1','example01.html');

d.add(2,0,'Node 2','example01.html');

d.add(4,0,'Node 3','example01.html');

d.add(7,0,'Node 4','example01.html');

What you got? Nothing!! OK. Here is the Explanation. In the following code

d.add(1,0,'Node 1','example01.html');

There are two numbers after d.add. First number is of sub label itself and second number is of parent label.
You will have to experiment yourself to understand it. Add the name of label and link of that label as follows.

d.add(1,0,'Node 1','example01.html');

will be


d.add(1,0,'Name of Label','Link of that Label');

<style type="text/css">

/*--------------------------------------------------|
| dTree 2.05 | www.destroydrop.com/javascript/tree/ |
|---------------------------------------------------|
| Copyright (c) 2002-2003 Geir Landrö |
|--------------------------------------------------*/

.dtree {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
width:480px;
color: #000;
white-space: nowrap;
}
.dtree img {
border: 0px;
vertical-align: middle;
}
.dtree a {
color: #333;
text-decoration: none;
}
.dtree a.node, .dtree a.nodeSel {
white-space: nowrap;
padding: 1px 2px 1px 2px;
}
.dtree a.node:hover, .dtree a.nodeSel:hover {
color: #333;
text-decoration: underline;
}
.dtree a.nodeSel {
background-color: #c0d2ec;
}
.dtree .clip {
overflow: hidden;
}

</style>
<div class="dtree">

<p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>

<script type="text/javascript">
<!--

d = new dTree('d');

d.add(0,-1,'My example tree');
d.add(1,0,'Node 1','example01.html');
d.add(3,1,'Node 1.1','example01.html');
d.add(5,3,'Node 1.1.1','example01.html');
d.add(6,5,'Node 1.1.1.1','example01.html');
d.add(2,0,'Node 2','example01.html');
d.add(4,0,'Node 3','example01.html');
d.add(7,0,'Node 4','example01.html');
d.add(8,1,'Node 1.2','example01.html');

document.write(d);
//-->
</script>
</div>

اصل مراسلہ منجانب : احمد بلال بھائی نور الدین نے شاید اس پہ ایک مراسلہ لکھا تھا۔