Cara membuat menu DTree

Menu dTree??? mungkin banyak dari sobat blogger yang masih belum tahu tentang Menu dTree. 

Menu dTree adalah menu yang menyerupai/mirip menu pada windows explore, dan menu ini dapat kita tampilkan ke dalam web/blog kita.

Nah bagi sobat-sobat blogger yang ingin menampilkan Menu dTree pada blog/webnya, sobat-sobat bisa langsung ikuti cara membuat Menu dTreedibawah ini. 

1. login blog
2. rancangan -> edit HTML cari kode </head>
3. lalu taruh kode dibawah ini diatas kode </head>

<link href='http://vikrymadz.googlecode.com/files/dtree.css' rel='StyleSheet' type='text/css'/>
<script src='http://vikrymadz.googlecode.com/files/createdtree.js' type='text/javascript'/>

4. simpan template
5. lalu buka menu Elemen Laman -> tambah Gadget (HTML/JavaScript)
6. lalu masukkan kode dibawah ini

<div class="dtree">
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'::Blogging Is My Life::');
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 sobat.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 sobat.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 sobat.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
d.add(10,0,'File[non-folder]',' link sobat.html');
d.add(11,0,'File[non-folder]',' link sobat.html');
d.add(12,0,'File Single',' link sobat.html','','','img/trash.gif');
document.write(d);
//-->
</script>
</div>

Preview :

NB :

1,o ===>> Artinya adalah Folder Utama

2,1 ===>> Dan ini adalah Sub dari folder utama, oleh karena itu saya memberi warna angka satu dengan warna yang sama, yaitu merah. Kalau teman2 ingin menambahkan sub folder utama yang satu lagi di bawahnya, maka nanti teman2 tulis 3,1 atau d.add(3,1,'Sub Folder 02',' #.html'); (karena pada intinya folder tersebut masih mengikuti angka satu/folder utama)

3,2 ===>> Artinya adalah sub dari sub folder utama, bagian yang ini bisa jadi folder dan juga bisa jadi file. Apa maksudnya? Maksudnya adalah, pada intinya semua file yg memilki sub akan menjadi folder, sedangkan yg tidak memilki sub maka akan menjadi file selamanya (selama belum ada sub yang menumpang kepadanya), kalau teman2 bingung, teman2 bisa memperhatikan preview/gambar di atas. Coba dilihat tuh, setiap jajaran ketiga pasti file kan? Nah itu karena yg jajaran ketiga adalah bagian yg terakhir alias bagian yg sudah tidak memilki sub lagi.

Nah, untuk yg masalah pembuatan folder dan file selesai...

Selanjutnya masalah yg berada pada bagian kanan, yaitu tulisan "#.HTML" dan "Link anda.HTML"

Kenapa pada bagian yg saya tandai dengan warna merah saya beri tanda "#" bukannya menggunakan "Link anda"?

Itu semua karena terletak pada fungsi masing2. Apa maksudnya...

Maksudnya yang telah saya tandai dengan "#", artinya adalah folder utama atau folder sub utama. Dengan begitu para pengunjung langsung tahu kalau itu bukan file akan tetapi pengantar file alias folder. Ini semua merupakan pertimbangan saya pribadi, mungkin beberapa teman blogger menganggap menu ini benar2 mirip menu explore, memang mirip tapi hanya tampilannya serta sifatnya yg menyerupai menu dropdown, akan tetapi bedanya pasti teman2 tahu...Kalau di menu explore kita bisa membuka folder dengan cara mengklik tulisannya, misal: My Documents atau juga bisa dengan cara mengklik tanda plus-minus yang terletak pada samping kirinya. Akan tetapi untuk menu dropdown ini beda, kita hanya bisa mengklik tanda plus-minusnya saja untuk bisa menampilkan menu yg berada di dalamnya (kalau gak percaya, maka bisa dicoba menu dTree di sidebar kanan blog ini). Bagaimana teman2 sudah ada bayangankan...?

Lalu untuk tulisan "link sobat.HTML" itu bisa diganti dengan link anda. Dan pastikan kalau yang anda sisipi dengan link tersebut sudah merupakan sebuah link yg tidak bersub lagi, maksudnya bukan folder.

selamat mencoba ^_^ 


copas vickymadz.blogspot.com