Cara membuat Menu dTree

Salam Sejahtera!!! Kali ini saya mau share tentang menu dTree, yaitu suatu menu yang mirip dengan menu explore dalam komputer anda. Dan menu ini dapat anda tampilkan ke dalam web/blog anda. Nah, trik ini bersumber dari Destroydrop.com.

Untuk memulai memasang menu tersebut, mari anda ikuti langkah-langkahnya sbb:

1. Seperti biasa silahkan login ke dasbor blogger anda, Lalu klik Tata Letak >>Edit HTML
2. Silahkan copy code tag dibawah ini, lalu pastekan diatas kode tag </head>

<link href='https://sites.google.com/site/tutorialbloghost/my_css/dtree.css' rel='StyleSheet' type='text/css'/>
<script src='https://sites.google.com/site/tutorialbloghost/my_javascript/createdtree.js' type='text/javascript'/>

3. Klik tombol Simpan Template anda
4. Klik tombol Select All untuk highlight code tag 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,'Tutorial Blog');
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>

5. Lalu klik Tata Letak >> Tambah Gadget HTML/JavaScript dan pastekan kode diatas kebody gadget tsb

Dan untuk previewnya silahkan klik tombol demo berikut

Selesai dan selamat mencoba