Cara Membuat Menu Dtree di Blogspot

Sebenarnya artikel tentang cara membuat menu dTree di blogspot ini sudah sangat lama, namun karena saya terlanjur berjanji pada sobat saya, makanya tetap kuposting di sini. Lagi pula, dengan memostingnya, berarti saya telah mengikat ilmu lewat blog ini (hehehe, alasan...).

Apa yang membedakan menu dtree dengan menu lainnya, seperti menu vertikal atau menu horizontal, menu dropdown? Jika sobat telah membaca artikel sebelumnya tentang "Aneka Trik Membuat Menu di Blog" pasti sudah mengerti. Klo menurut saya sih, 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). Sekedar info sob, artikel ini sumbernya dari http://t4belajarblogger.blogspot.com dan pernah di publish di http://soe86.blogspot.com.

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,'Tips Komputer & Internet');
d.add(1,0,'Belajar Blogger','#.html');
d.add(2,1,'Tips Blogger',' #.html');
d.add(3,2,'Tahap Awal Membuat Blog','http://soe86.blogspot.com/search/label/A.%20Tahap%20Awal%20Membuat%20Blog');
d.add(4,2,'Tahap Lanjutan dalam Bloging','http://soe86.blogspot.com/search/label/B.%20Tahap%20Lanjutan%20dalam%20Bloging');
d.add(5,2,'Tahap Profesional dalam Bloging','http://soe86.blogspot.com/search/label/C.%20Tahap%20Profesional%20dalam%20Bloging');
d.add(6,0,'Download',' #.html');
d.add(7,6,'Trik Mendownload',' #.html');
d.add(8,7,'Aneka Trik Mendownload','http://soe86.blogspot.com/search/label/Trik%20Mendownload');
d.add(9,0,'Internet Murah',' #.html');
d.add(10,9,'Tips Internet Murah',' #.html');
d.add(11,10,'Aneka Tips Internet Murah','http://soe86.blogspot.com/search/label/Tips%20Internet%20Murah','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
d.add(12,0,'DAFTAR ISI FULL','http://soe86.blogspot.com/2010/04/daftar-isi.html');
d.add(13,0,'Promosi Blog','http://soe86.blogspot.com/2010/04/manfaat-tukaran-link.html');
d.add(14,0,'Belajar Otodidak','http://soe86.blogspot.com/2010/07/belajar-otodidak.html');
d.add(15,0,'<blink>Mau Bikin Menu Begini?</blink>','http://soe86.blogspot.com/2010/04/aneka-trik-membuat-menu-di-blog-blogger.html','','','img/trash.gif');
document.write(d);
//-->
</script>
</div>

Jika sudah, save kemudian lihat hasilnya. Jika sobat belum mengeditnya, tampilannya akan sama persis dengan milik saya. Silahkan sobat mengganti link saya kemudian ganti kata-katanya. Yang berwarna biru ada kata-kata yang saya maksud, sementara yang berwarna merah adalah link menunya, silahkan ganti sesuai keinginan. 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 :)