Menu d'Tree

Menu Dtree merupakan tampilan menu dengan cabang atau induk yang bercabang atau menu pohon. Menu ini tidak asing jika kita sering buka explorer, udah maksud. nah.. posting ini mengangkat hat tersebut yang diterapkan dalam blog. lansgung saja ke TKP

1. 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'/>
2. 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,'Menu DTree');
   d.add(1,0,'Folder 01','link anda.html');
   d.add(2,0,'Folder 02','link anda.html');
   d.add(3,0,'Folder 03','link anda.html');
   d.add(4,1,'Sub Folder 01','link anda.html');
   d.add(5,1,'Sub Folder 01','link anda.html');
   d.add(6,2,'Sub Folder 02','link anda.html');
   d.add(7,2,'Sub Folder 02','link anda.html');
   d.add(8,3,'Sub Folder 03','link anda.html');
   d.add(9,3,'Sub Folder 03','link anda.html');
   d.add(10,0,'File Single',' link anda.html','','','img/trash.gif');
   document.write(d);
   //-->
   </script>
   </div>
Keterangan : d.add(1,0,'Folder 01','link anda.html');
• 1 = Nomor urut penggunaan dtree ( urut kan saja )
• 0 = Nomor Variabele Induk yang akan di tuju
• Folder 01 = Keterangan dtree folder
• link anda.html = Alamat link yang dituju
3. Contoh Tampilan
   
   

   Buka Semua | Tutup Semua