How to Classify Blogger Labels?

Blogger introduced Labels to categorize posts with the introduction of the Layout Template. A Label is added in the bottom frame of the post editor when creating a post. All Labels are shown in a Label widget in the sidebar. When a Label is clicked all posts associated with it are displayed.


If you want to show which Labels are associated with most posts in your blog yu can add a Label Cloud where the size of the Label varies with the number of associated posts. If you have a lot of Labels you can classify them as shown below :


As an example have a look at the "Labels Classified" widget I have added above this post column............

1. COLLECT ALL LABELS

The first step is to collect all the Labels you have made in your blog. For this login at Blogger.com and click 'Posts' link on Dashboard. The List of Posts page will open. All the Labels are listed in the left sidebar. Highlight all the labels and copy them and paste to a Notepad file to sort them out. For example these are some of the Labels in my blog :

Content (3)
Control Viewers (1)
Country Map (1)
Create Account (1)
Create Blog (1)
CSS (21)
CSS Opacity (1)
Custom Domains (1)
Custom Search Engine (1)
Customize (2)
Data (1)
del.icio.us (1)
Description (1)
Digg (1)
Digg Buttons (1)
Docs (2)
Dofollow (2)
Domain Name (1)
Dots Template (1)
Dropcaps (1)

2. CLASSIFY LABELS

The second step is to classify the Labels. I have done it like this in this blog :

Blogging
Design
Search Engines
Make Money
Traffic Analysis
etc..

These are the Level 1 Labels. Then come the Level 2 Labels. For example under 'Blogging' I have sub labels :

Create Account

Blogging Platforms

Blog Posts

Pictures

List Posts

Introduction

Then the Level 3 Labels as under 'Create Account' they are :

Start a Blog

Login Checklist

Transfer Blog Ownership

These are linked to actual posts on the blog. You can link a Label to a post at any of the above levels.

3. DOWNLOAD CODE

The code required to display and classify labels in this style is available at this site. Download the zip file and extract all the files in it to a folder.

4. PREPARING LABELS CODE

The Labels code has to be prepared now before pasting into a Html Page element. This is an example code :

<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: 25px;
       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(2,0,'Node 2','example01.html');
d.add(3,1,'Node 1.1','example01.html');
d.add(4,0,'Node 3','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(7,0,'Node 4','example01.html');
d.add(8,1,'Node 1.2','example01.html');
d.add(9,0,'My Pictures','example01.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
d.add(10,9,'The trip to Iceland','example01.html','Pictures of Gullfoss and Geysir');
d.add(11,9,'Mom\'s birthday','example01.html');
d.add(12,0,'Recycle Bin','example01.html','','','img/trash.gif');

document.write(d);
//-->
</script>
</div>

You have to insert your own labels here. The Root Label goes in this line :

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

For example my root label is 'Categorized Labels'. The code for it is :

d.add(0,-1,'Categorized Labels');

Here '0' is the number of the root and '-1' is number of the parent label (no parent). Then your Level 1 Labels are coded like this :

d.add(1,0,'Blogging');
d.add(19,0,'Design');
d.add(54,0,'Search Engines');

Then add the Level 2 Labels like this :

d.add(2,1,'Create Account');
d.add(6,1,'Blogging Platforms');
d.add(8,1,'Blog Posts');

As you can see each code line has two numbers after 'd.add' : The first number is that of the Label and the second number is that of the parent label. The Level 1 labels all have '0' as the second number. The Level 2 Labels all have '1' as the second number because they are all grouped under the first Label : 'Blogging'. Hence he code line for each is :

d.add(LABEL_NUMBER,PARENT_NUMBER,'LABEL_NAME');


Lastly add the Level 3 Labels like this :

d.add(3,2,'Start a Blog','http://betabloggerfordummies.blogspot.com/2006/10/how-to-start-blog.html');

d.add(4,2,'Login Checklist','http://betabloggerfordummies.blogspot.com/2007/09/checklist-for-blogger-login-problems.html');

These Labels are linked to the actual blog post hence they have the link of the page they are linked to in their code line :

d.add(LABEL_NMBER,PARENT_NUMBER,'LABEL_NAME','PAGE_URL');

After creating this file in Notepad copy it and paste it in a Html Page element.

5. UPLOADING JAVASCRIPT

The whole code works due to Javascript code. For this login at Blogger.com and click on Layouts link in Dashboard. Then click on Edit Html subtab of Layout tab. Scroll down in Template Code box and paste this line of code :

<script src='http://simblogg.googlepages.com/dtree.js' type='text/javascript'/>

immediately before this tag :

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

Save Template. Clear Cache and View Blog.