1. Jquery Multilevel Menu Nagigasi
2. Menu Navigasi Green Library
3. Membuat Menu Navigasi Horizontal
4. Atau lihat DISINI.
Nah judul pembahasan kita kali ini adalah cara membuat menu Dtree. Mungkin sobat blogger masih ada yang belum mengerti apa itu menu Dtree. Oke sekarang saya ingin memberikan sedikit penjelasan tentang menu Dtree. Menu Dtree adalah menu yang memiliki struktur seperti pohon, yang punya cabang-cabang. Seperti Kalau misalnya kitamembuka windows Explorer.
Menu Dtree ini sangat berguna jika kamu memiliki postingan yang buanyak, karena dengan menggunakan menu Dtree maka akan bisa menghemat space/ruang yang ada di blogmu. Oke dengan penjelasan yang kurang jelas ini, sobat blogger dapat mengerti yah?. Untuk lebih jelasnya, ikuti langkah-langkah berikut
1. Login ke blogger dengan Akun anda.
2. Pilih Rancangan pada dasbor blog anda.
3. Kemyudian pilih Edit HTML
4. Cari kode seperti ini <head> dan letakkan kode berikut di atas kode tersebut
<link rel="StyleSheet" href="http://www.geocities.com/uddin_81/dtree.css" type="text/css" /> <script type="text/javascript" src="http://www.geocities.com/uddin_81/dtree.js"></script>
5. Terus Simpan Template6. Setelah itu, silahkan anda pilih Elemen Laman
7. Pilih Tambah Gadget
8. Pilih lagi HTML/Javasript
9. Letakkan kode berikut ini dalam kotak scriptnya.
<div class="dtree">
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'My example tree');
d.add(1,0,'Node 1','link.html');
d.add(2,1,'Node 1.1','link.html');
d.add(3,2,'Node 1.1.1','link.html');
d.add(4,3,'Node 1.1.1.1','link.html');
d.add(5,0,'Node 2','link.html');
d.add(6,5,'Node 2.1','link.html');
d.add(7,5,'Node 2.2','link.html');
d.add(8,0,'Node 3','link.html');
d.add(9,0,'Node 5','link.html');
document.write(d);
//-->
</script>
</div>
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'My example tree');
d.add(1,0,'Node 1','link.html');
d.add(2,1,'Node 1.1','link.html');
d.add(3,2,'Node 1.1.1','link.html');
d.add(4,3,'Node 1.1.1.1','link.html');
d.add(5,0,'Node 2','link.html');
d.add(6,5,'Node 2.1','link.html');
d.add(7,5,'Node 2.2','link.html');
d.add(8,0,'Node 3','link.html');
d.add(9,0,'Node 5','link.html');
document.write(d);
//-->
</script>
</div>
Hal yang harus dilakukan:
- Ganti tulisan "link.html" dengan link kamu (judul posting kamu).
- Angka yang pertama harus unik tidak boleh ada yang sama (d.add(1,0,’Node 1’,’link.html’);
- Angka yang kedua merupakan cabang dari angka pertama (perhatikan angka-angka yang memiliki warna sama).
- Kamu bisa mengganti icon-iconnya dengan icon kamu sendiri, contoh scriptnya akan seperti ini:
d.add(10,0,’Profile’,’link.html’,’’,’’,’http://kendhin.890m.com/dtree/trash.gif’);
ganti kode yang berwarna merah di atas dengan ikon yang akan anda gunakan.10. Kemudian Save.
Selesai. Semoga bermanfaat.
Tidak ada komentar:
Posting Komentar