MEMBUAT SUB LABEL DI BLOG






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




Anda sedang membaca artikel tentang MEMBUAT SUB LABEL DI BLOG dan anda bisa menemukan artikel MEMBUAT SUB LABEL DI BLOG ini dengan url https://tutorial-blogs.blogspot.com/2011/04/membuat-sub-label-di-blog.html,anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel MEMBUAT SUB LABEL DI BLOG ini sangat bermanfaat bagi teman-teman anda,namun jangan lupa untuk meletakkan link MEMBUAT SUB LABEL DI BLOG sebagai sumbernya.

Related Stories Widget by LinkWithin