cara membuat menu dtree

Kali ini saya ingin berbagi lagi trik membuat menu dtree. Apakah menu dtree itu? Menu dtree yang saya maksud adalah menu yang menyarupai menu Windows explorer seperti pada image berikut:

Menu seperti ini bisa juga kita tampilkan pada web atau blog kita . Nah ingin membuat menu dtree seperti itu? Caranya mudah saja hanya dalam beberapa langkah:

Langkah pertama:

• Seperti biasa loggin ke akun blogger sobat=>  Lalu klik tata Letak =>> Klik Edit HTML
• Letakkan kode/ script berikut di atas kode </head>

<link href='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/dtree.css' rel='StyleSheet' type='text/css'/> 
<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/createdtree.js' type='text/javascript'/>

• Klik Simpan template.

Langkah ke dua:
Klik elemen halaman=> Tambah Gadget=> HTML=> Letakkan kode berikut pada kolom konten:

<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,'Indahnya Berbagi'); 
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 adalah seperti berikut ini
  
 

sekian dullu moga berman faad.

[ referensi ]

salam persahabatan [ instatus ]

Tweet