ADD AWESOME DROP-DOWN MENU FOR BLOGGER

As per the choice of user our team had introduced a modern style, easy to use drop down menu for blogger. There are many drop down menu which had various function but this drop down menu has all the best functionality, and is easy to implement, add links and customize.

We have also added  z-index to the drop down menu so it will display over content and some rounded corner that will be visible on browser that supports them such as Firefox, Google chrome and safari. This new drop down menu is a good gadget that you can have it on your blog.

ADD AWESOME DROP-DOWN MENU TO YOUR BLOG

1). Open your blog and go to Dashboard.

2). Select Layout and Edit HTML.

3). Find the following piece of code in your blog HTML code. HOW TO FIND CODE IN YOUR BLOG HTML CODE


]]></b:skin>

NOTE :- Before making any changes you should backup your blog template code. HOW TO BACKUP YOUR BLOG TEMPLATE


4). Paste the following code just above/before the code you have searched.


#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 the following piece of code in your blog HTML code. 

</head>

6). Paste the following code just above/before the code you have searched.

<!--start drop menu--><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>
<!--end menu code----pcleaks.blogspot.com---->

7). Save your template and go to page elements.

8). Add a full width cross coloumn gadget HTML/Javascript and paste the given code inside it. HOW TO ADD A FULL WIDTH CROSS COLOUMN GADGET

<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://pcleaks.blogspot.com">PC TECH</a></li>
  </li></ul>
Make changes accordingly, replace # with the links and text with the text.
If you got a good experience than leave comments and Email Me for any assistance.