Cara Membuat Menu Dtree di Blogspot

Artikel Anyar yang Berhubungan

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 di sini http://soe86.blogspot.com/2010/04/aneka-trik-membuat-menu-di-blog-blogger.html 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).

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 :)