How to Classify Blogger Labels? ~ The Blog Doctor.

How to Classify Blogger Labels?

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

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............


The first step is to collect all the Labels you have made in your blog. For this login at 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) (1)
Description (1)
Digg (1)
Digg Buttons (1)
Docs (2)
Dofollow (2)
Domain Name (1)
Dots Template (1)
Dropcaps (1)


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

Search Engines
Make Money
Traffic Analysis


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


List Posts


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.


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.


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 | |
| Copyright (c) 2002-2003 Geir Landrö |

.dtree {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 25px;
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;

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


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(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 :


Lastly add the Level 3 Labels like this :

d.add(3,2,'Start a Blog','');

d.add(4,2,'Login Checklist','');

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 :


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


The whole code works due to Javascript code. For this login at 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='' type='text/javascript'/>

immediately before this tag :

Save Template. Clear Cache and View Blog.


Herbert Wong said...

Hi Vin,
This is a great feature.I was hoping & waiting for something similar but putting it at the bottom of my heading, something like a dropdown menu/tab. Now I can consider using this feature instead.Thanks

jeisea said...

Thanks Vin. You are really good at explaining things. I'll come back to this one. I need to tidy up my blog but it's a bit beyond me at present.

LG said...

Great post! Thanks! Also I was wondering when tagging my posts I want to use just a few general tags but I wonder are those tags what are used in Google Searches?

Vin said...


Label keywords are used by search engines.

Ruben said...

Hi Vin. I love your site! It's helped me so much. I really want to try this but am not very advanced. I don't understand what to do with the extracted files. I am hosting with blogger so those just sit on my hard drive. Is this only for self-hosted blogs? I'm not a programmer--sorry. Will this impact search engine optimization in any way? The labels have been good to me.

Vin said...


The extracted files can be used or you can just follow my instructions. Blogs hosted anywhere can implement this. It does not adversly affect SEO.

Anonymous said...

i want to make sub- labels in my blog. but its so confusing to understand what's written above and apply it so if u can pls help me out in any simpler way.
ma blog:-

Vin said...


I agree, it is a difficult hack. At what stage are you facing difficulty?

LowDownTown said...

Vin, can I swap out those gifs (in the img folder) for different ones? How do I get them to upload? Thx.

Vin said...


You will have to upload your images to a freehost.

Then copy their links and replace them in the Javascript code file and save it :

Gilbert said...

hi, Vin,

Thanks a lot for the sharing, it really helps me in building my blog.
But the code zip file link seems to be missing, would please have it checked?
Thanks many times!

Vin said...


You will have to inquire with the owner of that site.

foodie said...

Hi Vin,
I'm not a computer genesis and i really have trouble understand how to modify the label. If you can please help me out, my blog is you see that i'm trying to have 2 different labels at the sidebar, one is location another is food type. But as soon as i create a label at the sidebar, it select everything. How can i gain fexibility to what i was to see in each label.

Vin said...


Add Label links in two different Link List Page elements.

Add the Location Label links in one Link List and the Food type in another.

foodie said...

How do i create two different Label Links? Does it mean after it's done i will have two separate Label entry at the bottom of the post?

Vin said...


Login at
Click Layout link on Dashboard.
Click Add Page Element link in sidebar.
In Pop up window choose Link List Page element.
Give it Title 'Location'.
Copy URL of a Location Label :

Paste it in the New Site URL box and type the name "LES" in the New Site Name box. Then click the "ADD LINK" button.

Add your other Location Label Links in same manner and Save.

Create your Food Type Label Link List Page Element in same manner.

j... said...

Hi. Great site you have here.

Well, it happens that I followed your tutorial and it worked. Then I added a few "links" to level 2 and 3 labels, without altering anything in their order. Result: all messed up.

Tried to revert to how it was before my modifications and... nothing. Now the only thing the widget displays is a couple of (not working "buttons": "open all" and "close all". What can I do?

Vin said...


It is a complex hack. Best approach is to delete it and go through the steps again to create a new one.

j... said...

Well... already figured out what was messing things up. Also found that this tree can be quite "scalable", since e.g.

d.add(0,-1,'Letters & Numbers');




and now, once reached the last item in this class, the next item in this example does not have to be nr.27... Supposing that one may want to add more tags to an already defined category without having to rebuild the whole tree. Thus,


will work perfectly. Do you think it is worthy to focus this in your (great) article? Since I found this useful and it's not immediately evident (it wasn't to me & I even did "read the manual")...

Thanks a lot for your advice and keep up the good work: you are making a difference.

SirMarjAlot said...


This does not work for me at all, i just get error on page!.

I added the bit before CDATA, just added a couple of nodes to keep simple, just does not work.

But nothing is displayed except the openall closeall links that dont work. Just error on page.

Whats wrong?

Vin said...


It is a complex widget. Just delete your widget and follow the instructions double checking after each step. As you can see it works on this blog.

KayaM said...

ooh man .. i really wana put this code in my blog
.. but i am an amature ..i can't get a word of this script .. from A to Z . just can't do it! :S:S:S
can anyone help me out with this?

Apple said...

Hi Vin,
You really did a great work. But I have encountered a problem in my blog...

The lables in my tree cannot be collapsed, but all expanded. I can't find the sign "+" and "-" in the tree. Could you please help me fix it? Thanks a lot!

Vin said...


I don't think you have executed Step 5 in the above post. Insert the Javascript code line in your template as shown above and save.

Apple said...

Hi Vin,
I did follow and finish step 5, i.e. copy the code and inset into HTML. But, the categories of the tree is all expanded without the sign +/-.

I've tried many times but the problem still exist. Please help.

Thanks a lot!!!!!!!!!!

Vin said...


Where did you put the code? I do not see it in the page source!

Use same code as shown in Step 5 and put it in the place shown in Step 5.

Shoumitro said...

Superb post. However, before proceeding, I want to clear my doubts.

Query 1. Followed the first step and collected all labels. The label ‘Fun’ appears thrice in 3 posts in my blog – the posts are named: ‘Forgetful’, ‘Nipped in The Bud’, and ‘Shock’. Now I proceed to prepare the Label Code (step 4). When I reach Level 3 -- in the place of LABEL_NAME in the Code Line “d.add(LABEL_NMBER,PARENT_NUMBER,'LABEL_NAME','PAGE_URL');” -- shall I put name of the post (e.g. ‘Forgetful’), or the actual Label words, i.e., ‘Fun’? If it is ‘Fun’, then since it appears thrice in 3 posts, do I place all the 3 page links in the field ‘PAGE_URL’ consecutively in the above Code Line? Contrarily, if it is name of the post and then its URL link (i.e., ‘Forgetful’,’http://shoumitro.blogspot………..html’), where does my given label “Fun’ comes into play?

Query 2. It is possible that some Labels need not go to the 3rd level and end in Level 2. What will be the procedure then?

Vin said...


Create a table classification of your labels first. If the fun label appears in three posts then it is a higher level label.

Look at those three posts and create a unique label for each which is more specific for that post.

Then you have three 'sub-labels' under the Fun label each having only one post under it. Then add URL of that post for that unique label.

Each post should have a unique label associated with it which is not associated with any other post. The other labels which are associated with one or more posts are actually what can be termed as Categories having other 'sub-labels' which may be termed as Tags.

Shoumitro said...

Nicely explained, Vin. Thanks a whole lot. However, being a novice, I still have some doubts. Sorry.. :P

Q 1: Can I put the same post under 2 or more higher level labels? For example, if I ascribe a unique label “Mother’s picture” to a particular post, I may feel that the post qualifies to come in Level 3 below both of these level-2 labels: “Family” and “Women”.. Will that be possible if I follow the procedure?

Q 2: The last line of step 4 (Preparing Labels Code) says: “After creating this file in Notepad copy it and paste it in an HTML Page element.”

The steps I take are: Dashboard\Layout Tab\Page Elements Sub-Tab \ Click on “Add a Gadget” link \ Appears “Add A Gadget” pop-up window \ scroll down to HTML/JavaScript \ Add it by clicking on the Plus sign \ Pop-up Window changes to “Configure HTML/JavaScript, with two fields: “Title”, “Content”. Now, where do I paste the Labels Code that I creating in Notepad – in the Content field? Does the Title field remain blank then?

Q 3: In step 5 (Uploading JavaScript), in Edit HTML sub-tab, I do not see the exact tag “< b:skin > etc before which you tell to paste the code line, What I see looks like this:
] ] > < /b:skin >
< /head >
< body >
Is it okay to post the code line you suggested to paste before the above lines?

Vin said...


1. You can add the URL of each page at multiple places under multiple labels if you like, no problem.

2. Paste it in the Contents field. You can add anything in the Title field. It will become the Title of the widget.

3. The <b:skin><![CDATA[/* tag is at the top of the template. The tag you mentioned is in the middle of the template.

Shoumitro said...

Vin, thanks a whole lot... think I can have a go now ! :)

Thanks again... Shoumitro

Shoumitro said...


I have been successful in creating a simple Labels Code and adding it as a page element. But the Fonts are too large and the lengthy labels do not show fully as the space (the left margin) is too small for them. Any solutions? Viewing my blog will help in understanding the problem.

Btw, the downloaded label code did not work, so I copied the example code from your blog and pasted it in notepad and modified it. This worked.


Vin said...


You can increase blog width to accomodate lengthy labels.

To change font-size modify this code :

.dtree {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 25px;
color: #000;
white-space: nowrap;

Dominic Allkins said...

Hi Vin

Got it working perfectly - just one problem. I get an outline around the + and - (expand and contract) icons.

I've set border-style:none in the css and still the image applies.

I've removed it for the moment, hoping you've got the answer.

Thanks for any help you may be able to give.



Vin said...

Dominic Allkins,

It is an image :

which is loaded through the javascript :

Dominic Allkins said...

Thanks Vin

Got it it working in the end - was in the base CSS in the end.

Once I've got more posts in the blog I'll post the address so you and others can see it in action.

Great tutorial - thanks.


Seth said...

Hey I follwed this all to the letter, only problem is, the links themselve don't work.

In other words, the "tree" appears on my blog, it expands/collapses, and shows the label text, but I can't click on any of the labels that are shown (ie, nothing happens).

I edited the .css file that came in the zip file, and pasted it into a html/java gadget (widget) i added to my page.

I'm hoping you get this comment, because its taken me hours of searching to finally find your method to make my label list.

I can paste you or email you my .css file where I added the label links, perhaps you can tell me what is missing?
Thanks so much,
please reply here I will see that you followed up, or email me directly

thanks so much

Vin said...


What is the blog address?

Seth said...

Thanks for the quick reply Vin.

The blog is

The template is standard "Rounders 3" although I use Minima on my real blog - not sure if that might make a difference.

I've added labels to posts, inserted the script src line in the code, and i can email your he exact css code I have pasted into an html gadget on the blog.

Any help greatly appreciated.
thanks so much

Vin said...


First add this code :

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

and change 'example01.html' 'example02.html'to the permalinks of posts in your blog.

Then save and clear cache and view blog and you will get idea of how it works.

Chris said...


Have tried to implement it, but it didn't work
my blog:
Should be all done the way you wrote it...

Vin said...


Try it on a test blog first. You can see a working example at the bottom of My Gadgets Showcase Blog.

Foodies Queen said...

Hi Vin,
I have the same prob as Foodie. I wish to create a separate column of labels for location. But the method you have taught Foodie didn't work the way I wanted because those entries that appeared in location label column appeared in the food label column too. Your advice,pls.

Vin said...

Foodies Queen,

What were the steps you took to add two Link List gadgets to blog? Please give details.

fashionista said...

Hey vin
I want to be able to create linked pictures on my blog so when a reader clicks the picture they will be redirected to a categorised page of say eg. fashion show reviews.
So all of my previous blog posts about fashion show reviews will show up on this new page all neatly categorised together. Hopefully you know what i mean. Thanks :)

Pinkgoesgreen said...

Hi Vin - I tried this twice and both times all i got was... Open all |Close all

No you know what I'm doing wrong?


Vin said...


Do it in a test blog first. You can see the working version at My Gadget Showcase blog.

Vin said...


You have to create a image link.

The link to be used has to be a Label Page link :

Replace CAPS and use in the image link code.

SMS said...

Hi Vin,

I have a question or two - does this prevent adding labels on the fly?

Second, any way to package something like this up into a cut-and-paste widget?

Would appreciate the answers greatly as I've been looking for something like this, but more of a "set it and forget it" widget than having to edit it repeatedly as the blog evolves.

Yeah I'm a little ignorant of coding, I do okay at html and simple CSS, but beyond that I am hopeless.

Vin said...


Since it is complex it has to be customized every time.

sridhar said...

In your above post.
we can give one main label
four sub labels below label1
how individually i can sub categorize those four sub labels, all are node1 labels. how can i differentiate help me.

Anonymous said...

This is a nice idea, I just wonder if it is possible to have something a bit more automated.
I always have troubles with categorization as result I end up with quite a list of tags (labels) that are a growing list. So I am looking for a solution that would not require me to have a static list of labels and categories. The question is how to create one. The idea is to use a separator character inside labels (e.g. "."). For example, label "video.action.west" would be build as tree nodes where "video" is a root, "action" is child of "video" and "west" is child of "action". Similarly, " fiction.east" would be build as "books" at the root level then "science fiction" as a child and a "east" as child of "science fiction". And so on.

jennifer duncan said...

Well What in want is classifying the lable in subcategories and found it here. And one most important thing about your blog is you are explaining it in a very simple manner which is very useful not only to a technical guy but to any non technical guys like us. So please carry on this way of writing else you may loose visitors. Thanks again for solving my problem.

Internet Marketing Pro said...

Though it is complex and tedious to achieve it is worth it if one can categorize the labels, thanks Vin !

pen_name said...

Hi doc vin,

2 questions.

1. I was successful to create a labels category in my blog
My question will be is there a way to include a count of posts in the label names, similar to the usual blogger labels?

2. Does this string of HTML code have an effect on SEO? I'm asking because ever since I used the labels category, my posts no longer appear on the top pages of google search results, whereas prior to that, I used to get top google search results.

Help please. Thanks in advance!

Safwan said...

Awesome hack. The most complete tutorial so far. This could very well convert blogger into a complete CMS


Skip to top of post.

Search Blog Before Commenting


Post a Comment

Please use the above search box to search this blog before posting your valuable comments.

Comments posted on Dummies Guide to Google Blogger (Beta) are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,


The Blog Doctor The Blog Doctor2 Blog Doctor Home


Tips On Blogger and Latest News.

Skip to top of post.