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
amazing! thank you. Can you make one with more sublevels?
답글삭제Nice blog. thanks for sharing. . Especia Associates is one of the leading Financial Advisors & Consultants company In India. We provide CA Services, Virtual CFO Services, Company Secretary Services. The role of a CFO has become more difficult as a result of digitization. In this competitive environment, a CFO should be able to perform financial, management, and business functions. Virtual CFO administrations have the ability to implement any changes to the organization's authoritative structure as and when they are required for the business's growth. if you need Virtual CFO Services call 9310165114 or visit us Virtual CFO Services
답글삭제TDS return filing in Mumbai is a vital financial compliance process for businesses and individuals operating in the bustling metropolis of Mumbai, India. Mumbai, known as the financial capital of India, is home to a diverse array of businesses, ranging from startups to multinational corporations. To maintain financial transparency and adhere to the tax regulations set forth by the Income Tax Department, entities in Mumbai are required to file their TDS (Tax Deducted at Source) returns.
답글삭제