Cara Membuat Menu dTree di Blog

Bismillah, selamat sore sobat blog semuanya. Pas tadi saya buka Blog saya ini ada pertanyaan dari Sabahat Blogger yaitu jasmani widodo yang menanyakan "gimana cara membuat widget buat menampilkan kategori berbentuk folder seperti yang ada pada direktori dmoz dsb". Sayapun terkejut yang di tanyakan Alya, Apa yang kaya gimana?? hehehe. Akhirnya saya memutuskan diri untuk keliling mencari solusi dan akhirnya Alhamdulillah saya menemukan yang mirip sekali dengan yang di tanyakan oleh Alya yaitu menampilkan kategori berbentuk folder, yang namanya Menu dTree. Mudah-mudahan jawaban ini atau postingan ini benar apa yang di tanyakan oleh Alya. Karena Menu dTree ini adalah menu yang menyerupai/mirip menu explore dan menu ini dapat kita tampilkan ke dalam web/blog kita.

Untuk memulai memasang menu dTree ini, seperti biasa silahkan Sobat login dulu ke akun Blogger Sobat. Lalu klik tata Letak >> Klik Edit HTML

1. Letakkan kode di bawah ini di atas kode </head>

<link rel="StyleSheet" href="https://sites.google.com/site/efekefek/file-js/dtree.css" type="text/css" />
<script type="text/javascript" src="https://sites.google.com/site/efekefek/file-js/createdtree.js"></script>

2. Kemudian 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

<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,'Kang 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>
</div>

Setelah di Copy Paste Simpan Gadget Sobat
Ok, kita mulai mengenal bagian mana saja yang harus kita atur untuk memulai membuat folder serta yang mana juga yang harus kita atur untuk membuat file saja. Untuk memulai mengenal bagian yang harus diatur dalam pembuatan folder dan file, agar parasobat hanya memperhatikan nomor-nomor yang telah saya tandai dengan warna-warna (untuk tulisan #.HTML, kita bahas setelah masalah nomor)

Nah, apakah parasobat bertanya apa maksud dari nomor2 yang acak2 itu? Sebenarnya itu bukan nomor acak2an, akan tetapi nomor unik yang tersusun rapi.

Coba parasobat perhatikan bedanya nomor yang berada di sisi kanan dan sisi kiri. Yang berada di sisi kiri sesuai dengan urutan:
1
2
3
dst

Sedangkan yang berada di sisi kanan gak beraturan.


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

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 parasobat 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 parasobat bingung, sobat bisa memperhatikan preview/gambar di atas. Coba dilihat tuh, setiap jajaran ketiga pasti file kan? Nah itu karena yang jajaran ketiga adalah bagian yg terakhir alias bagian yg sudah tidak memilki sub lagi.

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

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

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

Itu semua karena terletak pada fungsi masing-masing. 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 benar-benar mirip menu explorer, memang mirip tapi hanya tampilannya serta sifatnya yg menyerupai menu dropdown, akan tetapi bedanya pasti parasobat tahu. Kalau di menu explorer 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. Bagaimanaparasobat sudah ada bayangankan...?


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

Description: Cara Membuat Menu dTree di Blog, Rating: 4.5, Reviewer: Unknown, ItemReviewed: Cara Membuat Menu dTree di Blog