[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 "
