Cara Membuat Menu dTree Untuk Blog

Kali ini saya ingin berbagi lagi trik membuat menu dtree. Apakah menu dtree itu? Menu dtree yang saya maksud adalah menu yang menyarupai menu Windows Explorer seperti pada image diatas. Menu seperti ini bisa juga kita tampilkan pada web atau blog sobat seperti yang terlihat pada contoh di bawah ini. Buat yang berminat bisa anda coba langsung mempraktikannya.

Arsip

Open All | Close All

Cara Pemasangan :

Klik "More Options" selector box kemudian klik "Layout" setelah itu pilih "Add a Gadget" kemudian pilih "HTML/JavaScript", seperti gambar dibawah ini.

Copy-paste kode berikut ini di kotak postingan gadget.

<script src="http://sites.google.com/site/monozcore/home/createdtree.js"></script> <style> .dtree { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; color: #666; white-space: nowrap; } .dtree img { border: 0px; vertical-align: middle; } .dtree a { color: #333; text-decoration: none; } .dtree a.node, .dtree a.nodeSel { white-space: nowrap; padding: 1px 2px 1px 2px; } .dtree a.node:hover, .dtree a.nodeSel:hover { color: #333; text-decoration: underline; } .dtree a.nodeSel { background-color: #c0d2ec; } .dtree .clip { overflow: hidden; } </style> <center> <div align="left" style="width:250px;overflow:auto;border:1px #ccc solid;border-radius:3px;"> <div class="dtree"> <div align="center" style="font-size:large;font-wieght:bold;background:#CCC;"><a href="javascript: d.openAll();">Open All</a> | <a href="javascript: d.closeAll();">Close All</a></div> <div style="padding:5px;"> <script type="text/javascript">  </script> </div> </div> </div> </center>

Catatan :
- Silahkan ganti tulisan monozcore pada kode diatas dengan nama Blog sobat atau URL blog sobat. Tambahkan yang perlu ditambahkan !?!.. Letak dan posisi folder juga dapat disesuaikan dengan yang anda inginkan.