Untuk memulai memasang menu tersebut, mari anda ikuti langkah-langkahnya sbb:
1. Seperti biasa silahkan login ke dasbor blogger anda, Lalu klik Tata Letak >>Edit HTML
2. Silahkan copy code tag dibawah ini, lalu pastekan diatas kode tag </head>
<link href='https://sites.google.com/site/tutorialbloghost/my_css/dtree.css' rel='StyleSheet' type='text/css'/> <script src='https://sites.google.com/site/tutorialbloghost/my_javascript/createdtree.js' type='text/javascript'/>
3. Klik tombol Simpan Template anda
4. Klik tombol Select All untuk highlight code tag dibawah 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,'Tutorial Blog'); 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>
5. Lalu klik Tata Letak >> Tambah Gadget HTML/JavaScript dan pastekan kode diatas kebody gadget tsb
Dan untuk previewnya silahkan klik tombol demo berikut
Selesai dan selamat mencoba