45 Cara Membuat Menu dTree

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Kali ini saya ingin berbagi lagi trik membuat menu dtree. Apakah menu dtree itu? Menu dtree yang saya maksud adalah menu yang menyarupai menu Windows explorer seperti pada image berikut:
cara membuat menu dtree
Menu seperti ini bisa juga kita tampilkan pada web atau blog kita seperti yang terlihat pada image berikut atau bisa lihat langsung demonya diblog saya disini
image
Nah ingin membuat menu dtree seperti itu? Caranya mudah saja hanya dalam beberapa langkah:

Langkah pertama:

  • Seperti biasa loggin ke akun blogger sobat=>  Lalu klik tata Letak =>> Klik Edit HTML
  • Letakkan kode/ script berikut di atas kode </head>
<link href='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/dtree.css' rel='StyleSheet' type='text/css'/>
<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/createdtree.js' type='text/javascript'/>
  • Klik Simpan template.
Langkah ke dua:
Klik elemen halaman=> Tambah Gadget=> HTML=> Letakkan kode berikut pada kolom konten:

<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,'Indahnya Berbagi');
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
 
image 

Kalau belum ngerti berikut contoh mengisi menu dan linknya dari daftar menu blog saya; 

<h2>Arsip</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,'Indahnya Berbagi');
d.add(1,0,'Agama','#.html');
d.add(2,1,'Artikel Islam','http://amatullah83.blogspot.com/search/label/Artikel%20Islam');
d.add(3,1,'Nasehat Muslimah','http://amatullah83.blogspot.com/search/label/Nasehat.');
d.add(4,1,'Fatwa Ulama','http://amatullah83.blogspot.com/search/label/Fatwa%20Ulama');
d.add(5,0,'Teknologi','#.html');
d.add(6,5,'Pesawat Tercepat Di Dunia','http://amatullah83.blogspot.com/2009/07/pesawat-tercepat-di-dunia.html');
d.add(7,5,'Kosong','');
d.add(8,5,'Kosong','');
d.add(9,0,'Kesehatan','#.html');
d.add(10,9,'Bahaya Rokok','http://amatullah83.blogspot.com/2009/08/bahaya-rokok-bagi-kesehatan.html');
d.add(11,9,'','');
d.add(12,0,'','');
d.add(13,0,'Trik Blog','#.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
d.add(14,13,'Kumpulan Kode warna','http://amatullah83.blogspot.com/2009/07/daftar-kode-warna-dengan-tabel.html');
d.add(15,13,'Cara buat menu tab view sederhana','http://amatullah83.blogspot.com/2009/11/cara-membuat-menu-tab-view.html');
d.add(16,0,'Cara buat menu ini','http://amatullah83.blogspot.com/2010/01/cara-membuat-menu-dtree.html');
document.write(d);
//-->
</script>
</div>
Silahkan ganti nama folder dan linknya! Tambahkan yang perlu ditambahkan! Untuk hasilnya bisa lihat blog  saya disini
Jangan lupa save kalau dah selesai ya!
Selamat mencoba dan semoga bermanfaat!


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

45 komentar :

  1. mantabbbbbs tutorialnya sob,
    thank's ya sob

    BalasHapus
  2. enaknya pake bloger ya benini bayak bloger yang baik hati seperti yang ini tutorial tutorialnya ga pake rahasia-rahasiaan, maklum nih newbee butuh pencerahan, terimakasih

    salam kenal
    Asep Sukarman

    BalasHapus
  3. Blognya makin mantap... ditambah dengan Tutorial yang bermutu.
    makasih banyak sobat.

    Kalau tidak keberatan, sudilah kiranya untuk bertukar Link.

    tentang kotak komentar di blog saya silahkan baca DISINI

    Terima kasih..
    Salam Taksim.

    BalasHapus
  4. Mohon maaf penulisan linknya salah.
    Maksud saya DISINI

    BalasHapus
  5. menarik sekali Ukh..lucu. Terima kasih telah berbagi ilmu...keep blog!! Oh ya, jawabannya udah aku temuin..ternyata di post "tukeran link" ya..tp masih belum sukses Ukh..kenapa ya?apa karena beda template??

    BalasHapus
  6. menarik sekali Ukh..lucu. Terima kasih telah berbagi ilmu...keep blog!! Oh ya, jawabannya udah aku temuin..ternyata di post "tukeran link" ya..tp masih belum sukses Ukh..kenapa ya?apa karena beda template??

    BalasHapus
  7. Salam Ukhti...aduh, aku pengen sekali mba. Tp kalo edit harus sekomplek tu kayanya susah sekali deh, hik hik...jd pengen belakar banyak ttg web ni Ukh...mungkin ukhti bisa merekomendasikan buku / web??? Salam manis utk Ukhti yg pinter, :-)

    BalasHapus
  8. wah ini yang aq cari sob..... mantab

    BalasHapus
  9. wah.. bagus sekali mbak..
    makasih dah berbagi ya

    BalasHapus
  10. @ all: terimakasih apresiasix

    BalasHapus
  11. wew mantap nih, thanks or ilmu di coba dulu sob^^

    salam blogger :)

    BalasHapus
  12. sama2, semoga berhasil dan bermanfaat

    BalasHapus
  13. makasih banyak sobat...
    Kedua blognya juga sudah tertancep.

    BalasHapus
  14. makin keren aja nih...
    makasih tutorialnya...

    BalasHapus
  15. aku nunggu template yg jadi aja mba...

    BalasHapus
  16. @ setiawan dirganta& narti: terimakasih
    @ sda: wah ditunggu ya? tambah semangat jadinya nie

    BalasHapus
  17. wah kk nieh baik yach mau memberikan saya ilmu tambahan saya akan merefisi lagi tampilan saya dengan yang ini..
    ty... jayooo terus anak bangsa dan teruslah berkarya...

    BalasHapus
  18. ilmu baru lagi neh buat ane..tak coba ke blog percobaan ah.makasih

    BalasHapus
  19. all: terimakasih apresiasinya

    BalasHapus
  20. tipsny boleh juga sob.. makasih ya.. jadi diingatkan mau bikin menu ini

    BalasHapus
  21. Salam Ukh...
    Oh ya emang kemarin sy nyoba pasang plugin dari intensdebate, tp diremove lg soallnya banyak yg komplain, hehe. Maklum newbie, segala nyoba!! :-)
    Ulkh, ajari bikin effek shadow di postingan kaya di atas dong....
    makasih sebelumnya y...^0^

    BalasHapus
  22. iya insyaAllah ada masa anaa posting cara membuat effect shadow atau bayangan pada teks.

    BalasHapus
  23. hello how are you? May I join follow-up ?????................

    BalasHapus
  24. Mantab sob,kunjung balik ya,kamu udah aku follw,aku di follw juga ya. . . . :X

    BalasHapus
  25. Terimakasih apresiasinya

    BalasHapus
  26. Trims infonya .... mantab shob... salam kenal

    BalasHapus
  27. @ d'ara: terimakasih apresiasinya

    BalasHapus
  28. tipsnya manyaf sobat.. salam kenal ya

    BalasHapus
  29. @ engkus: terimakasih apresiasinya

    BalasHapus
  30. MantaBBB!!!
    thank you SOb...

    BalasHapus
  31. Assalamualaikum...

    terima kasih atas tutorial tersebut...macamana nak gantikan icon My Computer pada d.add(0,-1,'Indahnya Berbagi');

    BalasHapus
  32. Bismillah .. kang Ana ngopy data2 script2 nya yah... n image nya.. pokoknya blog akang mantap banyak menampilkan Tutorial yang bermutu dan mudan di mengerti.... Jazakumullah yah.... Mantap lah akang bisa lihat di blog ana sendiri, tp dgn syarat jdn ketawa yah soalnya baru belajar yah... he he he he.........................

    BalasHapus
  33. woodypacker2 Mei 2010 15.30

    salam kenal...
    thanx banget tips-nya sob..

    BalasHapus
  34. waaaah terimakasih mas,,,, jadi tambah keren nih blogku manteb banget daaah,,,,

    BalasHapus
  35. terimakasih sob kebetulan nih aku nikut lomba pembuatan blog terbaik .....thanks ya bro

    BalasHapus
  36. Assalamu'alikum Kang... Ana uda ikuti prosedurnya , alhmdulillah lancar.. Jazakumullah

    BalasHapus
  37. info yang bermanfaat...tapi maaf..sedikit mengkritik...yang penting itu penjelasan...css dan javascriptnya...jadi jangan cuman di suruh copas tanpa tahu..bagaimana membuat script menu dtree..coba kalau misal dari teman2 bloger mo mengganti font, menganti ikon,atau bagaiman script ini compatible di semua browsur...bagi temen2 yang mo tahu detailnya ..bisa buka web jasakonsultanwarnet...trus masuk ke halaman chating online...insya Allah saya bantu semaksimal mungkin

    BalasHapus
  38. Makasih buanget y tutorialnya....
    Met berkreasi slalu .....

    BalasHapus
  39. ..Kok fungsi ekspandnya gak bisa yah??

    BalasHapus
  40. Assalamualaikum,

    Saya berterima kasih banyak, banyak sekali tutorial bermanfaat saya dapatkan dari blog ini, salah satunya adalah menu dtree,

    Saya sudah mencoba membuat menu dtree, saya mendapat kendala ketika menu dtree mencapai 100 baris, 99 baris masih bisa tampak di Blog, tetapi 100 baris keatas sudah tidak terbaca lagi oleh mesin Blog, kalo bisa saya minta penjelasan apa penyebabnya, Terimakasih

    Wassalam,

    Blog : http://Aliansyah83.blogspot.com

    BalasHapus
  41. Waw thax to info. bagus banget gan

    BalasHapus
  42. apakah tidak berat kang pakai begituan, punya ane aja dah 81 of 100 di page google speed

    BalasHapus
  43. keren makasih, terus bagaimana dengan penggunaan pengaman websate agar script kita tidak mudah dibobol hacker, seperti password admin.

    BalasHapus
  44. wah..... mantaph... sob, tp ko di blog saya gak mau ya ? gak mau di expand or dibuka.. pdhl Q udh naruh script yg ada di atas </head>. mohon bantuannya.. :)
    salam hangat - Putera Java

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!