A tree control (i.e. the GUI element found in the left pane of Windows Explorer) provides a useful way of organizing a set of hierarchical items. This article will present a method to incorporate such a tree control in to Blogger blogs.
Before we proceed, let’s take a look at how our final tree will look like.
Now let’s see how to include a tree like the above in your blog.
You can copy it immediately under the <head> tag as shown in the figure below. (These two resources are hosted on the Blogger Guide companion site. Don’t worry, there is no tracking code or any thing of that sort there. It’s used purely for hosting files referred to from these articles)
Save your template and exit Edit HTML mode.
Next step is to write the code necessary to create the tree. I will first present a sample code and then explain it.
d = new dTree(’d’);
d.add(2,1,’3 Columns Explained’,’http://bguide.blogspot.com/2008/02/three-column-templates-explained.html’);
d.add(3,1,’Skeleton of a Template’,’http://...’);
d.add(4,1,’Adding a Third Column’,’http://...’);
d.add(5,1,’Layout Wire Frame Editor’,’http://...’);
d.add(6,1,’3 Columns with LR Sidebars’,’http://...’);
d.add(8,7,’How to Monitor Visitors’,’http://...’);
d.add(10,7,’Exclude Your Traffic from GA’,’http://...’);
d.add(12,11,’Add a Custom CSS class’,’http://...’);
d.add(13,11,’Related Posts Table’,’http://...’);
d.add(14,11,’Limit Widgets to Specific Pages’,’http://...’);
d.add(15,1,’3 Column Step by Step Guides’,’http://...’);
The add() function of the dTree takes in several parameters. The first 3 parameters are required (i.e. you must provide values for them) and the other parameters are optional. The above example uses the following 4 parameters.
- Node ID - A unique numerical ID number. Assign a sequentially increasing number to each new node.
- Parent Node ID - If you want to create a child node, then the ID of the parent node should be given here. This will be ’-1’ for the root node. (See the first d.add(...) line in the example)
- Node Name - A textual description for the node
- Node URL - If you want the node to link to some resource (e.g. an HTML page or some online image), provide the URL of the that resource as the 4th parameter.
Acknowledgment: I have used the free tree control offered by Geir Landrц at Destroydrop. The original files have been slightly modified to make them available online, to be used inside Blogger.
Note: You are free to use the resources used in Step 1. But if you do use, please link to this article from your blog.
If you want to see the practical implementation of this script, you can visit my new blog Data Recovery Techniques.
Update 03-18-2012: The script code to be implemented in the template has found to be corrupted in this post. It was corrected as needed. For more than three years, I am using this DTree approach in most of my Blogger blogs. It is easy to implement, easy to update, and works seamlessly for years.