Add Drop-Down Menu For Blogger

This Menu is compatible with most of modern and classic browsers, and can be added for any template in only 3 steps,

Note: Don't forget to Backup your current blogger template ( If you don't know how to download blogger template Click Here to see article ).

Follow These simple Steps:

Step 1.   Log in to your blogger account, click on Drop-Down menu and then click on Template.

Step 2.   Click on Edit HTML and Find the following code ( Press CTRL+F for a search bar ).

]]>

And before / above this code add the following CSS code,

<pre>#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;}</pre>

Step 3.   Now Find the following code (  Press CTRL+F for a search bar ).

Before / above this code add following code

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

Step 4.   Now Click on "Save Template".

Step 5.   Now go to your blogger Dashboard click on layout tab, click on Add A Gadget.

Any where on the screen, and choose "HTML / JavaScript".

Leave the title empty and 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="http://iactips.blogspot.com">IACTips</a></li> </li></ul>

Step 6.   And click on "Save".

Now , it's a important to move the new gadget from the current place to the top of your page, if it was on the sidebar, or any other place , just drag it to header and click on "Save"  again.

In last code you must change the menu titles and replace all # letters by right menu url.

Drop  Your Comments......