Tuesday, January 22, 2013

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 " 


Adding sub categories to blogspot




















13 comments:

  1. Fernando,

    I can follow your explanations until 3. and then obtain the following aappearance :
    http://nicolaskokel.blogspot.com/

    Then I can understand the relationship between 4. and 5., but since I am not a programmer, and you do not mention it, I have no idea at which position to paste the two pieces of code from these two catégories.

    Could you please be so kind as to explain it?

    Thanks a lot,
    Nicolas

    ReplyDelete
  2. I just make some changes to my article, hope now it is clear for you.
    If you have any question pls. post them here

    ReplyDelete
  3. Fernando, That's still not clear.
    I tried the following for testing purposes, but it does not show any category :


    d = new dTree('d');

    d.add(0,-1,'Rubriques du blog'); //
    d.add(1,0,'FOREX'); //Rubrique FOREX
    d.add(100,1,'EUR/USD Court terme','http://nicolaskokel.blogspot.com/search/label/EUR%2FUSD-CT'); //Libellé EUR/USD-CT
    document.write(d);

    ReplyDelete
  4. you have done a mistake here
    http://nicolaskokel.blogspot.com/search/label/EUR%2FUSD-CT

    is not valid URL , looks like your trying to enter label which is not possible . it should be end with .html for ex:- http://www.tectute.com/2013/01/adding-sub-categories-to-blogspot.html (refer this page URL)

    ReplyDelete
  5. Then I do not understand how to create 'categories'. Those labels in the top menu of my blogspot page are simply labels selected with the corresponding 'category' widget. So does this mean I need to select ALL labels in this widget?
    I don't see the category widget on your blogspot page, how can it be?

    Thanks for your kind help.

    ReplyDelete
  6. did you see my categories on top right hand side ?
    This is totally manual process .
    you have to create categories for each label manually and need to add related URL to that.

    d.add() function can be used create categories and adding related URL.

    ReplyDelete
  7. That's really tricky, and not easy to grasp for a non-programmer.
    I really do not know how to move foreward.
    In the subcategory fields, you have three items :
    d.add(100,1,' ','','')
    One is the link, but the two others...
    Don't you have the possibility either to explain step by step how too proceed, or may be even better making a widget with fields to fill out?
    That would bee of great help.
    At this stage I am completely stick.
    Anyway many thanks for your patience.

    ReplyDelete
  8. ok i will do my best to explain this


    d.add(0,-1,'Blog Categories');
    you must add above line anyway,inside the d.add()
    0 means it's index no
    -1 means parent index(no parent)
    'Blog Categories' is parent category


    Think if you have label called opencv you can add it using following line (// represent comments )
    d.add(1,0,'OpenCV'); //OpenCV category
    in this case inside d.add() function
    1 means opencv category has index no 1
    you can allocate index 1 to 99 for categories/labels
    next parameter 0 means it's parent index (look at previous d.add() , we added 0 as it's index)
    important : parent index all the categories/labels
    should be 0 ,
    for ex :- if you have second label called "Linux"
    d.add(2,0,'Linux');

    that's the way of adding categories/labels

    ======
    then you can add URL to each category like this
    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');

    important : all URL index are starting from 100 and if you add second URL it should be 101.
    in this case 1 is parent index (look previous d.add() 1 represent "opencv category")

    ---

    if this is not work send me your few labels and their URLs , i will make it for you !

    ReplyDelete
  9. Fernando, thanks a lot, that's great.
    I will try, probably during the week-end.

    Kind,
    Nicolas

    ReplyDelete
  10. Is there a way to do this, but replace the format with more attractive buttons?

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
    2. Yes,but you should edit the dtree.js (Java Script) file that you added with this line "script src='http://blogcat.site40.net/dtree.js' type='text/javascript'"
      you can follow the URL "http://blogcat.site40.net/dtree.js" -> save as -> dtree.js on your computer and edit the code...
      THIS LINE :
      this.icon = {

      root : 'http://blogcat.site40.net/img/base.gif',

      folder : 'http://blogcat.site40.net/img/folder.gif',

      folderOpen : 'http://blogcat.site40.net/img/folderopen.gif',

      node : 'http://blogcat.site40.net/img/page.gif',

      empty : 'http://blogcat.site40.net/img/empty.gif',

      line : 'http://blogcat.site40.net/img/line.gif',

      join : 'http://blogcat.site40.net/img/join.gif',

      joinBottom : 'http://blogcat.site40.net/img/joinbottom.gif',

      plus : 'http://blogcat.site40.net/img/plus.gif',

      plusBottom : 'http://blogcat.site40.net/img/plusbottom.gif',

      minus : 'http://blogcat.site40.net/img/minus.gif',

      minusBottom : 'http://blogcat.site40.net/img/minusbottom.gif',

      nlPlus : 'http://blogcat.site40.net/img/nolines_plus.gif',

      nlMinus : 'http://blogcat.site40.net/img/nolines_minus.gif'

      };

      now you see this are images .gif format...if you want to change them YOU CAN!
      just put your image hosted urls and i you're done.
      AND I FORGOT! you should re-host the dtree.js file on site like yourjavascript.com or other and link the new hosted .JS file to your site/blog

      Delete
  11. Hello! This is awesome. It works...but when i refresh the page everything that was expanded,remains expanded...is there any way this can be done automatic...for example i click on sub-category -> linked with label URL but the main category is still expanded,i noticed the CloseAll function in the script
    dTree.prototype.closeAll = function() {

    this.oAll(false);
    But how can be implemented to CloseAll on every loading on every page?

    ReplyDelete

Related Posts