Gadget: Menu deslegable DropDown

el
Debes descargar las imagenes y el script que estaran al final
para crear este menu desplegable debes hacer lo siguiente
Para los que usan plantillas del diseñador de plantilla primero deben hacer lo que dice en la siguiente entrada, Poner cualquier menu en las plantillas del diseñador de Blogger
  • ve a "diseño" luego a "diseño HTML"
  • pon expandir plantilla de artilugios
  • para buscar mas rapido usa Ctrl+f para busqueda facil
  • luego busca este codigo
]]></b:skin>

  • Luego encima de el codigo pega esto
body {margin:25px; font:12px Verdana, Arial, Helvetica}
* {padding:0; margin:0}
.dropdown {float:left; padding-right:5px}
.dropdown dt {width:188px; border:2px solid #9ac1c9; padding:8px; font-weight:bold; cursor:pointer; background:url(https://sites.google.com/site/ihotodo/archivos/header-dropdown1.gif)}
.dropdown dt:hover {background:url(https://sites.google.com/site/ihotodo/archivos/header_over-dropdown1.gif)}
.dropdown dd {position:absolute; overflow:hidden; width:208px; display:none; background:#fff; z-index:200; opacity:0}
.dropdown ul {width:204px; border:2px solid #9ac1c9; list-style:none; border-top:none}
.dropdown li {display:inline}
.dropdown a, .dropdown a:active, .dropdown a:visited {display:block; padding:5px; color:#333; text-decoration:none; background:#eaf0f2; width:194px}
.dropdown a:hover {background:#d9e1e4; color:#000}
.dropdown .underline {border-bottom:1px solid #b9d6dc}
lo que esta en rojo sera donde pondras el url del las imagenes

  • luego busca el codigo
</head>
  • Luego justo encima del codigo pega lo siguiente
<script src='https://sites.google.com/site/ihotodo/archivos/dropdown.js' type='text/javascript'/>

Lo que esta en rojo sera donde pongas el url del script, te recomendamos usar DROPBOX
o GOOGLE SITES
en dropbox tienes que descargar el programa, en google sites tienes que copiar el url
https://sites.google.com/site/ihotodo/archivos/dropdown.js?attredirects=0&d=1
borras lo que esta en rojo y listo
  • luego guardas los cambios
  • despues te vas a "elementos de la pagina"
  • luego das en "aladir gadget"
  • eliges el gadget "HTML / javascript "
  • y pega lo siguiente 
<dl class="dropdown">
  <dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)">Pestaña 1</dt>
  <dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)">
    <ul>
      <li><a href="#" class="underline">Subpestaña 1-1</a></li>
      <li><a href="#" class="underline">Subpestaña 2-1</a></li>
      <li><a href="#" class="underline">Subpestaña 3-1</a></li>
      <li><a href="#" class="underline">Subpestaña 4-1</a></li>
      <li><a href="#">Subpestaña 5-1</a></li>
    </ul>
  </dd>
</dl>

<dl class="dropdown">
  <dt id="two-ddheader" onmouseover="ddMenu('two',2)" onmouseout="ddMenu('two',-1)">Pestaña 2</dt>
  <dd id="two-ddcontent" onmouseover="cancelHide('two')" onmouseout="ddMenu('two',-1)">
    <ul>
      <li><a href="#" class="underline">Subpestaña 1-2</a></li>
      <li><a href="#" class="underline">Subpestaña 2-2</a></li>
      <li><a href="#" class="underline">Subpestaña 3-2</a></li>
      <li><a href="#" class="underline">Subpestaña 4-2</a></li>
      <li><a href="#">Subpestaña 5-2</a></li>
    </ul>
  </dd>
</dl>

 
lo que esta en rojo sera el nombre de las pestañas y lo que esta en azul sera el url de la pestaña.
  • lo guardas y listo tendras el menu desplegable. (el menu es personalizable si sabes de HTML)
si deseas poner otra pestaña solo pega esto despues del ultimo </dl>

<dl class="dropdown">
  <dt id="two-ddheader" onmouseover="ddMenu('two',3)" onmouseout="ddMenu('two',-1)">Pestaña 2</dt>
  <dd id="two-ddcontent" onmouseover="cancelHide('two')" onmouseout="ddMenu('two',-1)">
    <ul>
      <li><a href="#" class="underline">Subpestaña 1-2</a></li>
      <li><a href="#" class="underline">Subpestaña 2-2</a></li>
      <li><a href="#" class="underline">Subpestaña 3-2</a></li>
      <li><a href="#" class="underline">Subpestaña 4-2</a></li>
      <li><a href="#">Subpestaña 5-2</a></li>
    </ul>
  </dd>
</dl>


si deseas poner otra subpestaña solo pega esto despues de <ul>
<li><a href="#" class="underline">Subpestaña</a></li>

el resultado sera el que veran en el ejemplo
ver demo del resultado

archivos
imagen header
imagen header_over
script dropdown