How to create Sublabels / Hierarchical Labels in Blogspot

I always wanted my label section to look like the archive section where labels can have hierarchy and the number of posts is displayed beside each label. I learned how to create the hierarchical tree from this blog but the nodes have to be added one by one and the number of posts per label are not displayed so I tweaked it a little to suit my needs. Here are the steps:

1. Add the Labels gadget if is not yet added
   From your dashboard, click Layout -> Add a Gadget and select Labels
2. Add an HTML gadget. This is where you will create your hierarchical labels.
   From your dashboard, click Layout -> Add a Gadget and select HTML/Javascript
3. Ensure that the Labels gadget comes first before the HTML gadget in your layout.
   From your dashboard, click Layout and arrange your gadgets by dragging them to the desired location so that the Labels gadget is on top or comes first before the HTML gadget
4. Update the Template
   
   1. Add the dtree javascript.
      From your dashboard, click Template -> Edit HTML -> Proceed and check Expand Widget Templates. Copy and paste this code

      <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'/>

      after this tag
      

      <b:skin><![CDATA[/*

   2. Remove the Label widget content
      Find the Label widget code. It looks like this

      <b:widget id='Label1' locked='false' title='Labels' type='Label'>
      <b:includable id='main'>
          
       ...  
      
      </b:includable>
      </b:widget>

      Replace the code inside <b:includable id='main'> and </b:includable> with this code

      <script type='text/javascript'>
        var labelCountMap = {};
        <b:loop values='data:labels' var='label'>
           labelCountMap ["<data:label.name/>"] = "<data:label.count/>";
         </b:loop>
      </script>

   3. Save template
5. Prepare the code of the Hierarchical Labels
   Copy the code below and replace the data with your own Labels. The data is in format
   

   parentLabel: { subLabels }

   The subLabels are comma separated. If the parentLabel doesn't have subLabels, replace it with {}.
   

   <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 = {
    'Label 1' : {
     'Label 1.1' : {},
     'Label 1.2' : {
      'Label 1.2.1' : {}
     }, 
     'Label 1.3' : {}
    }, 
    'Label 2' : {
     'Label 2.1' : {}, 
     'Label 2.2' : {}
    }, 
    'Label 3' : {}, 
    'Label 4' : {}};
   
   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>

6. Paste the code in the HTML widget
   From your dashboard, click Layout and Edit the HTML widget. Paste the code inside Content and Save