Membuat Menu Windows (Dtree)

Teman saya sering bertanya cara membuat menu windows (Dtree), trus apakah di blogger bisa memberi menu tersebut? tentu bisa, menu ini disebut menu Dtree, sayangnya menu ini harus di isi link secara manual. Kelebihan menu Dtree ini anda dapat menghemat space pada blog karna sub persub bisa disembunyikan. Script untuk menu Dtree ini bisa didownload pada situs resminya yaitu di http://www.destroydrop.com.

  
Hasilnya akan seperti dibawah ini :



Anda tertarik dengan menu dtree?

Berikut langkah - langkahnya:

1. Login

2. pilih Layout trus Edit HTML

3. Kode ini di simpan di atas kode </head> :

<link rel="StyleSheet" href="http://www.geocities.com/putra_huny/dtree.css" type="text/css" /> <script type="text/javascript" src="http://www.geocities.com/putra_huny/dtree.js"></script>

Keterangan :

Script yang berwarna merah adalah alamat script yang disimpan.
Mohon bantuanya jika teman - teman menggunakan script ini dengan menyimpan scriptnya di hosting anda masing - masing.Anda bisa mendaftar di 000webhost.com

Jika anda menggunakan alamat saya dan saya tidak sengaja menghapus berabekan he... Ini juga untuk menghindari kekurangan bandwidth yang membuat lambat saat load.

4. Trus Klik Save

5. Trus pilih menu Page Element

6. Add a Gadget terus HTML/Javascript

7. Setelah itu copy kode berikut ini dan pasang di sidebar.

Berikut ini script yang ada copykan :

<h2>Contoh</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,'My example tree'); d.add(1,0,'Node 1','example.html'); d.add(2,0,'Node 2','example.html'); d.add(3,1,'Node 1.1','example.html'); d.add(4,0,'Node 3','example.html'); d.add(5,3,'Node 1.1.1','example.html'); d.add(6,5,'Node 1.1.1.1','example.html'); d.add(7,0,'Node 4','example.html'); d.add(8,1,'Node 1.2','example.html'); d.add(9,0,'My Pictures','example.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif'); d.add(10,9,'The trip to Iceland','example.html','Pictures of Gullfoss and Geysir'); d.add(11,9,'Mom\'s birthday','example.html'); d.add(12,0,'Recycle Bin','example.html','','','img/trash.gif'); document.write(d); //--> </script> </div>

keteranganya:

