How to make tree dropdown menu blogger sidebar

Ever wondered to create an expandable Tree dropdown menu in a simple one step method? There we have it today! A Tree drodown Menu is different from other navigation menus You can add links to it or even simple text and hang it on your blog sidebar. It helps to organize data in a hierarchal method. Most often we use tree dropdown menus for displaying blog archives. It contains a Expand and Contract Link that collapses and shrinks the tree branches. So lets add this beautiful menu to blogger blogs in easiest possible way.

  How to add this method to your blog ?
1. First go to your blog and sign with your real user name and password
2. Now locate to "Layout > Add a Gadget" and find "HTML/Javascript" and click on that option
3. Copy and paste whole the code in to empty box

<style> 
.treeview ul{ 
margin: 0px; 
padding: 0; 
}

.treeview li{ 
background: white url(https://lh3.googleusercontent.com/-11Yqvfw5XQc/UvU8ZmSOthI/AAAAAAAAJzg/KL24trwsPIY/s14-no/list.gif) no-repeat 0px 3px; 
list-style-type: none; 
padding-left: 32px; 
margin-bottom: 3px; 
}

.treeview li.submenu{ 
background: white url(https://lh5.googleusercontent.com/-FvSp3TsRJsg/UvU77nQpNPI/AAAAAAAAJzM/uOg7EL1YN9g/w17-h12-no/closed.gif) no-repeat  0px 3px; 
cursor: hand !important; 
cursor: pointer !important; 
}

.treeview li.submenu ul{ 
display: none; 
}

.treeview .submenu ul li{ 
cursor: default; 
} 
</style>

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

ddtreemenu.closefolder=" https://lh5.googleusercontent.com/-FvSp3TsRJsg/UvU77nQpNPI/AAAAAAAAJzM/uOg7EL1YN9g/w17-h12-no/closed.gif " //set image path to "closed" folder image 
ddtreemenu.openfolder=" https://lh6.googleusercontent.com/-48j0rMHvMIg/UvU9Rt56hqI/AAAAAAAAJz4/O_rFz0peXz8/w17-h12-no/open.gif" //set image path to "open" folder image

//////////No need to edit beyond here///////////////////////////

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){ 
ulelement.parentNode.className="submenu" 
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") 
ulelement.style.display="block" 
ulelement.parentNode.style.backgroundImage="url("+ddtreemenu.openfolder+")" 
} 
else 
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!) 
ulelement.parentNode.onclick=function(e){ 
var submenu=this.getElementsByTagName("ul")[0] 
if (submenu.getAttribute("rel")=="closed"){ 
submenu.style.display="block" 
submenu.setAttribute("rel", "open") 
ulelement.parentNode.style.backgroundImage="url("+ddtreemenu.openfolder+")" 
} 
else if (submenu.getAttribute("rel")=="open"){ 
submenu.style.display="none" 
submenu.setAttribute("rel", "closed") 
ulelement.parentNode.style.backgroundImage="url("+ddtreemenu.closefolder+")" 
} 
ddtreemenu.preventpropagate(e) 
} 
ulelement.onclick=function(e){ 
ddtreemenu.preventpropagate(e) 
} 
}

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

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].parentNode.style.backgroundImage=(action=="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) 
}

////A few utility functions below//////////////////////

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){ 
isfound=true 
thearray.shift() //delete this element from array for efficiency sake 
break 
} 
} 
return isfound 
}

ddtreemenu.preventpropagate=function(e){ //prevent action from bubbling upwards 
if (typeof e!="undefined") 
e.stopPropagation() 
else 
event.cancelBubble=true 
}

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) 
}

</script>

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

<li>Folder 1 
    <ul> 
    <li><a href="#">Sub Item 1.1</a></li> 
    <li><a href="#">Sub Item 1.2</a></li> 
    </ul> 
</li> 
<li><a href="#">Item 3</a></li>

<li>Folder 2 
    <ul> 
    <li><a href="#">Sub Item 2.1</a></li> 
    <li>Folder 2.1 
        <ul> 
        <li><a href="#">Sub Item 2.1.1</a></li> 
        <li><a href="#">Sub Item 2.1.2</a></li> 
        </ul> 
    </li> 
</ul> 
</li>

<li><a href="#">Item 4</a></li> </ul>

<script type="text/javascript">

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

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

</script>

4. Replace wellow color
# with your own blogger link 

        <li><a href="#">Item 5</a></li>

5. Replace 1 2 3 with own blogger link of title 

Now finally save the template and view blog succesfully has been Done!