Don't miss these Blodger posts!

Friday, 28 September 2012

Explorer like folders

How can you break up your blog content into folders or chapters like a windows explorer folder structure or even like chapters of a book. I.e like the chapter structure that you see on the right hand column on this page?

This involves using the Blogger HTML/Javascript widget, using a clever bit of Javascript linking to icons that you want to use, and then hard coded references to the posts and pages in your blogs that you want to show this way 

The script for this site comes originally from Dynamic at 
This is how to use it in Blogger. 

Firstly you need to add three icons to your blog, the open and closed folder and the right chevron. You could add any other type of icon like a opening book or arrows or anything.

One way of doing this is to creat a new page and in the Compose window use the Insert Image dialogue to add the 3 icons. Save page, Publish it and then hide it via the unchecking the checkbox next to the page in the Configure Page List.

Go to the page and hover over the icon, then right click and copy link location to notepad or other. you will see a web addresses like

Do this for all three types - for closed, open and right chevron icons.

Then in the design layout, add a HTML / Javascript gadget to an appropriate place on the page and enter (copy and paste) the code below into the

Configure HTML/JavaScript textarea

* Simple Tree Menu- © Dynamic Drive DHTML code library (
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at for full source code

.treeview ul{
margin: 0px;
padding: 0;

//// this is the section where we need to have web addresses of the icons
// The right chevron

.treeview li{
background: white url( no-repeat 0px 3px;
list-style-type: none;
padding-left: 32px;
margin-bottom: 3px;

// the closed folder //
.treeview li.submenu{
background: white url( no-repeat  0px 3px;
cursor: hand !important;
cursor: pointer !important;

.treeview li.submenu ul{
display: none;

.treeview .submenu ul li{
cursor: default;

<script type="text/javascript" >
var persisteduls=new Object()
var ddtreemenu=new Object()

ddtreemenu.closefolder="" //set image path to "closed" folder image
" //set image path to "open" folder image

////do not edit these//////

ddtreemenu.createTree=function(treeid, enablepersist, persistdays){
var ultags=document.getElementById(treeid).getElementsByTagName("ul")
if (typeof persisteduls[treeid]=="undefined")
persisteduls[treeid]=(enablepersist==true && ddtreemenu.getCookie(treeid)!="")? ddtreemenu.getCookie(treeid).split(",") : ""
for (var i=0; i<ultags.length; i++)
ddtreemenu.buildSubTree(treeid, ultags[i], i)
if (enablepersist==true){ //if enable persist feature
var durationdays=(typeof persistdays=="undefined")? 1 : parseInt(persistdays)
ddtreemenu.dotask(window, function(){ddtreemenu.rememberstate(treeid, durationdays)}, "unload") //save opened UL indexes on body unload

ddtreemenu.buildSubTree=function(treeid, ulelement, index){
if (typeof persisteduls[treeid]=="object"){ //if cookie exists (persisteduls[treeid] is an array versus "" string)
if (ddtreemenu.searcharray(persisteduls[treeid], index)){
ulelement.setAttribute("rel", "open")"block""url("+ddtreemenu.openfolder+")"
ulelement.setAttribute("rel", "closed")
} //end cookie persist code
else if (ulelement.getAttribute("rel")==null || ulelement.getAttribute("rel")==false) //if no cookie and UL has NO rel attribute explicted added by user
ulelement.setAttribute("rel", "closed")
else if (ulelement.getAttribute("rel")=="open") //else if no cookie and this UL has an explicit rel value of "open"
ddtreemenu.expandSubTree(treeid, ulelement) //expand this UL plus all parent ULs (so the most inner UL is revealed!)
var submenu=this.getElementsByTagName("ul")[0]
if (submenu.getAttribute("rel")=="closed"){"block"
submenu.setAttribute("rel", "open")"url("+ddtreemenu.openfolder+")"
else if (submenu.getAttribute("rel")=="open"){"none"
submenu.setAttribute("rel", "closed")"url("+ddtreemenu.closefolder+")"

ddtreemenu.expandSubTree=function(treeid, ulelement){ //expand a UL element and any of its parent ULs
var rootnode=document.getElementById(treeid)
var currentnode=ulelement"block""url("+ddtreemenu.openfolder+")"
while (currentnode!=rootnode){
if (currentnode.tagName=="UL"){ //if parent node is a UL, expand it too"block"
currentnode.setAttribute("rel", "open") //indicate it's open"url("+ddtreemenu.openfolder+")"

ddtreemenu.flatten=function(treeid, action){ //expand or contract all UL elements
var ultags=document.getElementById(treeid).getElementsByTagName("ul")
for (var i=0; i<ultags.length; i++){
ultags[i].style.display=(action=="expand")? "block" : "none"
var relvalue=(action=="expand")? "open" : "closed"
ultags[i].setAttribute("rel", relvalue)
ultags[i]"expand")? "url("+ddtreemenu.openfolder+")" : "url("+ddtreemenu.closefolder+")"

ddtreemenu.rememberstate=function(treeid, durationdays){ //store index of opened ULs relative to other ULs in Tree into cookie
var ultags=document.getElementById(treeid).getElementsByTagName("ul")
var openuls=new Array()
for (var i=0; i<ultags.length; i++){
if (ultags[i].getAttribute("rel")=="open")
openuls[openuls.length]=i //save the index of the opened UL (relative to the entire list of ULs) as an array element
if (openuls.length==0) //if there are no opened ULs to save/persist
openuls[0]="none open" //set array value to string to simply indicate all ULs should persist with state being closed
ddtreemenu.setCookie(treeid, openuls.join(","), durationdays) //populate cookie with value treeid=1,2,3 etc (where 1,2... are the indexes of the opened ULs)

//// functions ////

ddtreemenu.getCookie=function(Name){ //get cookie value
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return ""

ddtreemenu.setCookie=function(name, value, days){ //set cookei value
var expireDate = new Date()
//set "expstring" to either future or past date, to set or delete cookie, respectively
var expstring=expireDate.setDate(expireDate.getDate()+parseInt(days))
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/";

ddtreemenu.searcharray=function(thearray, value){ //searches an array for the entered value. If found, delete value from array
var isfound=false
for (var i=0; i<thearray.length; i++){
if (thearray[i]==value){
thearray.shift() //delete this element from array for efficiency sake
return isfound

ddtreemenu.preventpropagate=function(e){ //prevent action from bubbling upwards
if (typeof e!="undefined")

ddtreemenu.dotask=function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
target.attachEvent(tasktype, functionref)


<a href="javascript:ddtreemenu.flatten('treemenu1', 'expand')">Expand  +</a> | <a href="javascript:ddtreemenu.flatten('treemenu1', 'contact')">- Contract</a>
<ul id="treemenu1" class="treeview">

// this is where you use the  li html attribute to create a list. WHen you //have a new item or post to add to this structure, then add them here//

<li>Basic Blogger
    <li><a href="">Blogger Starter</a></li>

    <li><a href="">Chronological order</a></li>
    <li><a href="">Embed a site</a></li>

    <li><a href="">Updating two blogs at the same time</a></li>
  <li><a href="">Showing HTML code on a page</a></li>
  <li><a href="">Moving Blog to another account</a></li>
   <li><a href="">You Tube Embed</a></li>
<li>Advanced Blogger
    <li><a href="">Google Analytics</a></li>
    <li><a href="">Most Basic template</a></li>
    <li><a href="">Summary Posts</a></li>

<li>Web Coding and HTML
        <li><a href="">Coloured Tables</a></li>
        <li><a href="">Copyright Symbol</a></li>

<script type="text/javascript">

//ddtreemenu.createTree(treeid, enablepersist, opt_persist_in_days (default is 1))

ddtreemenu.createTree("treemenu1", true)
ddtreemenu.createTree("treemenu2", false)


You don't need to understand most of the clever javascript above. You just need to know to insert the addresses for the icons, (there are 1 open, 2 closed , and one list to add)

You then need to add folder titles and links to the posts underneath them. You can see these where the <LI> <UL> tags are . Remember each tag has to be closed so for each <LI> there needs to be a </LI> and note that you can have <LI>s or <UL>s between another<LI>.

See WW3 schools for a description

Every time you publish a post and want  to add it to the folder structure then simple add another list item, of folder and lists

And thats all there is to it ;-)

Related Articles :



Blodger Copyright © 2010 LKart Theme is Designed by Lasantha

Downloaded from Free Templates

Modified to LK Magazine v2 Pimp No6 and Copyright © 2013 by Blodger