Membuat dtree menu

Membuat menu dtree. Apakah menu dtree itu? Menu dtree yang saya maksud adalah menu yang menyerupai menu Windows explorer seperti pada gambar di bawah berikut ini :

Menu seperti ini bisa juga kita tampilkan pada web atau blog kita seperti yang terlihat pada gambar dibawah ini :

Bagaimana cara membuatnya?
Langkah pertama:

1. Seperti biasa loggin ke akun blogger kita Lalu klik tata Letak, Klik Edit HTML
2. Letakkan kode/ script berikut di atas kode </head>

<link href='http://dtreemenu.googlecode.com/files/dtree.css' rel='StyleSheet' type='text/css'/>
<script src='http://dtreemenu.googlecode.com/files/buatdtree.js' type='text/javascript'/>
Klik Simpan template.

Langkah ke dua:
Klik elemen halaman, Tambah Gadget, HTML/JAVASCRIPT Letakkan kode berikut pada kolom tersebut:


<div class="dtree">
<p><a href="javascript: d.openAll();">Buka Semua</a> | <a href="javascript: d.closeAll();">Tutup Semua</a></p>
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'BWIMUSIC MENUS');
d.add(1,0,'Folder 01','#.html');
d.add(2,1,'Sub Folder 01',' #.html');
d.add(3,2,'Sub/file Sub Folder 01',' link anda.html');
d.add(4,0,'Folder 02',' #.html');
d.add(5,4,'Sub Folder 02',' #.html');
d.add(6,5,'Sub/file Sub folder 02',' link anda.html');
d.add(7,0,'Folder 03',' #.html');
d.add(8,7,'Sub Folder 03',' #.html');
d.add(9,8,'Sub/file Sub folder 03',' link anda.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
d.add(10,0,'File[non-folder]',' link anda.html');
d.add(11,0,'File[non-folder]',' link anda.html');
d.add(12,0,'File Single',' link anda.html','','','img/trash.gif');
document.write(d);
//-->
</script>
</div>

Maka Preview dari kode di atas di blog kita seperti berikut ini :

loading..

Selamat Mencoba