ahmad mustaqim: Explore Menu (Menu Di Website/Webblog Mirip seperti pada Windows Explore)

Sebenernya ini udah lama banyak orang peke, Akan tetapi saya baru posting [hahay ketinggalan kereta! (biarin.. hohohoho)] karna saya baru sempet memakainya seperti tampil di samping, saya praktekkan dulu setelah tau hasilnya baru dech di share. posting lo ga sa di pake apa artinya... sama ja boong....

haaahhh... ngomong apa sie nie kok ngalor ngidul ga karuan.... buruan langsung ke TKP.....
menu yg dipake ini namanya Dtree (pohon x ya kok tree ... hehehe) dari destroydrop jadi silahkan download script-nya upload di hosting trus panggil dari Site / Blog anda.
ada 2 script yang dipake
1.dtree.js
2.dtree.css

langkah selanjutnya adalah menuliskan scipt untuk memanggil fungsi dari kedua script diatas... dimana kita menuliskan script pemanggilnya? diatas kode </head> kita tulis scripct

setelah itu pindah ke page elements untuk menambahkan Gadget HTML/JavaScipt kemudian masukkan JavaScipt berikut

<!--

d = new dTree('d');

d.add(0,-1,'nama','url','judul');

d.add(1,0,'nama','url','judul');

d.add(2,1,'nama','url','judul');

d.add(3,0,'nama','url','judul');

d.add(4,3,'nama','url','judul');

d.add(5,3,'nama','url','judul');

d.add(6,3,'nama','url','judul');

d.add(7,3,'nama','url','judul');

d.add(8,0,'nama','url','judul');

d.add(9,8,'nama','url','judul');

d.add(10,8,'nama','url','judul');

d.add(11,8,'nama','url','judul');

d.add(12,8,'nama','url','judul');

document.write(d);

//--></script>

<a href="javascript: d.openAll();">Buka Semua</a> | <a href="javascript: d.closeAll();">Tutup Semua</a>

kemudian simpan dan lihat hasilnya....

selamat mencoba...

atau kalua mau cara instan yg gampang dan cepet bisa pakai seperti yang saya pake

caranya :
1.login blogspot
2.design >> edit HTML
3.Expand Widget Templates
4.cari kode </head> ( biar gampang pake Ctrl+f )
5. Pastekan kode berikut ini di ata kode tadi

sehingga menjadi

</head>

6.save
7.desing page elements
8.add gadget
9.HTML/JavaScript
10. pasteka kode ini

<!--

d = new dTree('d');

d.add(0,-1,'My-Site','http://ahmadmustaqim.tk');

d.add(1,0,'Delphi','http://ahmadmustaqim.wordpress.com/category/delphi-7-2/');

d.add(2,1,'Tutorial Delphi7','http://ahmadmustaqim.wordpress.com/category/delphi-7-2/');

d.add(3,0,'Sosial Network','#.html');

d.add(4,3,'Facebook','http://www.facebook.com/m17aqim');

d.add(5,3,'Linkedin','http://id.linkedin.com/in/m17aqim');

d.add(6,3,'Multiply','http://m17aqim.multiply.com/');

d.add(7,3,'Twitter','http://www.twitter.com/m17aqim');

d.add(8,0,'Visual Basic','http://ahmadmustaqim.wordpress.com/category/tutorial-vb6-0/');

d.add(9,8,'Tutorial VB6','http://ahmadmustaqim.wordpress.com/category/tutorial-vb6-0/');

d.add(10,8,'Contoh Program','http://pancapati.blogspot.com/2011/10/aplikasi-pesanan-star-taylor-vb6.html');

d.add(11,8,'Pesanan','http://pancapati.blogspot.com/2011/10/aplikasi-pesanan-star-taylor-vb6.html');

d.add(12,8,'Penjualan Voucher','http://pancapati.blogspot.com/2011/10/applikasi-penjualan-voucher-vb6.html');

d.add(13,0,'Download Mp3','#.html');

d.add(14,13,'AISHITERU','http://www.4shared.com/audio/WyrHr-IB/01_aisitheru.html');

d.add(15,13,'BUKAN MALAIKAT','http://www.4shared.com/audio/l5e2N8hb/02_Aku_Bukan_Malaikat.html');

d.add(16,13,'TAK SEINDAH BIASA','http://www.4shared.com/audio/RRfWeMwy/Siti_Nurhaliza_Tak_Seindah_Bia.html');

d.add(17,13,'SAMPAI KU MATI','http://www.4shared.com/audio/jzn91UPK/03_Samapi_Ku_Mati.html');

document.write(d);

//--></script>

<a href="javascript: d.openAll();">Buka Semua</a> | <a href="javascript: d.closeAll();">Tutup Semua</a><br /> <a href="http://my-taqim.blogspot.com/2011/11/explore-menu-menu-di-websitewebblog.html" title="pasang menu seperti ini" >Dtree Menu © 2012 </a> . <a href="http://ahmadmustaqim.tk">aqim</a>

11.save
12.lihat hasilnya

tulisan yg berwarna merah bisa di ganti sesuka anda

selamat mencoba