Membuat Menu dtree

Assalamualaikum Wr. Wb.

Posting kali ini saya akan memberikan tutorial membuat menu dtree seperti yang ada di blog saya ini.

Apa itu dtree?

dtree adalah menu yang seperti windows explorer itu lho.nah udah pada tau semua kan?

kalo gak tau,

nie screencrotnya :

Gimana? Tertarik?

Mari kita lihat ramuannya :

1.Masuk ke akun Blogger anda
2.Pilih Template lalu Edit HTML
3.Jangan Lupa Centang Bagian Kanan Atas Expand Template Widget

4.Cari kode </head>

5.Copy paste kode dibawah ini tepat diatas kode </head>

<link rel="StyleSheet" href="http://adystyra-project.googlecode.com/files/dtree.css" type="text/css" />

<script type="text/javascript" src="http://adystyra-project.googlecode.com/files/dtree.js"></script>

6.Klik Save

7.Lalu pergi ke Tata Letak

8.Tambahkan Gadget pada sidebar kamu

9.Pilih HTML/Java Script

10.Copy paste kode dibawah ini 

<div class="dtree">
<p><a href="javascript: d.openAll();"><img src="http://adystyra-project.googlecode.com/files/nolines_plus.gif" /><b>Open all</b></a> | <a href="javascript: d.closeAll();"><img src="http://adystyra-project.googlecode.com/files/nolines_minus.gif" /><b>Close all</b></a></p>
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'Home','http://adystyra.blogspot.com','');
d.add(1,0,'Kuliah','','','','');
d.add(3,1,'Semester 1');
d.add(10,3,'Pemrograman Terstruktur','http://www.adystyra.blogspot.com/search/label/Pemrograman%20Terstruktur','','','');
d.add(20,3,'Sistem Digital');
d.add(30,3,'Bahasa Inggris');
d.add(40,3,'Kalkulus 1');
d.add(50,3,'Fisika Dasar');
d.add(5,1,'Semester 2');
d.add(10,5,'Struktur Data');
d.add(20,5,'Organisasi Komputer');
d.add(7,1,'Semester 3');
d.add(10,7,'Sistem Operasi','http://www.adystyra.blogspot.com/search/label/Sistem%20Operasi','','','');
d.add(20,7,'Pemrograman Berorientasi Objek','http://www.adystyra.blogspot.com/search/label/PBO','','','');
d.add(4,0,'Software');
d.add(2,4,'Android');
d.add(6,4,'Windows');
d.add(8,4,'Linux');
document.write(d);
//-->
</script>
</div>

11.Klik Save,dan Lihat blog kamu untuk mengetahui perubahannya

Note : Untuk Label Home ,Kuliah dan Software bisa kamu ubah sesuai kebutuhan kamu

Terima Kasih semoga bermanfaat