Salam
Blogging, Kali ini Bloggingpasuruan akan berbagi lagi Cara Membuat Menu Navigasi Dtree Style.
Apakah menu dtree itu? Menu dtree yang saya maksud adalah menu yang menyarupai
menu Windows explorer seperti pada gambar atas. Menu seperti ini bisa juga kita
tampilkan pada web atau blog kita seperti yang terlihat pada image dibawah ini
Jika
Sobat Blogger ingin membuat menu dtree seperti di atas ? Ikuti beberapa langkah
dibawah ini
Langkah pertama:
1. Masuk/loggin ke akun Blogger Anda >> Lalu klik tata
Letak >>
Klik Edit HTML
2. Letakkan kode/ script berikut di atas kode </head>
<link
href='https://bloggingpasuruan.googlecode.com/svn/dtree.css' rel='StyleSheet'
type='text/css'/>
<script
src='https://pasuruandtree.googlecode.com/svn/membuatdtree.js'
type='text/javascript'/>
3. Klik Simpan template.
Langkah ke dua:
Klik elemen halaman >> Tambah Gadget >> HTML >> Letakkan kode berikut pada kolom konten:
<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,'Bloggingpasuruan Berbagi');
d.add(1,0,'Folder 01','#.html');
d.add(2,1,'Sub Folder 01',' #.html');
d.add(3,2,'Sub/file Sub Folder 01',' link anda.html');
d.add(4,0,'Folder 02',' #.html');
d.add(5,4,'Sub Folder 02',' #.html');
d.add(6,5,'Sub/file Sub folder 02',' link anda.html');
d.add(7,0,'Folder 03',' #.html');
d.add(8,7,'Sub Folder 03',' #.html');
d.add(9,8,'Sub/file Sub folder 03',' link anda.html','Pictures
I\'ve taken over the years','','','img/imgfolder.gif');
d.add(10,0,'File[non-folder]',' link anda.html');
d.add(11,0,'File[non-folder]',' link anda.html');
d.add(12,0,'File Single',' link
anda.html','','','img/trash.gif');
document.write(d);
//-->
</script>
</div>
Maka Preview dari
kode di atas adalah seperti berikut ini
Jika Sobat
Blogger belum paham, berikut contoh mengisi menu dan linknya dari daftar menu
blog saya ( ingat…!
ini sekedar contoh cara pengisiannya saja yaaa, Sobat bisa mengisi sesuai
keinginan sobat Blogger )
<h2>Bloggingpasuruan Folder</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,'Bloggingpasuruan Berbagi');
d.add(1,0,'Folder1','#.html');
d.add(2,1,' Judul Artilel1',' http://bloggingpasuruan.blogspot.com/link-artikel-anda');
d.add(3,1,' Judul Artilel2',' http://bloggingpasuruan.blogspot.com/link-artikel-anda');
d.add(4,1,' Judul Artilel3',' http://bloggingpasuruan.blogspot.com/link-artikel-anda');
d.add(5,0,'SEO','#.html');
d.add(6,5,' Tutorial SEO ',' http://bloggingpasuruan.blogspot.com/link-artikel-anda'');
d.add(7,5,'Kosong','');
d.add(8,5,'Kosong','');
d.add(9,0,'Widget','#.html');
d.add(10,9,' Blogger Widget ',' http://bloggingpasuruan.blogspot.com/link-artikel-anda’);
d.add(11,9,'','');
d.add(12,0,'','');
d.add(13,0,'Trik Blog','#.html','Pictures I\'ve taken
over the years','','','img/imgfolder.gif');
d.add(14,13,'Kumpulan Kode warna',’ http://bloggingpasuruan.blogspot.com/link-artikel-anda');
d.add(15,13,' Parse HTML ',' http://bloggingpasuruan.blogspot.com/link-artikel-anda');
d.add(16,0,' Cara membuat Blog Gratis ',' http://bloggingpasuruan.blogspot.com/link-artikel-anda ');
document.write(d);
//-->
</script>
</div>
Ganti yang berwarna merah dengan Judul Artikel Anda dan Link Anda
Demikian tutorial cara membuat Cara Membuat Menu Navigasi Dtree Style, semoga bermanfaat…