Membuat Menu DTree

     

Menu dTree adalah menu yang memiliki tampilan sangat mirip dengan tampilan menu windows explorer (lihat gambar disamping), sehingga pengunjung dapat tertarik dan lebih mudah mencari artikel karena penggunaan menu ini di jumpai di komputer masing-masing (bagi pengguna windows).


Langsung saja, bagaimana cara membuat menu dTree di blogspot? Silahkan anda ikuti langkah-langkahnya berikut ini.

1. Masuk pada halaman EDIT HTML, kemudian letakkan kode berikut di atas kode </head>

<link href="StyleSheet" href="http://sites.google.com/site/t4belajarblogger/js_t4belajarblogger/dtree.css" type="text/css" /><script type="text/javascript"src="http://sites.google.com/site/t4belajarblogger/js_t4belajarblogger/createdtree.js"></script>

Kemudian klik SAVE TEMPLATE.

2. Masuk pada RANCANGAN kemudian ELEMEN LAMAN setelah itu klik TAMBAH GADGET, pilihlah GADGET HTML. Setelah itu, pastekan kode berikut ini:

<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,'Belajar Elektronika');

d.add(1,0,'Dasar Dasar Listrik','#.html');

d.add(2,1,'Teori Atom',' #.html');

d.add(3,2,'Teori Atom','http://widodo-elektronika.blogspot.com/2011/07/teori-atom.html');

d.add(4,2,'Penghantar Listrik','http://widodo-elektronika.blogspot.com/2011/07/penghatar-listrik.html');

d.add(5,2,'Arus Listrik & Satuannya','http://widodo-elektronika.blogspot.com/2011/07/arus-listrik-dan-satuannya.html');

d.add(6,2,'Tegangan Listrik & Satuannya','http://widodo-elektronika.blogspot.com/2011/07/tegangan-listrik-dan-satuannya.html');

d.add(7,2,'Hambatan Listrik & Satuannya','http://widodo-elektronika.blogspot.com/2011/07/hambatan-listrik-dan-satuannya.html');

d.add(8,2,'Hukum OHM','http://widodo-elektronika.blogspot.com/2011/07/hambatan-listrik-dan-satuannya_08.html');

d.add(9,0,'Komponen Elektronika',' #.html');

d.add(10,9,'Resistor',' #.html');

d.add(11,10,'Resistor Tetap','http://widodo-elektronika.blogspot.com/2011/07/jenis-resistor-tetap.html');

d.add(12,10,'Resistor Berubah Manual','http://widodo-elektronika.blogspot.com/2011/07/12-resistor-tidak-tetap-variable.html');

d.add(13,10,'Resistor Berubah Otomatis','http://widodo-elektronika.blogspot.com/2011/07/13-resistor-berubah-otomatis-ntc-dan.html');

d.add(14,9,'Kapasitor',' #.html');

d.add(15,14,'Pengertian & Macam Kapasitor','http://www.smpn20sby.com/index.php/komponen-elektronika/komponen-pasif/kapasitor/teori-dasar-kapasitor');

d.add(16,14,'Jenis Kapasitor','http://www.smpn20sby.com/index.php/komponen-elektronika/komponen-pasif/kapasitor/membaca-nilai-resistor');

d.add(18,9,'Dioda',' #.html');

d.add(19,18,'Pengertian Dioda','http://www.smpn20sby.com/index.php/komponen-elektronika/komponen-aktif/diode');

d.add(20,18,'Dioda Penyearah','http://www.smpn20sby.com/index.php/komponen-elektronika/komponen-aktif/diode/diode-penyearah');

d.add(21,18,'Dioda Zener','http://www.smpn20sby.com/index.php/komponen-elektronika/komponen-aktif/diode/diode-zener');

d.add(22,18,'LED','http://www.smpn20sby.com/index.php/komponen-elektronika/komponen-aktif/diode/led');

d.add(23,18,'Dioda Foto ','http://www.smpn20sby.com/index.php/komponen-elektronika/komponen-aktif/diode/diode-foto');

d.add(24,18,'SCR','http://www.smpn20sby.com/index.php/komponen-elektronika/komponen-aktif/diode/scr');

d.add(25,18,'DIAC','http://www.smpn20sby.com/index.php/komponen-elektronika/komponen-aktif/diode/diac');

d.add(26,18,'TRIAC','http://www.smpn20sby.com/index.php/komponen-elektronika/komponen-aktif/diode/triac');

d.add(27,18,'VARACTOR','http://www.smpn20sby.com/index.php/komponen-elektronika/komponen-aktif/diode/dioda-varaktor');

d.add(28,18,'Diode Laser','http://www.smpn20sby.com/index.php/komponen-elektronika/komponen-aktif/diode/dioda-laser');

d.add(29,9,'Transisor',' #.html');

d.add(30,29,'Transistor','http://www.smpn20sby.com/index.php/komponen-elektronika/komponen-aktif/transistor');

d.add(31,29,'MOSFET','http://www.smpn20sby.com/index.php/komponen-elektronika/komponen-aktif/transistor/mosfet');

d.add(32,29,'FET','http://www.smpn20sby.com/index.php/komponen-elektronika/komponen-aktif/transistor/fet');

d.add(33,29,'IGBT','http://www.smpn20sby.com/index.php/komponen-elektronika/komponen-aktif/transistor/igbt');

d.add(34,29,'Darlington','http://www.smpn20sby.com/index.php/komponen-elektronika/komponen-aktif/transistor/darlington');


d.add(35,9,'Kumparan','#.html');

d.add(36,35,'Transformator','http://widodo-elektronika.blogspot.com/2011/07/13-resistor-berubah-otomatis-ntc-dan.html');

d.add(37,35,'Loudspeaker','http://www.smpn20sby.com/index.php/komponen-elektronika/komponen-pasif/kumparan/loudspeaker');

d.add(38,35,'Mikrofon','http://www.smpn20sby.com/index.php/komponen-elektronika/komponen-pasif/kumparan/mikrofon');

d.add(39,35,'Induktor','http://www.smpn20sby.com/index.php/komponen-elektronika/komponen-pasif/kumparan/transformator');

d.add(125,0,'<blink>Mau Bikin Menu Begini?</blink>','http://widodo-miniblog.blogspot.com/2011/07/membuat-menu-dtree.html');

document.write(d);

//-->

</script>

</div>

Jika sudah, save kemudian lihat hasilnya. Jika anda belum mengeditnya, tampilannya akan sama persis dengan milik saya. Silahkan sobat mengganti link saya kemudian ganti kata-katanya. Yang berwarna biru ada kata-kata yang saya maksud, sementara yang berwarna merah adalah link menunya, silahkan ganti sesuai keinginan. Ingin menambahkan menu (folder) baru? Insya Allah akan saya posting, soalnya agak panjang penjelasannya. Jika mengalami masalah, Anda dapat berkomentar...

Demikianlah cara membuat menu dTree di blogspot ini, bila ingin tahu demo clik disini mohon maaf atas segala kekurangan,
semoga bermanfaat :)

Posted in: Blogspot