Membuat Sub Menu / Menu D'Tree

Contoh Menu D'Tree bisa dilihat disamping sidebar di blog ini (pada bagian label/kategori).

Untuk prosesnya, login ke blogger, kemudian pilih Layout > Edit HTML, kemudian cari kode, <b:skin><![CDATA[/*, setelah ketemu copy kode javascript dibawah tepat diatasnya,,br>

<script type="text/javascript" src="http://www.yourjavascript.com/20321202212/dtree.js"></script>

langkah kedua cari kode ]]></b:skin>, dan copy kode css dibawah ini tepat diatasnya,

/*--------------------------------------------------
dTree 2.05 www.destroydrop.com/javascript/tree/
---------------------------------------------------
Copyright (c) 2002-2003 Geir Landrö
--------------------------------------------------*/

.dtree {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
width:480px;
color: #000;
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;
}

selanjutnya simpan.

Langkah ketiga, pilih Page Element, kemudian pilih Add Gadget &gt; HTML/Script, masukkan kode dibawah ini kedalamnya.

<div class="dtree">

<p><a href="javascript: d.openAll();">open all</a> <a href="javascript: d.closeAll();">close all</a></p>

<script type="text/javascript">
<!--

d = new dTree('d');

d.add(0,-1,'Home','http://elsymedia.blogspot.com');

d.add(1,0,'Download Film');
d.add(10,1,'Lihat Judul Film','http://elsymedia.blogspot.com/2010/10/28-days-later-28-weeks-later-bride-wars.html','','','http://24rohman.googlepages.com/icon_user.gif');

d.add(2,0,'Downlad Game');
d.add(20,2,'Game PC','http://elsymedia.blogspot.com/2010/09/25-to-life-age-of-mythology-assassins.html','','','http://24rohman.googlepages.com/icon_user.gif');

d.add(3,0,'Download Software');
d.add(30,3,'Browsers n Plugins','http://elsymedia.blogspot.com/2010/10/browsers-and-plugins-firefox-3.html','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(31,3,'File Sharing','http://elsymedia.blogspot.com/2010/10/download-file-sharing-emule-0.html','','','http://24rohman.googlepages.com/icon_user.gif');

d.add(4,0,'Download Windows');
d.add(40,4,'Lihat Koleksi Windows','http://elsymedia.blogspot.com/2010/10/28-days-later-28-weeks-later-bride-wars.html','','','http://24rohman.googlepages.com/icon_user.gif');

d.add(5,0,'Bisnis Online');
d.add(50,5,'Review','http://elsymedia.blogspot.com/2010/10/cashgopher-paybox.html','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(51,5,'PTC','http://elsymedia.blogspot.com/2010/09/cashiumnet.html','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(52,5,'Traffic Exchange','http://elsymedia.blogspot.com/2010/10/trafic-exchanger.html','','','http://24rohman.googlepages.com/icon_user.gif');

d.add(6,0,'Tutorial Blog');
d.add(60,6,'Apa saja tutorialnya','http://elsymedia.blogspot.com/2010/10/mendapatkan-backlinks-dengan-cepat_16.html','','','http://24rohman.googlepages.com/icon_user.gif');

document.write(d);
//-->
</script></div>

Silahkan diganti alamat html di atas tadi dengan alamat html anda sendiri
Anda bisa mengganti ikonnya dengan ikon Anda sendiri

d.add(60,6,'------','http:--------.html','','','alamat ikon yang anda pakai');

Perhatian :
Nomor-nomor di atas bersifat unik, jadi tidak ada nomer yang sama.

d.add(1,0,'Download Film');

Angka 1 diatas menunjukkan angka parent, untuk menambahkan sub menu taruh angka 1 pada tingkatan no 2. Sehingga menjadi :

d.add(10,1,'Download Film');

begitu seterusnya.