Adding categories and sub categories to blogspot

 At the moment of writing this tutorial,  there is no way to add sub categories to blogspot, may be in future blogger will add this feature . To implement this feature needs to edit  HTML code of your template

[1] Take backup of your blog. 

Click " Settings  --->  Other --> Export blog " , and download the backup of your blog post , you can even can take template backup also.

[2] Edit HTML code of  your blog

Click " Template" --> "Edit HTML" , and you will get HTML code of template .
find a line similar to the following, it should be within first 10 -15 lines of code.
<b:skin><![CDATA[/* 

then add the following code before to above line.
<script src='http://blogcat.site40.net/dtree.js' type='text/javascript'/> 

final output should be similar to following
<script src='http://blogcat.site40.net/dtree.js' type='text/javascript'/> 
<b:skin><![CDATA[/*

[3] Adding JavaScript for Subcategories

go to "Layout" click " add a Gadget "  then choose " HTML/JavaScript " gadget and paste the following code and save the template.

//start


<style type="text/css">

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


<script type="text/javascript">
<!--

d = new dTree('d');

d.add(0,-1,'Blog Categories'); //
d.add(1,0,' '); //
d.add(100,1,' ','','');  //
document.write(d);
//-->
</script>
</div>

//end


Now, it is done !

d.add(0,-1,'Blog Categories');
d.add(1,0,' ');
d.add(100,1,' ','','');  

please make sure to edit(fill the parameters) above highlighted lines of code according to your blog, otherwise this will not work. Please refer following code explanation.

JavaScript Code explanation

bellow is example code I'm using on my blog. now I'm going to explain the code. all my explanation are bold italic

all the categories are staring from 1 and topics are staring from 100
/*category index 0-99
0 - Blog categories
1 - OpenCV
2 - Linux
3 - Networking stuff

topics start 100..
*/

explanation for d.add() functions and it's parameters
d.add( index , parent index , topic , topic URL  , brief description of the topic ) .this is very simple explanation. you can learn more about from this link http://www.destroydrop.com/javascripts/tree/api/


d.add(0,-1,'Blog Categories');
d.add(1,0,'OpenCV'); //OpenCV category
d.add(100,1,'OpenCV installation','http://techtute.blogspot.com/2011/01/opencv-22-installation-on-visual-studio.html','opencv 2.2 installation on visual studio 2008');

d.add(101,1,'Negative Images','http://techtute.blogspot.com/2011/06/negative-background-images.html','negative background images');

d.add(102,1,'Positive Images','http://techtute.blogspot.com/2011/06/haartraining-positive-samples.html','haartraining positive samples');

d.add(103,1,'opencv haartraining','http://techtute.blogspot.com/2011/06/opencv-haartraining.html','opencv haartraining steps');




If you have followed above steps correctly, you will get an output similar to the following :) .
You can find live demonstration top right hand under name as " categories "