Sunday, November 13, 2011

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
<link href='https://dtree.css' rel='StyleSheet' type='text/css'/>
<script src='https://azcdtree.js' type='text/javascript'/>

setelah itu pindah ke page elements untuk menambahkan Gadget HTML/JavaScipt kemudian masukkan JavaScipt berikut
<script type="text/javascript">
<!--
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
<link href='https://sites.google.com/site/azicode/css/dtree.css' rel='StyleSheet' type='text/css'/>
<script src='https://sites.google.com/site/azicode/js/azcdtree.js' type='text/javascript'/>

sehingga menjadi
<link href='https://sites.google.com/site/azicode/css/dtree.css' rel='StyleSheet' type='text/css'/>
<script src='https://sites.google.com/site/azicode/js/azcdtree.js' type='text/javascript'/>

</head>

6.save
7.desing page elements
8.add gadget
9.HTML/JavaScript
10. pasteka kode ini
<script type="text/javascript">
<!--
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

2 komentar:

Post a Comment

Followers