Membuat Menu Explorer Pada Blog

Hey kawan2 semua, kali ini saya akan berbagi ilmu membuat menu explorer seperti yang ada di blog saya ini. Bentuk menu ini sama seperti halnya file explorer di windows xp. Untuk mendapatkan ilmu ini awalnya saya lagi iseng-iseng ngesearch di google, tiba-tiba ketemu dehh ilmu ini yang pasti bukan ilmu hitam lohh..hahahaha...

Terima kasih buat kang Adin atas tutorialnya. Langsung aja dehh kita berbagi ilmu.

Langkah-langkahnya:
1).
# Seperti biasa loggin ke akun blogger kalian>> Lalu klik tata Letak>> Klik Edit HTML
# Letakkan kode/ script berikut di atas kode </head>

<link href="http://sites.google.com/site/amatullah83/js-indahnyaberbagi/dtree.css" rel="StyleSheet" type="text/css"></link>
<script src="http://sites.google.com/site/amatullah83/js-indahnyaberbagi/createdtree.js" type="text/javascript">
</div>

# Klik Simpan template.

2).
Klik elemen halaman>> Tambah Gadget>> HTML>> Letakkan kode berikut ini pada kolom konten:

<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,'Adin collections');
d.add(1,0,'Folder 01','#.html');
d.add(2,1,'Sub Folder 01',' #.html');
d.add(3,2,'Sub/file Sub Folder 01',' link anda.html');
d.add(4,0,'Folder 02',' #.html');
d.add(5,4,'Sub Folder 02',' #.html');
d.add(6,5,'Sub/file Sub folder 02',' link anda.html');
d.add(7,0,'Folder 03',' #.html');
d.add(8,7,'Sub Folder 03',' #.html');
d.add(9,8,'Sub/file Sub folder 03',' link anda.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
d.add(10,0,'File[non-folder]',' link anda.html');
d.add(11,0,'File[non-folder]',' link anda.html');
d.add(12,0,'File Single',' link anda.html','','','img/trash.gif');
document.write(d);
//-->
</script>
</div>

Preview:




Slamat mencoba !!!

^_^