Here's the step by step tutorial to create "DTree Menu" in blogger:
1. Login to Blogger, go to "Layout --> Edit HTML"
2. Put the code below over <head>
<link rel="StyleSheet" href="http://blogoholic.info/files/dtree/dtree.css" type="text/css" />
<script type="text/javascript" src="http://blogoholic.info/files/dtree/dtree.js"></script>
3. Save your editting.
4. Now edit end copy the below code then put on your sidebar.
<div class="dtree">
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'My example tree');
d.add(1,0,'Node 1','link.html');
d.add(2,1,'Node 1.1','link.html');
d.add(3,2,'Node 1.1.1','link.html');
d.add(4,3,'Node 1.1.1.1','link.html');
d.add(5,0,'Node 2','link.html');
d.add(6,5,'Node 2.1','link.html');
d.add(7,5,'Node 2.2','link.html');
d.add(8,0,'Node 3','link.html');
d.add(9,0,'Node 5','link.html');
document.write(d);
//-->
</script>
</div>
Change "link.html" with your own link.
The first number must be unique (d.add(1,0,'Node 1','link.html');
The second number is child of the number (look at the color).
You can add the below code to add a new node with your own image
d.add(10,0,'Profile','link.html','','','http://blogoholic.info/files/dtree/trash.gif');
change "http://blogoholic.info/files/dtree/trash.gif" with your own image.
it will be like this :
