Cara Membuat Menu dTree

Menu dTree adalah menu yang mirip menu explore dan menu ini dapat kita tampilkan ke dalam web/blog. Teman-teman pasti sudah pada tahukan bagaimana bentuknya menu explore itu. Untuk penampilan menu dTree sendiri, daripada teman-teman ntarnya bingung di bawah ini ada demonya sebelum teman-teman ingin mencoba membuatnya bisa di lihat dulu. Oh ya...sebenarnya trik ini sudah lama sekali dibahas. dan trik ini bersumber dari Destroydrop.com, maklumlah saya juga masih belajar,, jadi harus memiliki referensi sebanyak-banyaknya. Ok, lanjuuut...

Untuk memulai memasang menu tersebut, seperti biasa login dulu ke akun blogger. Lalu klik Rancangan >> Klik Edit HTML

• cari script </head> kemudian letakkan script-script di bawah ini di atas script tadi.

<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 simpan template
• Selanjutnya kunjungi Elemen Laman >> Tambah gadget >> HTML/JavaScript >> copas script 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,'amcied Logica');
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','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
d.add(10,0,'File[non-folder]',' #.html');
d.add(11,0,'File[non-folder]',' #.html');
d.add(12,0,'File Single',' #.html','','','img/trash.gif');

document.write(d);

//-->
</script>

</div>

Selesai deh, gampangkan ;).. Semoga Bermanfaat...!!!