Cara Buat Menu Dtree Bergaya Windows xp

Cara Buat Menu Dtree Bergaya Windows xp

Dalam tutorial blog kali ini kang Roni akan mengajak teman teman untuk membuat menu dtree blog bergaya windows xp/explore,meski sebelumnya sudah memberikan tutorial cara membuat menu blog seperti menu horizontal dengan css,menu navigasi dropdown horizontal bahkan menu breadcrumb akan tetapi kang Roni rasa tidak ada salahnya bila kali ini juga memberikan tutorial tentang cara membuat menu,dan pastinya tutorial kali ini sangat keren karena mirip dengan gaya windows xp.

Kira kira mirip gambar dibawah

Kalo teman teman tertarik ikuti saja langkah langkahnya dibawah ini.

1.Login Blogger.com

2.Rancangan --> Edit HTML.Jangan lupa download template lengkap dulu untuk keamanan edit dan beri centang pada kotak Expand Template Widget untuk menampilkan semua kode template.

3.Taruh kode script berikut ini diatas kode </head>

<link rel="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>

4.Klik simpan.

5.Selanjutnya sobat buka Rancangan lalu Tambah Gadget dan pilih HTML/JavaScript,kemudian masukkan kode menu dtree dibawah ini.

<h2>Jelajah blog</h2>

<div class="dtree">

<p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>

<script type="text/javascript">

<!--

d = new dTree('d');

d.add(0,-1,'<a href="http://roningasinanblog.blogspot.com">MY HOME BLOG</a>');

d.add(1,0,'My Document blog','http://roningasinanblog.blogspot.com/');

d.add(2,1,'sub Folder 01',' http://roningasinanblog.blogspot.com/search/label/Tutorial%20blog');

d.add(3,2,'file dari Folder 01',' link anda.html');

d.add(4,2,'file dari Folder 01',' link anda.html');

d.add(5,0,'Folder 02','http://roningasinanblog.blogspot.com/p/tutorial-blog.html');

d.add(6,5,'Sub Folder 02',' #.html');

d.add(7,6,'file dari folder 02',' link anda.html');

d.add(8,0,'Folder 03',' #.html');

d.add(9,8,'Sub Folder 03',' #.html');

d.add(10,9,'file dari folder 03',' link anda.html','Pictures I've taken over the years','','','img/imgfolder.gif');

d.add(11,0,'Folder 04',' link anda.html');

d.add(12,11,'File dari Folder 04',' link anda.html');

document.write(d);

//-->

</script>

</div>

MAKA AKAN TAMPIL MENU SEPERTI DIBAWAH INI

Sekarang sobat perhatikan angka angka pada kode menu dtree diatas,angka sebelah kiri terlihat berurutan dan sebelah kanan tidak berurutan.Contohnya

d.add(1,0,'My Document blog/folder utama','http://roningasinanblog.blogspot.com/');

d.add(2,1,'sub Folder 01',' http://roningasinanblog.blogspot.com/search/label/Tutorial%20blog');

d.add(3,2,'file dari Folder 01',' link anda.html');

d.add(4,2,'file dari Folder 01',' link anda.html');

Angka 1 pada baris paling atas sebelah kiri adalah folder utama sedangkan angka 2,1 adalah sub folder utama atau cabang dari folder utama,dan angka ,1 itu berarti sub folder mengikuti folder utama.

Bila sobat ingin menambahkan cabang berupa file lebih banyak lagi sobat tinggal mengurutkan angka.

1,0

2,1

3,1

4,1 begitu terus selanjutnya

atau sobat mau membuat cabang pada angka 4,sobat tinggal mengurutkan saja

5,4

6,4

7,4

angka 4 sebelah kanan menunjukkan bahwa file ini masih ikut pada angka 4 sebelah kiri.

Untuk kode yang di beri warna sama(UNGU) diatas ganti aja dengan link tujuan sobat.Sekian tutorial blog dari kang Roni Cara Buat Menu Dtree Bergaya Windows xp bila ada kesulitan tanyakan saja di kolom komentar insya Alloh akan kang Roni jawab.

Posted in: go bloger