Membuat Menu D-Tree atau Menu Bercabang

Sobat ingin membuat menu Dtree? Apa itu Menu Dtree. Menu DTree sesuai namanya adalah sekumpulan arsip yang bercabang seperti cabang pohon. Menu Dtree terlihat seperti sobat membuka windows explorer. Menu Dtree digunakan bagi blogger yang mempunyai posting yang banyak karena Dtree ini dapat menghemat ruang. Jika sobat ingin membuatnya , ikuti langkah berikut:

1. Login ke blogger
2. Pilih Rancangan dan klik Edit HTML
3. Letakkan kode berikut diatas kode </head>

<!-- Menu DTree blogtrikdantips.blogspot -->
<link href='http://blogtrikdantips-blogspot.googlecode.com/files/dtree_blogtrikdantips.css' rel='StyleSheet' type='text/css'/>
<script src='http://blogtrikdantips-blogspot.googlecode.com/files/dtree_blogtrikdantips.js' type='text/javascript'/>

4. Kemudian Simpan template sobat.
5. Pindah ke Elemen Laman dan Tambah gadjet
6. Pilih HTML/JavaScript dan masukan kode dibawah ini:

<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,'Blog Trik dan Tips');
d.add(1,0,'Folder 01','#.html');
d.add(2,1,'Sub Folder 01',' #.html');
d.add(3,2,'Sub/file Sub Folder 01',' #.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',' #.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',' #.html','url_gambar.gif');
d.add(10,0,'File[non-folder]','#.html');
d.add(11,0,'File[non-folder]','#.html');
d.add(12,0,'File Single',' #.html','','','url_gambar.gif');
document.write(d);
//-->
</script>
</div>
<script src="http://blogtrikdantips-blogspot.googlecode.com/files/linkblog.js" type="text/javascript"/></script>

7. Simpan Template sobat.

Keterangan:
- Ganti tulisan "#.html" dengan link judul postingan
- Angka yang pertama harus unik tidak boleh ada yang sama (d.add(1,0,’Node 1’,’#.html’);
- Angka yang kedua merupakan cabang dari angka pertama (perhatikan angka-angka yang memiliki warna sama).
- Ganti tulisan berwarna hijau dengan url icon sobat.

DEMO - KLIK DISINI - 100% BERHASIL