Catetan

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

5 comments:

Lobeittilah

31 Agt 2010 12.22.00
mas kalo kita udah punya label dan kita tinggal menambah subnya aja, scriptnya di mulai darimana?? ato scriptnya lain lgi?? trima kasih..
Teguh Bayu

9 Feb 2011 08.27.00
thx infonya gan... ane coba dulu
Gudang ilmu

14 Apr 2011 08.43.00
Maksh gan,akan Q coba,
ermand dudulz

10 Jun 2011 23.10.00
makasih gan...
filemovie

1 Jan 2012 14.54.00
mantap gan...tak coba nya dulu...klo mau download film..kunjungi blog ane ya...

Posting Komentar