Ada hal yang menarik yang baru-baru ini sering terlihat pada beberapa blog, yaitu menu dTree. Menu ini tergolong unik karna menyerupai menu explorer windows yang simple tapi "waahh" tentunya mudah untuk digunakan.
Tampilan menu sederhana, berbentuk folder dan subfolder sehingga jika di jelajahi akan terlihat seperti pohon data. Folder dalam folder membuat managemennya terlihat baik dan mudah digunakan. Setiap kepala folder akan memiliki anak folder yang berkaitan dengan induk foldernya, jadi pengkategoriannya tentu sangat baik dan tidak akan membuat penggunanya tersesat dan kebingunangan. Berikut Contohnya :
Cara membuat menu dTree :
- Pada Dashboard, pilih Template
- Pilih Edit HTML, lalu klik Lanjutkan
- Centang Expand Template Widget
- Cari kode :
<head>
- Letakkan kode berikut ini persis di-Bawah kode <head>
<link href='http://membuatgempar.net23.net/dtree.css' rel='StyleSheet' type='text/css'/>
<script src='http://membuatgempar.net23.net/dtree.js' type='text/javascript'/> - Simpan Template
- Selanjutnya Tambah Gadget pada blog dengan format HTML/JavaScript
- Isi gadget dengan kode berikut ini :
<div class="dtree">
<p><a href="javascript: d.openAll();"><img src="http://1.bp.blogspot.com/-RbQWnGW5bd8/UKJGKQD3f2I/AAAAAAAACmA/oLAHt0hhYUc/s200/pelajaran%2Bblog%2Bplus.gif" /><b>Buka</b></a> | <a href="javascript: d.closeAll();"><img src="http://2.bp.blogspot.com/-F6ylYYXiatg/UKJKASk86eI/AAAAAAAACnQ/XB9Ka_qHyO4/s200/pelajaran%2Bblog%2Bminus.gif" /><b>Tutup</b></a></p>
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'Home','#');
d.add(1,0,'Menu 1')
d.add(3,1,'sub menu 1','');
d.add(10,3,'edit','#');
d.add(20,3,'edit','#');
d.add(30,3,'edit','#');
d.add(40,3,'edit','#');
d.add(50,3,'edit','#');
d.add(60,3,'edit','#');
d.add(70,3,'edit','#');
d.add(80,3,'edit','#');
d.add(90,3,'edit','#');
d.add(100,3,'edit');
d.add(110,3,'edit','#');
d.add(120,3,'edit','#');
d.add(5,1,'sub menu 2');
d.add(10,5,'edit','#');
d.add(20,5,'edit','#');
d.add(30,5,'edit','#');
d.add(40,5,'edit','#');
d.add(50,5,'edit','#');
d.add(60,5,'edit','#');
d.add(70,5,'edit','#');
d.add(80,5,'edit','#');
d.add(90,5,'edit','#');
d.add(2,0,'menu 2','','','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');
d.add(10,2,'edit','#','','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');
d.add(20,2,'edit','#','','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');
d.add(20,2,'edit','#','','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');
d.add(30,2,'edit','#','','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');
d.add(40,2,'edit','#','','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');
d.add(50,2,'edit','#','','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');
d.add(60,2,'edit','#','','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');
d.add(4,0,'menu 3','#','menu 3','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');
d.add(6,0,'menu 4','#','menu 4','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');
d.add(7,0,'menu 5','#','menu 5','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');
d.add(8,0,'menu 6','http://tanganblogger.blogspot.com','menu 6','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');
document.write(d);
//-->
</script>
</div>
Keterangan :- Ganti # dengan URL tujuan, contohnya http://blogAnda.....
- Gandi edit, menu sesuai judul menu yang dikendaki
- Simpan Gadget dan lihat hasilnya
Goomsite.Net
0 Comments for "Cara membuat menu seprti windows explorer"