18 January 2010

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

Advertisements


Our reader, SHAILABH recently asked me: "Do u have any idea how i can classify the labels? and for each class i want to create dropdown menu. Plz help." So I done some research and found a nice script at Destroydrop

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');

If you find any difficulty about this hack reply me.

Related Posts

4 comments

April 24, 2010 at 5:06 AM

Great tool thank you Sir...but it only working in my blog page and does not work in my custom domain, I dont know where is my fault but the blog page and the custom domain page are same template but it still does not work in my custom domain www.softprobd.com would you plz give me some suggetion to working this great tool in my site. Thank in advance

September 9, 2011 at 6:47 PM

Got it!

But the nodes are too dependent on the numbering such that I want to add a new label, the numbering of almost all the nodes will be affected.

Is there are easier way?

bulbsandbubbles.blogspot.com

January 13, 2012 at 5:25 PM

nice article iam trying to configure it but cant can you please helpme

January 13, 2012 at 11:26 PM

I know the codes and procedure is lengthy. So do it carefully.

Post a Comment

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More