Judulnya Panjang ya? Judul artikel memang harus mengandung kata kunci sehingga siapapun dapat dengan mudah menemukannya jika
pencarian mengarah pada artikel ini.
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
Selamat Mencoba & Happy Blogging
Komentar (0)
Posting Komentar