Dynamic Tree DTree for Blogger Blog

In course of my experiments to bring normally dynamic content in the Blogger blog to the appearance and functionality of the static Websites, I was trying to implement the Blogger hack, allowing displaying the blog Table of Content in the Windows Explorer similar interface. While there are multiple scripts available online for this modification, I had to try several of them before I actually found one, which worked right away with relative simplicity. It is my pleasure to offer it to you. All credit for this excellent script is to the author of The Blogger Guide. I will repost the article without modification in respect to the script developer.

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.

Step 1
First step is to include two resources, a JavaScript file and a CSS file, in to the Blogger template. Copy the following two lines of code and insert them in to the head section of your template.





The first line defines a generic div element and applies the class dtree in to that. This CSS class is defined in the dtree.css file which we included in Step 1 above. Next line inserts two buttons (in fact, links) to Expand and Collapse all the nodes in the tree. Thirdly, you find a Javascript enclosed within a