Add drop down menu in your blog

Important: Back up your current Blog Template before try this. By baking up your template it will protect your blog from being crash or damage.

1. Open your blog account

• Go to the Dash Board
• Click Design
• Click Template
• Click HTML

2. Press Ctrl + F
3. Type]]></b:skin> in the find bar. Now you can see the ]]></b:skin> high lighted in the HTML section.
4. Copy the following codes and paste before high lighted code.

#jsddm {margin: 0; padding: 15px; z-index:1000000000; position:relative; } 

#jsddm li { float: left; list-style: none; font: 12px Tahoma, Arial; } 

#jsddm li a { display: block; white-space: nowrap; margin:1px 3px; border: 1px solid #AAAAAA; background: #cccccc; background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc)); background: -moz-linear-gradient(top, #ebebeb, #cccccc); padding: 5px 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; text-shadow: #ffffff 0 1px 0; color: #363636; font-size: 15px; font-family: Helvetica, Arial, Sans-Serif; text-decoration: none; vertical-align: middle; } 

#jsddm li a:hover { background: #C8C8C8; } 

#jsddm li ul { margin: 0; padding: 0; position: absolute; visibility: hidden; border-top: 1px solid white; } #jsddm li ul li { float: none; display: inline; }  

#jsddm li ul li a { width: auto; background: #CAE8FA; } 

#jsddm li ul li a:hover { background: #A3CEE5; }

5. Find code </head> again and add the following code before it.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/> 

<script type='text/javascript'> 

//<![CDATA[ var timeout = 500; 

var closetimer = 0; 

var ddmenuitem = 0; 

function jsddm_open() 

{ jsddm_canceltimer(); 

jsddm_close(); 

ddmenuitem = $(this).find('ul').css('visibility', 'visible');} 

function jsddm_close() 

{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');} 

function jsddm_timer() 

{ closetimer = window.setTimeout(jsddm_close, timeout);} 

function jsddm_canceltimer() 

{ if(closetimer) 

{ window.clearTimeout(closetimer); 

closetimer = null;}} 

$(document).ready(function() 

{ $('#jsddm > li').bind('mouseover', jsddm_open) 

$('#jsddm > li').bind('mouseout', jsddm_timer)}); 

document.onclick = jsddm_close; //]]> </script>

6. Click on Save Template.

7. Go to your Dashboard

8. Design

9. Click on Add A Gadget in the element page any where on the screen.
10. Click on HTML / JavaScript by Leaving the title empty.

11. At the content area, paste the following code.

<ul id="jsddm"> 

<li><a href="#">Home</a> 

<li><a href="#">Menu 1</a> 

<ul> 

<li><a href="#">Drop 1-1</a></li> 

<li><a href="#">Drop 1-2</a></li> 

<li><a href="#">Drop 1-3</a></li> 

</ul> 

</li> 

<li><a href="#">Menu 2</a> 

<ul> 

<li><a href="#">Drop 2-1</a></li> 

<li><a href="#">Drop 2-2</a></li> 

</ul> 

</li> 

<li><a href="#">Menu 3</a> 

<ul> 

<li><a href="#">Drop 3-1</a></li> 

<li><a href="#">Drop 3-2</a></li> 

<li><a href="#">Drop 3-3</a></li> 

<li><a href="#">Drop 3-4</a></li> 

</ul> 

</li> 

<li><a href="#">Menu 4</a></li> 

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

<li><a href="#">AllBlogTools</a></li> 

</li></ul>

12. Click on Save.

This is very important that in step 11, you have to change the menu titles and replace all # letters by the right menu url as u want.

Now you can drag this Gadget where ever you want.

It is done.

.