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.
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
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
'<!--' 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