Ganti tulisan example.html dengan link kamu
Angka yang pertama harus unik tidak boleh ada yang sama (d.add( 1 ,0,'Node 1','example.html');

Anda juga bisa mengganti logo icon dengan gambar milik anda.

misal :

d.add(12,0,'Recycle Bin','example.html','','','img/trash.gif');

menjadi :

d.add(12,0,'Recycle Bin','example.html','','','http://i396.photobucket.com/albums/pp48/putro16/go.jpg');

Jika anda masih bingung masalah script di atas saya akan memberikan contoh script milik saya.
Contohnya bisa langsung dilihat di sidebar sebelah kanan milik saya.

Secriptnya seperti berikut :

<div class="dtree"> <p><a href="javascript: d.openAll();"><img src="http://i396.photobucket.com/albums/pp48/putro16/plus.gif"/><b>Buka semua</b></a> | <a href="javascript: d.closeAll();"><img src="http://i396.photobucket.com/albums/pp48/putro16/minus.gif"/><b>Tutup semua</b></a></p> <script type="text/javascript"> <!-- d = new dTree('d'); d.add(0,-1,'Rumah','http://putroweb.blogspot.com'); d.add(1,0,'Belajar Aja') d.add(3,1,'Dasar-Dasar Aja',''); d.add(10,3,'HTML','http://putroweb.blogspot.com/search/label/HTML'); d.add(20,3,'XHTML','http://putroweb.blogspot.com/search/label/XHTML'); d.add(30,3,'PHP','http://putroweb.blogspot.com/search/label/PHP'); d.add(40,3,'JAVA','http://putroweb.blogspot.com/search/label/JAVA'); d.add(50,3,'JAVASCRIPT','http://putroweb.blogspot.com/search/label/JavaScript'); d.add(60,3,'CSS','http://putroweb.blogspot.com/search/label/Belajar%20CSS'); d.add(70,3,'RSS','http://putroweb.blogspot.com/search/label/RSS'); d.add(80,3,'Pemerograman Basis data','http://putroweb.blogspot.com/search/label/Pemerograman%20Basis%20data'); d.add(90,3,'Client Server','http://putroweb.blogspot.com/search/label/Client%20Server'); d.add(100,3,'Struktur Data','http://putroweb.blogspot.com/search/label/Struktur%20Data'); d.add(110,3,'FreeDownload','http://putroweb.blogspot.com/search/label/Free%20download'); d.add(5,1,'Baca-Baca Aja'); d.add(10,5,'Blogger','http://putroweb.blogspot.com/search/label/Ngeblog%20yuk'); d.add(20,5,'WordPerss','http://putroweb.blogspot.com/search/label/WordPerss'); d.add(30,5,'SEO','http://putroweb.blogspot.com/search/label/SEO'); d.add(40,5,'Plurk','http://putroweb.blogspot.com/search/label/Plurk'); d.add(50,5,'Facebook','http://putroweb.blogspot.com/search/label/Facebook'); d.add(60,5,'Jaringan','http://putroweb.blogspot.com/search/label/Belajar%20Jaringan%20yuk...'); d.add(70,5,'Seputar IT','http://putroweb.blogspot.com/search/label/Seputar%20TI'); d.add(80,5,'Pengetahuan Umum','http://putroweb.blogspot.com/search/label/Pengetahuan%20Umum'); d.add(90,5,'Perkembagan web','http://putroweb.blogspot.com/search/label/Perkembangan%20Web'); d.add(100,5,'Tips aja','http://putroweb.blogspot.com/search/label/Tips%20dan%20Trik'); d.add(110,5,'Membunuh aja','http://putroweb.blogspot.com/search/label/Membunuh%20Virus'); d.add(6,1,'Seneg-seneg Aja'); d.add(10,6,'Sehari-hari','http://putroweb.blogspot.com/search/label/My%20life'); d.add(20,6,'Jalan-jalan','#'); d.add(30,6,'Tempat Nongkrong','#'); d.add(2,0,'Teman Aja','','','','http://i396.photobucket.com/albums/pp48/putro16/globe.gif','http://i396.photobucket.com/albums/pp48/putro16/globe.gif'); d.add(10,2,'Rudeegoid','http://rudeegoid.blogspot.com','','','http://i396.photobucket.com/albums/pp48/putro16/icon_user.gif'); d.add(20,2,'Eas','#','','','http://i396.photobucket.com/albums/pp48/putro16/icon_user.gif'); d.add(30,2,'Omenk','http://omenk-belajar.blogspot.com','','','http://i396.photobucket.com/albums/pp48/putro16/icon_user.gif'); d.add(40,2,'Ndynindy','http://ndynindy.blogspot.com/','','','hhttp://i396.photobucket.com/albums/pp48/putro16/icon_user.gif'); d.add(4,0,'punokawan!','http://www.punokawan.com/','Free Software dan Aplikasi, klik di sini!','','http://i396.photobucket.com/albums/pp48/putro16/action_save.gif'); d.add(11,0,'Belajar coding!','http://www.w3schools.com/','Belajar dan Belajar','','http://i396.photobucket.com/albums/pp48/putro16/cd.gif'); d.add(7,0,'My friendster!','#','my friendster','','http://i396.photobucket.com/albums/pp48/putro16/friendsterku.gif'); d.add(8,0,'Recycle Bin','http://putroweb.blogspot.com/search?max-results=100','Sampah Yang Berguna','','http://i396.photobucket.com/albums/pp48/putro16/trash.gif'); document.write(d); //--> </script> </div>

Silahkan ganti link saya dengan link milik anda.... :), Sekali lagi mohon bantuanya jika teman - teman menggunakan script ini dengan menyimpan scriptnya di hosting anda masing - masing. Anda bisa mendaftar di 000webhost.com

Jika anda menggunakan alamat saya dan saya tidak sengaja menghapus berabekan he... Ini juga untuk menghindari kekurangan bandwidth yang membuat lambat saat load. Jika ada pertanyaan masalah Membuat Menu Windows (Dtree) silahkan bertanya... :)

Terimakasih sudah mengunjungi blog ini... :D