Saturday, January 3, 2009

How to Create DTree Menu

DTree menu is the menu in the tree-shaped structures that you normally see in Windows Explorer. Yes, this function menu DTree almost the same as the other menus, in order to save space that is used when we post a lot, so it looks more beautiful, but to save space.


Menu DTree form is like this.




How to make it not too difficult, following the steps.

1. Once signed in to Blogger, go to Layout -> Edit HTML. Then, paste this code under the code <head>.

<link rel="StyleSheet" href="http://www.geocities.com/uddin_81/dtree.css" type="text/css" />
<script type="text/javascript" src="http://www.geocities.com/uddin_81/dtree.js"></script>

2. Then Save.
3. After the above step, paste the following code in your sidebar. How to paste the code in the sidebar see here.

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



- Description: Replace the word link with the URL you post.
- The first number should be unique and can not have the same
- The second number is a branch of the first number (note the number that have the same color).
- You can also change the icon iconnya with you. Sample code will be like this.

d.add(10,0,’Profile’,’link.html’,’’,’’,’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC-KbOrloi8XsDitiPFH4qepbCwlBu5fePlu1XX6CxOVJI6JSQ_XpQKVBiRq_6QMnXgizlWAjRMIJ6RNXSlPKYAVfPLAqLAHXG8wdUh1afjlyRrieBu8FVaKexf-jEfFabirb7z2ILNsft/s320/dtree.JPG’);

Change the address https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC-KbOrloi8XsDitiPFH4qepbCwlBu5fePlu1XX6CxOVJI6JSQ_XpQKVBiRq_6QMnXgizlWAjRMIJ6RNXSlPKYAVfPLAqLAHXG8wdUh1afjlyRrieBu8FVaKexf-jEfFabirb7z2ILNsft/s320/dtree.JPG picture you. Then save.

0 comments:

Post a Comment