How to Add Classified Labels ( Sub-Labels) for blogger.

Posted by: I Give U | Date: Thursday, January 26, 2012 | Category: | 0 comments

What you will need is to get/sort all your labels and then arrange them. e.g.

LABELS

+ Games
- PC
  - Action
  - Shooter
  - RPG
- Console
  - PS 2 
  - XBOX
+ Softwares
- Windows
- MAC
- Linux

Demo Site
The script we have do not add automatically labels. First we have add the labels manually.

1. Sign in to Blogger > Layout > Edit HTML and look for

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

Now copy following code and place it to ABOVE <b:skin><![CDATA[/*
<script src='http://sites.google.com/site/freebloggerhelpbiz/freebloggerhelp/dtree.js' type='text/javascript'/> 

Save Template.

2. Now go to Add Page Element > Add A Gadget > HTML/JAVA Script. Add following code there and save.

<style type="text/css">

/*--------------------------------------------------|
| 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;
}

</style>
<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,'My example tree');
d.add(1,0,'Node 1','example01.html');
d.add(3,1,'Node 1.1','example01.html');
d.add(5,3,'Node 1.1.1','example01.html');
d.add(6,5,'Node 1.1.1.1','example01.html');
d.add(2,0,'Node 2','example01.html');
d.add(4,0,'Node 3','example01.html');
d.add(7,0,'Node 4','example01.html');
d.add(8,1,'Node 1.2','example01.html');

document.write(d);
//-->
</script>
</div>
It's done. Now you have to add labels and their links to above code manually.

Concentrate on

d = new dTree('d');

d.add(0,-1,'My example tree');

d.add(1,0,'Node 1','example01.html');
d.add(3,1,'Node 1.1','example01.html');
d.add(8,1,'Node 1.2','example01.html'); 
d.add(5,3,'Node 1.1.1','example01.html');
d.add(6,5,'Node 1.1.1.1','example01.html');

d.add(2,0,'Node 2','example01.html');

d.add(4,0,'Node 3','example01.html');

d.add(7,0,'Node 4','example01.html');

What you got? Nothing!! OK. Here is the Explanation. In the following code

d.add(1,0,'Node 1','example01.html');

There are two numbers after d.add. First number is of sub label itself and second number is of parent label.
You will have to experiment yourself to understand it. Add the name of label and link of that label as follows.

d.add(1,0,'Node 1','example01.html');

will be 

d.add(1,0,'Name of Label','Link of that Label');
OK try it your self
For thank to this post Click here!


Respected Readers:
We have published many useful posts a week with our try hard. To help us go ahead with the same spirit, a small contribution from your side will highly be appreciated. Many thanks