Membuat Menu dTree Bergaya Windows Explorer

Berbeda dengan gaya menu sebelumnya yang pernah saya posting tentang cara membuat menu dropdown dengan JavaScript, kali ini saya ingin berbagi gaya menu lain dengan sobat blogger yang telah sudi mampir ke blog ini. Berhubung gaya ini tergolong unik (versi saya), maka tak ada salahnya bila pengalaman ini saya bagikan untuk dipraktekan sobat blogger lainnya, jika berminat.

Bila kita sering membuka komputer, windows explorer tentu sangat akrab di mata kita. Seperti itulah menu ini terlihat nantinya. 

Screenshoot

Berikut langkah-langkahnya:

1. Masuk pada halaman EDIT HTML, kemudian letakkan kode berikut di atas kode </head>

<link rel="StyleSheet" href="http://sites.google.com/site/t4belajarblogger/js_t4belajarblogger/dtree.css" type="text/css" /><script type="text/javascript"
src="http://sites.google.com/site/t4belajarblogger/js_t4belajarblogger/createdtree.js"></script>

Kemudian klik SAVE TEMPLATE.

2. Masuk pada RANCANGAN kemudian ELEMEN LAMAN setelah itu klik TAMBAH GADGET, pilihlah GADGET HTML. Setelah itu, pastekan kode berikut 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,'Tips Komputer & Internet');
d.add(1,0,'Belajar Blogger','#.html');
d.add(2,1,'Tips Blogger',' #.html');
d.add(3,2,'Tahap Awal Membuat Blog','http://soe86.blogspot.com/search/label/A.%20Tahap%20Awal%20Membuat%20Blog');
d.add(4,2,'Tahap Lanjutan dalam Bloging','http://soe86.blogspot.com/search/label/B.%20Tahap%20Lanjutan%20dalam%20Bloging');
d.add(5,2,'Tahap Profesional dalam Bloging','http://soe86.blogspot.com/search/label/C.%20Tahap%20Profesional%20dalam%20Bloging');
d.add(6,0,'Download',' #.html');
d.add(7,6,'Trik Mendownload',' #.html');
d.add(8,7,'Aneka Trik Mendownload','http://soe86.blogspot.com/search/label/Trik%20Mendownload');
d.add(9,0,'Internet Murah',' #.html');
d.add(10,9,'Tips Internet Murah',' #.html');
d.add(11,10,'Aneka Tips Internet Murah','http://soe86.blogspot.com/search/label/Tips%20Internet%20Murah','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
d.add(12,0,'DAFTAR ISI FULL','http://soe86.blogspot.com/2010/04/daftar-isi.html');
d.add(13,0,'Promosi Blog','http://soe86.blogspot.com/2010/04/manfaat-tukaran-link.html');
d.add(14,0,'Belajar Otodidak','http://soe86.blogspot.com/2010/07/belajar-otodidak.html');
d.add(15,0,'<blink>Mau Bikin Menu Begini?</blink>','http://skocikita.blogspot.com/2011/07/membuat-menu-dtree-bergaya-windows.html','','','img/trash.gif');
document.write(d);
//-->
</script>
</div>

Keterangan:

Yang berwarna biru adalah nama judul label atau judul posting, sedangkan yang berwarna merah adalah link label atau postingnya. Silahkan sobat ubah sesuai judul dan linknya masing-masing.