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 "