Cara Membuat Menu Dtree di Blogspot

Syalom..., Saat ini RE akan bebagi tentang cara membuat menu dTree di blogspot. Apa yang membedakan menu dtree dengan menu lainnya, seperti menu vertikal atau menu horizontal, menu dropdown? Pasti sobat sudah mengerti, keunikan dari menu dTree ini memiliki tampilan yang sangat mirip dengan tampilan menu windows explorer, sehingga pengunjung dapat tertarik dan lebih mudah mencari artikel karena penggunaan menu ini di jumpai di komputer masing-masing (bagi pengguna windows).


Langsung saja, bagaimana cara membuat menu dTree di blogspot? Silahkan sobat ikuti langkah-langkahnya berikut ini.

1. Masuk pada halaman EDIT HTML, kemudian letakkan kode berikut di atas 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>

Kemudian klik SAVE TEMPLATE.

2. Masuk pada RANCANGAN kemudian ELEMEN LAMAN setelah itu klik TAMBAH GADGET, pilihlah GADGET HTML. Setelah itu, pastekan kode berikut ini:

<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,'Isi dengan judul');
d.add(1,0,'Isi dengan judul','#.html');
d.add(2,1,'Isi dengan judul',' #.html');
d.add(3,2,'Isi dengan judul','isi dengan link menu sobat');
d.add(4,2,'Isi dengan judul','isi dengan link menu sobat');
d.add(5,2,'Isi dengan judul','isi dengan link menu sobat');
d.add(6,0,'Isi dengan judul',' #.html');
d.add(7,6,'Isi dengan judul',' #.html');
d.add(8,7,'Isi dengan judul','isi dengan link menu sobat');
d.add(9,0,'Isi dengan judul',' #.html');
d.add(10,9,'Isi dengan judul',' #.html');
d.add(11,10,'Isi dengan judul','isi dengan link menu sobat','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
d.add(12,0,'Isi dengan judul','isi dengan link menu sobat');
d.add(13,0,'Isi dengan judul','isi dengan link menu sobat');
d.add(14,0,'Isi dengan judul','isi dengan link menu sobat');
d.add(15,0,'<blink>Mau Bikin Menu Begini?</blink>','isi dengan link menu sobat','','','img/trash.gif');
document.write(d);
//-->
</script>
</div>

Jika sudah, save kemudian lihat hasilnya. Silahkan sobat mengganti yang berwarna biru dengan judul link sobat, sementara yang berwarna merah adalah link menunya. Ingin menambahkan menu (folder) baru? Insya Allah akan saya posting, soalnya agak panjang penjelasannya. Jika mengalami masalah, sobat dapat berkomentar...
Demikianlah cara membuat menu dTree di blogspot ini, mohon maaf atas segala kekurangan, semoga bermanfaat :)