Cara Membuat Menu dTree

Sebelumnya kita cari tahu dulu, Apa itu menu dTree? Menu dTree adalah menu yang mirip menu explore di windows explore yang akan kita tampilkan ke dalam web/blog kita. Sobat pasti sudah pada mengertikan dan tahukan bagaimana menu explore itu? (seperti gambar di samping kiri). Sobat juga bisa lihat penampilan menu dTree dibagian sidebar kanan blog ini. Bagaimana, udah tahu kan? Trik ini bersumber dari Destroydrop.com,Mari kita coba membuatnya di blog masing-masing.

Untuk memulai memasang menu tersebut, seperti biasa silahkan sobat login dulu ke akun blogger. Lalu klik tata Letak - Klik Edit HTML, jangan lupa centangi/beri tanda expand  ;

Taruh script 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>

Klik Simpan template.

Selanjutnya yang harus sobat lakukan adalah menaruh kode HTML dTree ke dalam gadget sidebar blog sobat. Caranya klik Tata Letak - Tambah Gadget HTML dan taruh kode HTML berikut ini :

<h2>Menu Blog Ini</h2>

<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,'T4belajarblogger');

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>

</div>

Hasil akan tampak seperti dibawah ini :

Coba sobat perhatikan perbedaan nomor yg berada di sisi kanan dan kiri. Yang berada di sisi kiri sesuai dengan urutan:
1
2
3
dst

Sedangkan yang berada di sisi kanan tidak beraturan.

Sebenarnya angka-angka tersebut dapat sobat baca seperti berikut ini:

1,o ===&gt;&gt; Artinya adalah Folder Utama

2,1 ===&gt;&gt; Dan ini adalah Sub dari folder utama, oleh karena itu saya memberi warna angka satu dengan warna yang sama, yaitu merah. Kalau sobat 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 ===&gt;&gt; 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 sobat bingung, sobat 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 sobat 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 sobat sudah ada bayangankan...?

Lalu untuk tulisan "link anda.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.


Bagaimana sobat.... dah bisa kan menu dtree ?, bagi sobat yang mungkin menemukan kesulitan...sobat bisa menganalisanya sendiri melalui kode HTML saya berikut ini, yang merupakan kode dari menu dTree saya yang berada di samping kananvlog ini ;

<h2>Menu Blog Ini</h2>

<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,'Ikhsan Gallery');

d.add(1,0,'Gallery Islami','#.html');

d.add(2,1,'Faedah Asmaul Husna','http://usegallery.blogspot.com/2010/10/faedah-asmaul-husna.html#more');

d.add(3,1,'99 NamaMU','http://usegallery.blogspot.com/2010/10/asma-ul-husna-fadhilat-serta-khasiatnya.html');

d.add(4,1,'Amalan Harian','http://usegallery.blogspot.com/2010/03/amalan-harian.html');

d.add(5,0,'Keuangan Daerah','#.html');

d.add(6,5,'Struktur APBD','http://usegallery.blogspot.com/2010/09/struktur-apbd.html#more');

d.add(7,5,'Struktur Pendapatan Daerah','http://usegallery.blogspot.com/2010/09/struktur-pendapatan-daerah.html#more');

d.add(8,5,'Tentang Keuangan Daereah','http://usegallery.blogspot.com/search/label/Keuangan%20Daerah');

d.add(9,0,'Gallery Kecil','#.html');

d.add(10,9,'Ngga Perawan Lagi','http://usegallery.blogspot.com/2010/08/alam-ku-ngga-perawan-lagi.html#more');

d.add(11,9,'Putri Intan','http://usegallery.blogspot.com/2010/09/kota-intan-martapura.html#more');

d.add(12,9,'Halte','http://usegallery.blogspot.com/search/label/HALTE');

d.add(13,0,'Gallery Trik dan Download','#.html');

d.add(14,13,'Diet ala Rosul','http://usegallery.blogspot.com/2010/04/diet-ala-rasulullah-saw.html#more');

d.add(15,13,'Curahan Hati Andy','http://usegallery.blogspot.com/2010/09/kumpulan-curahan-hati-andy-f-noya.html');

d.add(16,13,'Tips Trik Lainnya','http://usegallery.blogspot.com/search/label/TRIK%20TIPS');

d.add(17,0,'Gallery Banua','#.html');

d.add(18,17,'Bamega Kini','http://usegallery.blogspot.com/2010/09/bamega-kini.html');

d.add(19,17,'Bamega Dulu','http://usegallery.blogspot.com/2010/09/kotabaru-tempo-dulu.html');

d.add(20,17,'Seputar Kalimantan','http://usegallery.blogspot.com/search/label/SEPUTAR%20KALIMANTAN');

d.add(21,0,'Profil Ikhsan Gallery','http://www.blogger.com/profile/18005616552638413203');

document.write(d);

//-->

</script>

Semoga Sukses Sobat...

Thanks to  http://t4belajarblogger.blogspot.com/