Cara Buat Menu Dtree Bergaya Windows xp

Cara Buat Menu Dtree Bergaya Windows xp

Untuk langkah langkahnya ada 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="#">MY HOME BLOG</a>');

d.add(1,0,'My Document blog','link anda');

d.add(2,1,'sub Folder 01',' link anda.sub folder sesuaikan');

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','link anda.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','#(link anda)');

d.add(2,1,'sub Folder 01',' link anda.sub folder');
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(MERAH) diatas ganti aja dengan link tujuan sobat.

Categories