How to Create dTree Navigation Menu

Do you want Great Navigation for your Blog? I suggest you to use this stuff! We called dTree Navigation Menu. Maybe you have ever see this Menu. That's right! Like Windows Explorer Navigation Menu. You must have to try this. Just by following these simple steps, you will have Great dTree Navigation Menu on Your Great Blog:

1. Login to your Blogger Account

2. Go to Layout tab

3. Click Edit HTML

4. Download Full Template for your Back Up

5. Copy the code below, and paste before </head> (You can find this code by Ctrl+F)

<link rel="StyleSheet" href="http://www.hotlinkfiles.com/files/2669839_ry7co/dtree.css" type="text/css" />
<script type="text/javascript" src="http://www.hotlinkfiles.com/files/2669840_otete/dtree.js"></script>

6. SAVE TEMPLATE

7. Go to Page Elements

8. Click Add a Gadget

9. Choose Add HTML/JavaScript

10. Fill the code below to the Gadget

<div class="dtree">

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

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

d = new dTree('d');

d.add(0,-1,'Home','http://bloggertrick4u.blogspot.com');


d.add(1,0,'Example 1')

d.add(3,1,'Example 1.1','');
d.add(10,3,'Example 1.1.1','http://bloggertrick4u.blogspot.com/2009/05/blogger-trick-how-to-create-blog.html');
d.add(20,3,'Example 1.1.2','http://bloggertrick4u.blogspot.com/2009/05/blogger-trick-how-to-setting-blog.html');
d.add(30,3,'Example 1.1.3','http://bloggertrick4u.blogspot.com/2009/05/blogger-trick-how-to-select-and-use.html');
d.add(40,3,'Example 1.1.4','http://bloggertrick4u.blogspot.com/2009/05/blogger-trick-how-to-setting-fonts-and.html');
d.add(50,3,'Example 1.1.5','http://bloggertrick4u.blogspot.com/2009/05/blogger-trick-how-to-post.html');
d.add(60,3,'Example 1.1....','http://bloggertrick4u.blogspot.com/2009/05/blogger-trick-how-to-upload-photos-to.html');

d.add(5,1,'Example 1.2');
d.add(10,5,'Example 1.2.1','http://bloggertrick4u.blogspot.com/2009/05/blogger-trick-how-to-post-html-codes.html');
d.add(20,5,'Example 1.2.2','http://bloggertrick4u.blogspot.com/2009/05/blogger-trick-how-to-setting-my-profile.html');
d.add(30,5,'Example 1.2.3','http://bloggertrick4u.blogspot.com/2009/05/blogger-trick-how-to-upload-photo-to.html');
d.add(40,5,'Example 1.2.4','http://bloggertrick4u.blogspot.com/2009/06/blogger-trick-bloging-tips-for-beginner.html');
d.add(50,5,'Example 1.2.5','http://bloggertrick4u.blogspot.com/2009/05/blogger-trick-how-to-create-banner.html');
d.add(60,5,'Example 1.2....','http://bloggertrick4u.blogspot.com/2009/05/blogger-trick-how-to-create-animated.html');

d.add(2,0,'Example 2','','','','http://i717.photobucket.com/albums/ww176/neorie/D-Tree/globe.gif','http://i717.photobucket.com/albums/ww176/neorie/D-Tree/globe.gif');
d.add(10,2,'Example 2.1','http://bloggertrick4u.blogspot.com','','','http://i717.photobucket.com/albums/ww176/neorie/D-Tree/user_icon.gif');
d.add(20,2,'Example 2.2','http://21hotbiker.blogspot.com','','','http://i717.photobucket.com/albums/ww176/neorie/D-Tree/user_icon.gif');

d.add(4,0,'My friendster!','http://profiles.friendster.com/rie21hotbiker','My Friendster!','','http://i717.photobucket.com/albums/ww176/neorie/D-Tree/my_friendster.gif');
d.add(6,0,'My Facebook!','http://www.facebook.com/Rie21','My Facebook!','','http://i717.photobucket.com/albums/ww176/neorie/D-Tree/my_facebook.png');


document.write(d);

//-->
</script>

</div>

11. SAVE

12. Now you can see the Result

13. But you must edit the code in the Gadget with yours

 

Good Luck!