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
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... :)
Demikian artikel tentang Membuat Menu Windows (Dtree) ini dapat kami sampaikan, semoga artikel atau info tentang Membuat Menu Windows (Dtree) ini, dapat bermanfaat. Jangan lupa dibagikan juga ya! Terima kasih banyak atas kunjungan nya.
