Poner una barra menú desplegable en mi blog

Si buscas una manera de colocar una barra menú desplegable en tu blog, te presento una manera muy fácil de hacerlo. Simplemente tienes que seguir un par de pasos sencillos para tener una magnifica barra menú, dinámica que a su vez mejora el aspecto del blog.

  1.  Nos dirijimos a Diseño > Edición de HTML y buscamos el siguiente código
    ]]></b:skin>
Y antes de el código encontrado, pegamos el siguiente:
#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;
}

  • Sin modificar nada más, en la misma página busca </head>
Antes de </head> agrega el siguiente código:
<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>

  • Para terminar el primer paso, clic en GUARDAR PLANTILLA.
A continuación, entramos a Diseño> Añadir un gadget> HTML/Javascript y pegamos el siguiente código:
<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>

  • Guardamos el gadget y si listo!

46 comentarios:

  1. esta muy bien este código ;) gracias!!

    ResponderEliminar
  2. y como cambio los colores y las formas de los botones desplegables es muy instructivo

    ResponderEliminar
  3. los colores se pueden configurar en Edicion HTML de la plantilla, también con la herramienta de blogger "Personalizar Diseño". Pruebalo y me dices algo :) un saludo!

    ResponderEliminar
  4. Hola he puesto el menú pero cuando se desplega no seve todo, solo se ve un poco la primer opción, ¿que es lo que este pasando?
    gracias

    ResponderEliminar
  5. ME PASA LO MISMO QUE EL DE ANONIMO NO SE VE UNA PARTE CUANDO SE DESPLEGA

    ResponderEliminar
  6. ¿Cómo que no todo? Especificar el problema porfavor o enseñarme el problema directamente en vuestros blogs, porfavor. Un saludo :)

    ResponderEliminar
  7. Dale men revisa mi post y veras http://reggaetonfull2.blogspot.com/
    al seleccionar para que se despliege se corta no se ve una gran parte

    ResponderEliminar
  8. Julian Y "Anónimo" ; el problema que teneis es que habeis colocado mal los códigos, os sugiero que reestablezcais la plantilla y volvais a insertar el código donde corresponde cada uno.

    Disculpen las molestias, pero el código esta en perfecta función.

    ResponderEliminar
  9. ok men si ya solucione tambien el prblema de todas formas muchas gracias. y men otra cosa para cambiarle el color, la letra y el espacio que hay entre cada pestaña que despliega quisiera que no hubiera espacios gracias bro

    ResponderEliminar
  10. bro otra cosa cuando tenga otro codigo de otro menu para otro blogger donde lo debo pegar o que?
    :julian lujan

    ResponderEliminar
  11. Para cambiar de color, tienes que modificar los codigos background # y este codigo q esta aquui, es el color del fondo.

    ResponderEliminar
  12. mm no apace en tu comentario para cambiar el color de fondo

    ResponderEliminar
  13. background: #cccccc;

    background: -moz-linear-gradient(top, #ebebeb, #cccccc);

    background: #C8C8C8;


    LOS CODIGOS QUE EMPIEZAN POR "#" SON LOS COLORES, BUSCA UN GENERADOR DE CÓDIGOS HTML y REEMPLAZA ESTOS CÓDIGOS, hechando vista previa, para ver como queda... sabes :) Espero qeu te sirva!

    ResponderEliminar
  14. Creo que mi pregunta es muy basica pero como se ponen los url

    ResponderEliminar
  15. No consigo que salgan los desplegables, puedes observarlo aquí mismo: http://coralibros.blogspot.com.es/

    Gracias.

    ResponderEliminar
  16. Porfavor ByDanns intente repetir todos los pasos remplazando los cambios, procurando no fallar en ningún paso. Un saludo ¡Gracias por consultar BloggerCódigo!

    ResponderEliminar
  17. Yo estoy intentando ponerlo en mi blog de pruebas. Cuando lo pongo en zona superior, justo debajo de la imagen de cabecera, me sale cortado. En cambio, si lo pongo debajo del cuerpo de las entradas si que se ve sin problemas. ¿Como lo soluciono?

    ResponderEliminar
  18. Busca este código en tu plantilla sin expandir artilugios:

    id='crosscol-wrapper' style='text-align:center'>




    Y en ese código si te pone un 'no' Cambialo por un 'Yes'

    En el codigo dira: showaddelement='no'/>
    Y lo cambias por showaddelement='Yes'/>

    Y esperemos que cree suficiente espacio para queno salga cortada, UN SALUDO AMIGO!!!

    ResponderEliminar
  19. Los elementos existendes del menu desplegable (los elementos que estan de ejemplo) los puedes copiar y pegar después del código para añadir más contenido. No se si me explico. Un saludo!

    ResponderEliminar
  20. Genial! estaba como loca buscandolo :)

    ResponderEliminar
  21. Me alegro de que hayas encontrado este magnífico código. :D

    ResponderEliminar
  22. Saludos, amigo como hago para centrar los botones de menu en la barra, que todo quede en el centro. Gracias y muy bueno tu aporte

    ResponderEliminar
  23. genial, lo unico q a mi no se me desplliega, aparecen fijas todas las opciones, y también me gustaría como a Jorge que se viera en el centro.
    Gracias!!
    :*
    http://elartedecomprarparati.blogspot.com

    ResponderEliminar
  24. he usado este menú en mi blog cambiandole parámetros de color forma y tamaño y ha quedado muy bien. Muchas gracias.
    El único problema que tengo es que cuando pincho en una imagen para verla en grande el menú me sigue apareciendo por encima de esta. ¿Cómo puedo ocultarlo bajo la transparencia que hace blogger por defecto?
    muchas gracias de nuevo

    ResponderEliminar
  25. NO poner un submenu a una pagina de blog, como se hace? quiero qe en mi caso, donde dice productos y servicios, aparesca para listar y entrar a varios lugares

    ResponderEliminar
  26. hola men ami me pasa lo mismo no puedo ver los menus despegables seve una parte corta es pero que me puedas ayudar ...... saludos

    ResponderEliminar
  27. Repetir el tutorial, es importante no equibocarse y si os sigue saliendo mal es porque la plantilla no esta adaptada al código. Entonces deberiais de cambiar la plantilla completamente, en www.btemplates.com hay cientas plantillas muy interesantes. Un saludo!

    ResponderEliminar
  28. yo les tengo una solución mas sencilla... y solo lo publico aquí porque parece una pagina importante

    http://www.youtube.com/watch?v=Uirr0GtXGTQ

    ResponderEliminar
  29. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  30. don de se pone el url urgente :S rapido

    ResponderEliminar
  31. Felix R. C. Agradezco tu presencia, bien intento ayudarte y te propongo esta solución, simple.

    Por ejemplo:
    Link Para abrir en la misma pagina.
    href="http://www.google.es/">www.google.es

    Link Para abrir en una pagina distinta.
    href="http://www.google.es/" target="_blank">www.google.es

    ¿Ves la diferencia?

    Tienes que añadir " target="_blank" dentro del link y justo después de la dirección.

    ResponderEliminar
  32. YA intente todo lo que dicen para que el submenu no me salga cortado y nadamas no lo logro! alguna otra solucion?

    ResponderEliminar
  33. A mí me pasa lo mismo. No se ven los submenus desplegables:

    http://formula1porra.blogspot.com.es/

    Alguna solución ?

    Gracias

    ResponderEliminar
  34. Ya arregle lo de la barra cortada, prueben el borrar esto y díganme si les funciono

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

    ResponderEliminar
  35. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  36. Tuve un problema al eliminar esa parte, asi que si no les funciona, tienen de tener esto asi:

    Se encuentra unas lineas mas abajo, no queda muy bien pero funciona

    #jsddm li ul {
    margin: 0;
    padding: 0;
    position: static;
    visibility: hidden;

    ResponderEliminar
  37. Amigo, gracias por el post! Pero me sucede algo. Cuando paso el ratón para ver los submenues, estos me salen por debajo de las demás cosas y no se ven :(
    Otra cosa, creo que tratando de solucionar esto, he borrado cosas del HTML, en tal caso de que eso haya pasado, no hay manera de revertir todo eso? Le doy en la parte que dice revertir y nada, sigue igual! :) Agradecería tu respuesta!

    ResponderEliminar
  38. Gracias por tu presencia, lamentablemente no se puede deshacer la actividad en la edición del HTML. Pero el primer problema que tienes sí se puede resolver, busca el código del menú insertado y borralo e intenta hacerlo de nuevo, con mucho cuidado. Un saludo!

    ResponderEliminar
  39. ola buen post, e mirado todos los comentarios sobre lo de las subpestañas que se cortan y me pasa lo mismo e echo todos los pasos, lo e repetido mas de un millon de veces, y e quitado mi plantilla y e puesto otra muchas veces pero la unica plantilla que me funciona es la que tengo aora y la que cambie, y no me funciona ninguna de las cosas que an puesto ustedes y los comentaristas. me gustaria tener la solucion pronto, si puede ser, mi blog:
    descargasadrianccv.blogspot.com

    gracias

    ResponderEliminar
  40. se me olvidaba que e puesto los codigos perfectamente bien

    ResponderEliminar
  41. www.cooper-black-mysblog.blogspot.com
    Espero que os guste, mandaselo a tus amigos plisss

    ResponderEliminar
  42. Yo hace un tiempo diseñe un programa para resolver esto... pueden descargarlo en

    http://www.youtube.com/watch?v=LYaiyNh21_4

    ResponderEliminar
  43. no entendí bien el ultimo paso como es

    ResponderEliminar
  44. Hola ¿quería saber como hago para agregar a un submenu a mi plantilla osea me explico la plantilla ya tiene tiene los menus http://prueba2rc.blogspot.com/ pero a la hora de agregar todo esos codigo me agrega es un menu nuevo y me lo manda es para abajo en la parte que esta amariilo en vez de tener un solo menu salen dos menus . No se si me explico amigo
    De ante man gracias y disculpe la molestia

    ResponderEliminar