This is How to make sublabels in tree structure tutorial
Main Idea is from this blog(
How to create Sublabels / Hierarchical Labels in Blogspot) and I modify to use my blog
I'm new to web programming(and Javascript), so I'm hardly understand these codes, so just enough to make dTree
Sequece
1. Add Gadgets
* blog-layout click
1) sidebar-right-1, add 'HTML/JavaScript' gadget
- title: 'Labels'
- content: "." temporary
2) sidebar-right-1, add 'tag' gadget
- title: 'tag'
=> 'tag' gadget must be before 'HTML/JavaScript' gadget
so change order if it's not
2. Add Template HTML Code
* blog-template-HTML edit click
1) add below code right after <head>
these codes must work before dTree code usage
I change location from reference blog.
<link href='https://sites.google.com/site/efekefek/file-js/dtree.css' rel='StyleSheet' type='text/css'/>
<script src='https://sites.google.com/site/efekefek/file-js/createdtree.js' type='text/javascript'/>
2) find below code
<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
...
</b:includable>
</b:widget>
-> and change ... to below code
these code get each label count to be used at dTree
<script type='text/javascript'>
var labelCountMap = {};
<b:loop values='data:labels' var='label'>
labelCountMap ["<data:label.name/>"] = "<data:label.count/>";
</b:loop>
</script>
- blue 'Label1' can be changed by the Label gadget number
3. Add 'HTML/JavaScript' Gadget content
- add below code to Gadget content and change blue code by your own labels
'<!--' and '//-->' are erased. at first time I thought it should be there, but doesn't work
<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">
function isEmpty(obj) {
for(var prop in obj) {
if(obj.hasOwnProperty(prop))
return false;
}
return true;
}
function addMap(d, startingNode, parentNode, map) {
for (var key in map) {
if (isEmpty(map[key])) {
d.add(startingNode++,parentNode,key+' ('+labelCountMap[key]+')','/search/label/'+key);
} else {
d.add(startingNode++,parentNode,key+' ('+labelCountMap[key]+')','/search/label/'+key);
startingNode = addMap(d, startingNode, startingNode-1, map[key]);
}
}
return startingNode;
}
var data = {
'label1' : {
'label2' : {}
}
};
d = new dTree('d');
d.config.useLines = true;
d.config.useIcons = false;
d.config.inOrder = true;
d.add(0,-1,'');
addMap(d, 1, 0, data);
document.write(d);
</script>
</div>
4. Result
