Cara Membuat Menu dTree

Apa itu menu dTree? Menu dTree adalah menu yang menyerupai/mirip menu explore dan menu ini dapat kita tampilkan ke dalam web/blog kita. Teman2 pasti sudah pada tahukan bagaimana muka dan bentuknya menu explore itu? Saya kira sudah pada tahu semua yaaa...(tuh kayak gambar di samping kiri). Nah, untuk penampilan menu dTree sendiri, daripada teman2 cuma mbayangin saja mending tman2 noleh ke sidebar kanan blog ini. Bagaimana, miripkan? 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 silahkan teman2 login dulu ke akun blogger. Lalu klik tata Letak >> Klik Edit HTML


1. Taruh script berikut di atas kode tag </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>

2. Klik Simpan template.


Selanjutnya yang harus teman2 lakukan adalah menaruh kode HTML dTree ke dalam gadget sidebar blognya teman2. 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>

Maka Preview dari kode di atas adalah seperti berikut ini



Saran saya agar teman2 memasukkan kode HTML di atas ke dalam gadget sidebar blog-nya teman2, mengingat agar teman2 lebih mudah dalam memahami bagian mana saja dan apanya saja yang harus diotak-atik untuk menampilkan suatu folder beserta file-nya sesuai dengan keinginannya teman2.

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 teman2 hanya memperhatikan nomor2 yg telah saya tandai dengan warna2 (untuk tulisan blablabla.HTML, kita bahas setelah masalah nomor)

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

Coba teman2 perhatikan beda 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 gak beraturan.

Sebenarnya angka2 tersebut dapat teman2 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 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 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.

Alhamdulillah, akhirnya rampung juga. O ya, bagi teman2 yg mungkin merasa ada sedikit kesulitan...mungkin bisa menganalisanya sendiri melalui kode HTML berikut, yang merupakan kode dari menu dTree saya yang berada di samping kanan itu...

<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,'Available in 3 Languages','#.html');
d.add(2,1,'Indonesia','http://www.terjorok.com/2009/11/bagaimana-kalau-seorang-seniman-lagi.html');
d.add(3,1,'English','http://www.terjorok.com/2009/11/english-post.html');
d.add(4,1,'العربية','http://www.terjorok.com/2009/12/arabic-blogger-tutorial.html');
d.add(5,0,'Sekilas Info','#.html');
d.add(6,5,'Update PageRank','http://www.terjorok.com/2009/12/cara-cepat-update-pagerank-google.html');
d.add(7,5,'4 Gadget Terbaru','http://www.terjorok.com/2009/12/empat-gadget-baru-dari-blogger-buster.html');
d.add(8,5,'Baca Yg Lainnya=>>','http://www.terjorok.com/2009/12/sekilas-info.html');
d.add(9,0,'Link and Exchange','#.html');
d.add(10,9,'Link to This Blog','http://www.terjorok.com/2009/11/link-to-this-blog.html');
d.add(11,9,'Tman dan Link Exchange','http://www.terjorok.com/2009/12/teman-ngeblog-dan-link-exchange.html');
d.add(12,0,'Feed Blog','http://feeds.feedburner.com/%7Er/TutorialBlogDiBloggerBelajarMembuatBlogNgeblogUntukPemulaDanLanjutan/%7E6/2');
d.add(13,0,'Blog Tools','#.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
d.add(14,13,'Kumpulan Kode warna','http://www.terjorok.com/2009/11/kumpulan-kode-warna.html');
d.add(15,13,'Blog Anda Lambat?','http://www.terjorok.com/2009/11/tips-mempercepat-loading-blog.html');
d.add(16,0,'Profil Empunya Blog','http://www.blogger.com/profile/00282623483850735612');

document.write(d);

//-->
</script>

</div>

NB: Jika ingin merubah ukuran serta warna font menu dTree, silahkan baca tutorial lengkapnya di sini

Semoga Bermanfaat []

Tags: cara membuat menu dTree, membuat menu ala explore, menu dTree untuk Blogger, HTML dtree, script dTree