0 Membuat Menu Tree Blog

Share

Caranya sebagai Berikut

• 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>

• Kemudian 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.

• Setelah itu, pilih Page Element, kemudian pilih Add Gadget > 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,'Contoh Menu Dtree');
d.add(1,0,'Node 1','contoh01.html');
d.add(3,1,'Node 1.1','contoh01.html');
d.add(5,3,'Node 1.1.1','contoh01.html');
d.add(6,5,'Node 1.1.1.1','contoh01.html');
d.add(2,0,'Node 2','contoh01.html');
d.add(4,0,'Node 3','contoh01.html');
d.add(7,0,'Node 4','contoh01.html');
d.add(8,1,'Node 1.2','contoh01.html');
document.write(d);
//-->
</script>

• Langkah terakhir, ganti link sesuai dengan link sendiri, coba lihat kode dibawah :

d = new dTree('d');

d.add(0,-1,'Contoh Menu Dtree');

d.add(1,0,'Node 1','contoh01.html');
d.add(3,1,'Node 1.1','contoh01.html');
d.add(8,1,'Node 1.2','contoh01.html');
d.add(5,3,'Node 1.1.1','contoh01.html');
d.add(6,5,'Node 1.1.1.1','contoh01.html');
d.add(2,0,'Node 2','contoh01.html');
d.add(4,0,'Node 3','contoh01.html');
d.add(7,0,'Node 4','contoh01.html');

Gantilah link contoh01.html sesuai dengan link sendiri.
sedangkan untuk melihat apakah link tersebut termasuk dari sub label atau parentnya dilihat dari dua nomor setelah add, d.add(1,0....
angka pertama merupakan sub label, sedangkan angka kedua merupakan parent dari sublabel.


Memang cukup merepotkan sih, tapi bagi yang mau mencoba silahkan saja. Dan semoga anda berhasil