MEMBUAT SUB LABEL DI BLOG 5

Tulisan ini aku buat berdasarkan request atau pertanyaan dari salah satu temen, yang menanyakan mengenai pembuatan sub label di blog. Setelah browsing kesana kemari, akhirnya aku menemukan Script yang fungsinya sama dengan sub label, alamatnya ada di Destryodrop

Menu ini untuk tampilannya biasa kita temui seperti windows explorer, dan disebut sebagai menu Dtree.

Lihat Demo

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 > HTML/Script, masukkan kode dibawah ini kedalamnya.

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

<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 keempat, 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 sich rada membingunkan, tetapi dengan mencobanya, kita akan mengerti mengenai masalah tersebut... so.. tunggu apa lagi