Menú horizontal drop and down con CSS

14 de julio de 2010 298 comentarios ,
He visto que los menús con subpestañas (drop and down) son lo más solicitados y aunque el menú con efecto deslizante es del agrado de muchos no todos lo pueden usar debido a que requiere jQuery, así que veamos cómo hacer un menú drop and down sólo con CSS sin usar ningún tipo de script que pueda interferir con el funcionamiento del sitio Web.

En cuanto al diseño de estos menús las posibilidades son enormes, este me gusta por lo sencillo de su aspecto y lo adaptable que es con muchas plantillas aunque con las nuevas plantillas de Blogger no funciona pero bueno, ya hemos visto que casi nada funciona en esas plantillas...

Puedes ver el menú haciendo clik en el siguiente botón.



ATENCIÓN: Si usas una plantilla hecha a través del Diseñador de plantillas de Blogger primero necesitas seguir los pasos de esta entrada.


Para ponerlo en tu blog entra en Diseño | Edición de HTML y antes de ]]></b:skin> pega lo siguiente:
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}

#menu li {
float: left;
position: relative;
width: 140px; /* Ancho de las pestañas */
}

#menu li ul {
position: absolute;
display: block;
top: 2em;
left: 0;
}

#menu li>ul {
top: auto;
left: auto;
}

#menu li:hover ul { display: block; }
#menu li:hover>ul { visibility:visible; }
#menu ul ul { visibility:hidden; }
#menu ul, li { margin: 0 0 0 0; }

#menu ul a {
display: block;
text-decoration: none;
color: #777; /* Color del texto de las pestañas */
background: #f9f9f9; /* Color de fondo de las pestañas */
padding: 5px;
border: 1px solid #ccc; /* Borde de las pestañas */
text-align: center; /* Alineación del texto */
}

#menu ul a:hover {
color: #E2144A; /* Color del texto al pasar el cursor */
}

#menu li ul a {
text-align: left;
text-decoration: none;
color: #777; /* Color del texto de las subpestañas */
background: #fff; /* Color de fondo de las subpestañas */
border: 1px solid #ccc; /* Borde de las subpestañas */
padding: 5px;
}

#menu li ul a:hover {
color: #E2144A; /* Color del texto de las subpestañas al pasar el cursor */
background: #f9f9f9; /* Color de fondo de las subpestañas al pasar el cursor */
}
Por último entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y ahí pega esto:
<div id="menu">
<ul id="menuList">
<li><a class="submenu" href="URL del enlace">Pestaña 1</a></li>
<li><a class="submenu" href="URL del enlace">Pestaña 2</a>
<ul>
<li><a href="URL del enlace">Pestaña 2.1</a></li>
<li><a href="URL del enlace">Pestaña 2.2</a></li>
<li><a href="URL del enlace">Pestaña 2.3</a></li>
</ul>
</li>
<li><a class="submenu" href="URL del enlace">Pestaña 3</a>
<ul>
<li><a href="URL del enlace">Pestaña 3.1</a></li>
<li><a href="URL del enlace">Pestaña 3.2</a></li>
<li><a href="URL del enlace">Pestaña 3.3</a></li>
</ul>
</li>
<li><a class="submenu" href="URL del enlace">Pestaña 4</a>
<ul>
<li><a href="URL del enlace">Pestaña 4.1</a></li>
<li><a href="URL del enlace">Pestaña 4.2</a></li>
<li><a href="URL del enlace">Pestaña 4.3</a></li>
</ul>
</li>
</ul>
</div>
Cambia la URL del enlace donde se indica así como el nombre de la pestaña y de las subpestañas.
Si deseas agregar otra pestaña sólo agrega antes del </ul> de color azul otra línea como esta:
<li><a class="submenu" href="URL del enlace">Otra pestaña</a></li>
Si deseas que la pestaña tenga subpestañas entonces agrega este código en lugar del otro:
<li><a class="submenu" href="URL del enlace">Otra pestaña</a>
<ul>
<li><a href="URL del enlace">Pestaña 5.1</a></li>
<li><a href="URL del enlace">Pestaña 5.2</a></li>
<li><a href="URL del enlace">Pestaña 5.3</a></li>
</ul>
</li>
Como puedes darte cuenta es un menú simple, elegante y fácil de personalizar que no requiere nada más que CSS.


298 comentarios en:

" Menú horizontal drop and down con CSS "

  1. OAAA que bonito Bro!!! ademas de no necesitar librería. Me encanta! Podemos esconder un extenso menú sólo en un botón :o

    Un abrazo!!!

    ResponderEliminar
  2. Estupendo ahora Mismo lo ago

    ResponderEliminar
  3. No lo entendí, el código sí, pero lo que no entendí fue lo de agregar, ya lo hice, pero no funciona...

    ResponderEliminar
  4. Buenas, sabe alguien como implementar minipost??? he intentando con este tuto:http://thebatzuk.org/2009/03/asides-o-miniposts-en-blogger-mejorado.html

    hay dos problemas: 1) no aparece el link para los comentarios

    2) se interfiere con el leer mas que tengo instalado :http://ciudadblogger.com/2010/06/leer-mas-automatico-menos-en-el-primer.html

    puesto que el minipost solo aparece si esta como el post mas reciente y si publico otro el minipost se convierte en "leer mas" (que deberia ser solo para post largos)

    ResponderEliminar
  5. muy bueno potro, gracias por el aporte

    ResponderEliminar
  6. brother, claro, eso es lo mejor, que sin librerías de ningún tipo, así que la página no se alenta en nada.

    ◄•••►F.Garcia◄•••►, qué bueno que te ha gustado.

    Jorge Alonzo, sólo se cambia la URL del enlace por el enlace que tú deseas.

    hablemosdeeconomia, desconozco el método que explican ahí, lo más conveniente sería que le preguntaras al autor para ver si existe la posibilidad de combinarlo con el Leer más.

    zona lerh, gracias a ti por tu visita.

    ResponderEliminar
  7. potro tengo una duda k me ha surgido en el blog.
    arriba de la barra de navegación me pone un texto en el que dice: frases de amor
    si me puedes ayudar te lo agradecere.
    mi blog es http://elrincondemario6.blogspot.com/

    ResponderEliminar
  8. Mola, yo no lo necesito, pero sé de alguien que sí...
    ¿De donde sacas la información, que eres, un tipo de automata bloggero?

    seas lo que seas, eres de los mejores que conozco en esto, y la verdad, eres buena persona.
    ...
    ¿Te sale rentable aguantar tantos cansinos como yo? Yo no aguantaría ni un año, pero tu... sigues, dia a dia; te mereces un aplauso y que te hagan un monumento, macho.

    Un abrazo y gracias.

    ResponderEliminar
  9. Siempre he querido hacer estos tipos de menús, pero mas me interesaría saber como adaptar una plantilla de btemplates y agregarle este tipo de menús, por que la gran mayoría de las plantillas viene con menús estaticos que son muy pocos vistosos.
    Potro, tu realizas algún tipo de asesoría en la adecuación de plantillas para blogger?. Quiero hacer una plantilla definitiva para mi web y estoy cansado de buscar una que me satisfaga.
    Estaré viendo el tema por si respondes.
    Saludos.

    ResponderEliminar
  10. Hola Potro:
    Bueno, sencillo, adaptable y lo mejor es que cumple la función perfectamente sin tanta cosa que "desacelere" la carga.
    Muy buen dato.

    Saludos master.
    Jpz.-

    ResponderEliminar
  11. mariocrack6, no veo tal texto pero ha de haber sido un gadget que agregaste que lo incorporó.

    Drawer 4 Everyone, rentable no es pero me basta con saber que a alguien le pueda ayudar aunque sea un poco ;)

    Whisper, todo se puede personalizar poco a poco, obviamente las plantillas más sofisticadas requieren de mayor mantenimiento. Como recomendación yo te diría que usaras una Mínima y que a partir de ahí vayas poniendo las cosas que quieres hasta darle la forma que buscas. Es cansado y requiere de trabajo pero podrás tener una plantilla única y a tu gusto.

    Jpz, lo has resumido perfectamente :)

    ResponderEliminar
  12. Muy útil, justo lo que quería. Tenía intención de montar algo similar, pero tú me has facilitado el trabajo:"Bueno, bonito y barato",...Saludos

    ResponderEliminar
  13. Muy lindo Potro, te cuento que pruebo todo :)
    Solo que me fijo si veo lo mismo en Mozilla y IE, cúando se pondrán de acuerdo los navegadores :(

    Saludos!

    ResponderEliminar
  14. MaCaPe, jaja, me gustó la frase :)

    Graciela, lo sé, entre tanto navegador que hay ninguno quiere ceder, mientras tanto somos los usuarios los que nos volvemos locos :s

    ResponderEliminar
  15. Potro, creo que te haré caso y me pondré a codificar mi propia plantilla.

    Saludos.

    ResponderEliminar
  16. Estimado Potro, cómo estás?

    Es posible colocar imágenes como botones?

    Saludos,

    ResponderEliminar
  17. Pues en la parte que le corresponde al color de fondo de las pestañas podrías usar una imagen, o bien, un icono junto al texto de la pestaña.

    ResponderEliminar
  18. Ok, pruebo la última opción, porque quisiera imágenes distintas para cada pestaña.

    Gracias!

    ResponderEliminar
  19. Muy buena aportacion.
    Ya lo utilize.
    Muchas gracias.

    ResponderEliminar
  20. I did something similar some time ago in a graphic design web http://www.elojodelhuracan.com

    ResponderEliminar
  21. Amigo me puedes ayudar,no me aparece las subpestañas entra a mi blog y fijate hice todo bien, si pude ayudarme te agradeceria

    ResponderEliminar
  22. Buenas, no puedo hacer andar los sub menus, jaja..algun truco? un abrazo! gracias por el aporte

    ResponderEliminar
  23. pes y Anatomía, los menús con subpestañas así como muchos otros trucos no funcionan en las nuevas plantillas de Blogger, desconozco la razón y tampoco sé si haya una solución para ello.

    ResponderEliminar
  24. Hola Potro. Gracias por querer ayudarnos.
    A mi me pasa que el Menu de pestañas me ocupa toda la pagina del blog,no me queda centrado como esta esta pagina.
    ¿Que puedo hacer?
    Un saludo
    Juliàn

    ResponderEliminar
  25. potro como le hago para quede centrado?? aqui la muestra

    http://infinitcorporation.blogspot.com

    ResponderEliminar
  26. Julian Mora y Infinit Corporation, los menús horizontales se acomodan de izquierda a derecha y se van extendiendo conforme se vaya llenando de contenido.

    ResponderEliminar
  27. lo quiero poner abajo de la cabecera pero cuando paso el mouse no se ve el submenu

    ResponderEliminar
  28. No mencionas en cuál blog lo quieres poner, pero si es en una plantilla de las nuevas de Blogger entonces no se podrá, en esas plantillas no funciona ningún menú de subpestañas.

    ResponderEliminar
  29. Estimado Potro.

    Probando este código, solo me funciono perfectamente con IE. En los otros navegadores (Chrome, Firefox, Opera y Safari se descuadraba (salto de línea) todo justo en aquellas pestañas donde había submenús y además no las presentaba.

    Bueno… saltando este detalle…con este código y otro finalmente hice una combinación de estilos con el resultado que ves aquí:

    http://adolfoalfonzo.blogspot.com

    Por los momentos deje vacíos todos los espacios correspondientes a los submenú del Gadget para que no entraran en conflicto con los otros navegadores…¿alguna sugerencia al respecto?

    Por otra parte…¿Cómo podría hacer para que se muestre diferente la pestaña activa (o pagina actual)?...lo que veo en la red es muy enredado y no logro entenderlo.

    Un cordial saludo

    Adolfo

    ResponderEliminar
  30. No sabría decirte respecto a la compatibilidad, yo lo he probado en todos los navegadores y en ninguno tuve problemas, pero quizá ya dentro de tu plantilla se comporte de otra forma.

    Lo de la pestaña activa no creo que sea posible con este tipo de menús, yo sólo he visto que se hacen con Flash o PHP pero ninguno de los dos conozco, así que te quedaré a deber esa información.

    Saludos.

    ResponderEliminar
  31. De acuerdo a lo que me comentas y luego de 24 horas sin ver códigos por todos lados (vaya locura)...Ya encontré el error…je je je je....unos “casi invisibles li" atravesados dentro del gadget.

    Lo de la pestaña activa es interesante y estoy pendiente.

    Gracias nuevamente amigo

    ResponderEliminar
  32. Listo! y todo perfecto...ya puedes ver el resultado...

    ResponderEliminar
  33. Jajaja, "unos casi invisibles li" jajajajaja

    Oye pues ya eres todo un crack, te ha quedado increíble el diseño.
    Mis respetos :)

    ResponderEliminar
  34. Casi, casi invisibles en ese mar de signos, símbolos y otros aparejos...Claro! hasta el día de hoy que me hizo “crack” la cervical de tanto estar doblado frente al monitor...je je je.

    Me agrada que te gustara el diseño…y es una excelente señal de que les pueda agradar a los lectores y una buena motivación para continuar dándole toques personales a esas buenas plantillas que encontramos en la Web (En mi caso la plantilla matriz Evidens white de Francisco Blog and Web)…y por supuesto, gracias a ti.

    Un cordial saludo y en contacto.

    ResponderEliminar
  35. Casi, casi invisibles en ese mar de signos, símbolos y otros aparejos...Claro! hasta el día de hoy que me hizo “crack” la cervical de tanto estar doblado frente al monitor...je je je.

    Me agrada que te gustara el diseño…y es una excelente señal de que les pueda agradar a los lectores y una buena motivación para continuar dándole toques personales a esas buenas plantillas que encontramos en la Web (En mi caso la plantilla matriz Evidens white de Francisco Blog and Web)…y por supuesto, gracias a ti.

    Un cordial saludo y en contacto.

    ResponderEliminar
  36. Hola como va, no sabia donde escribirte pero tengo una duda que me acongoja hace bastante, quiero tener un menú en especial pero no se como conseguirlo esta es la pagina, se puede tener un menú parecido a esto en blogger? http://www.lisahanawalt.com/ ya tengo una pagina de bienvenida en mi blog http://depravatefactum.blogspot.com/
    pero quiero poner los enlaces encima de mi imagen, quizá hacer algo en flash?, agradeceria mucho tu ayuda.
    Te dejo mi Mail si es que te animas a ayudarme. Gracias de antemano saludos.

    Mail: lies-for-the-liars-@hotmail.com

    ResponderEliminar
  37. Podrías hacerlo con un mapa de imágenes, esto es que, haces la imagen con los links, todo en una sola imagen. Luego aplicas los enlaces en forma de coordenadas de modo que cada coordenada apunte hacia una área especifica de la imagen.
    Te dejo un enlace de Oloblogger que explica cómo crear los mapas de imágenes:
    http://oloblogger.blogspot.com/2008/02/mapeado-de-imgenes.html

    ResponderEliminar
  38. Hola Potro, agregué el menú a mi blog, aún no le he puesto los enlaces, pero me he fijado que cuando despliego los submenus se quedan detrás del carrusel de imágenes que he puesto debajo de la cabecera.
    Un saludo!

    ResponderEliminar
  39. Encontré la solución ^^
    Por si a alguien le hace falta, encontré esto http://www.cristalab.com/tips/visualizar-menus-desplegables-por-encima-de-peliculas-flash-c76860l/
    Lo comparto con todos con tu permiso Potro.
    Por cierto, para contactar contigo Potro, utilizo el e-mail?
    Un saludo!

    ResponderEliminar
  40. Muchas gracias por compartirlo :)
    Por el momento las consultas por correo están deshabilitadas pero en unos días más estarán de vuelta.
    Saludos!

    ResponderEliminar
  41. Hola Potro, sigo teniendo el problema...

    Resulta que puse en el blog el menú que aqui describes, pero justo debajo tenía puesto un slide con imágenes. Lo que ocurre es que al desplegarse el menu queda debajo del slide de imágenes, me gustaría encontrar una solución efectiva para chrome, firefox y explorer.

    Muchas gracias!

    ResponderEliminar
  42. Además el slide no se ve en Internet Explorer, en Firefox y Chrome no hay problema. Dejaré el blog a la vista pública para que puedas ayudarme y ofrecerme sugerencias para mejorar la idea que tengo de web.

    ResponderEliminar
  43. Lo comenté en los condicionales, pero al parecer se borró. He intentado que el slide con imagenes no se vea en las páginas estáticas del menú, pero no lo logro y lo intenté con varios códigos.

    Saludos, espero que me puedan ayudar.

    ResponderEliminar
  44. Pues en sí esa solución que compartías debe funcionar para todos los navegadores.
    Respecto a que si el slide no se ve en IE entonces quizá necesita un plugin tu navegador pues debería de verse sin problemas.
    Lo de las condicionales lo vemos en la otra entrada.

    Saludos.

    ResponderEliminar
  45. Hola amigo, me musta mucho tu blog y veo que tienes cosas increibles, tengo varios blogs y no se si tendré tanto tiempo para incluir tantas aplicaciones como he visto, pero en este momento lo que me trae de cabeza es encontrar un menú horizontal con submenús desplegables que funcione con una de mis plantillas, en concreto esta: http://jornadasdifusionsantiponce.blogspot.com/ y que se vea bien en IE. Si me facilitas una opción válida te estaré agradecido eternamente. Saludos.

    ResponderEliminar
  46. Hola Edudemonio,

    En las plantillas del diseñador de plantillas de Blogger no funcionan los menús de subpestañas :\

    ResponderEliminar
  47. Hola: he seguido algunos de tus tutoriales de menús para convertir las etiquetas en botones de menú y no me sale. Me he vuelto loco ¿Me puedes recomendar alguno sencillo? Es fácil hacer el que tienes aquí de botones horizontales? Un saludo. Mi blog es http://culemania-sito.blogspot.com Gracias

    ResponderEliminar
  48. Hola Sito,

    Me parece que lo que se te está complicando no es tanto el menú sino hacer que las pestañas de éste dirijan a las etiquetas. Si es así entonces mira esta entrada que explica cómo hacer los menús de categorías.

    Saludos.

    ResponderEliminar
  49. Hola, de nuevo. He seguido tu post sobre menús de categorías. He copiado con el Chrome la dirección de enlace de una etiqueta, la he pegado después en la url del enlace de la primera pestaña, en la plantilla, y no veo resultado en el blog. Algo hago mal.

    ResponderEliminar
  50. Donde puedo conseguir plantillas en las que acepten los submenus?

    ResponderEliminar
  51. Sito, no veo que tengas subpestañas en el blog, sólo veo la pestaña Inicio pero nada más. Necesitaría verlo puesto en el blog para decirte dónde puede estar el error.

    PAU, cualquier plantilla que no sea del diseñador. Si entras en Diseño > Edición de HTML y abajo haces click en 'Seleccionar plantilla de diseño' verás las plantillas antiguas en la cual sí podrás usar submenus.

    ResponderEliminar
  52. Potro yo tengo ya un menu en mi blogs solo me gustaria saber com hago para que caundo entren a por ejemplo al menu portable salga solo la lista de partable y es usuario seleccione el que desea ver. algo asi como com el menu de esta wed yo entro por ejemplo a menu y ai me sale todo la lista de lo que tiene q ver con menu y decido en cual menu entrar luego ver las descricciones de la lista de menu..

    ResponderEliminar
  53. Pues lo que yo tengo es el truco de expandir títulos de las entradas en una búsqueda. De esa forma se mostrarán sólo los títulos cuando hagan click en una etiqueta.

    ResponderEliminar
  54. Hola potro. Estoy teniendo muchos problemas con las nuevas plantillas de blogger. Sabés como poner las viejas plantillas blogger? Asi, volviendo al viejo sistema me ahorraria algunas cuantas molestias...
    Saludos.

    ResponderEliminar
  55. Claro, solo ve a Diseño > Edicion de HTML, y hasta abajo haz click en 'Seleccionar plantilla de diseño'.
    Ahi podras seleccionar las plantillas clasicas de Blogger.

    ResponderEliminar
  56. y como consigo las URL de los enlaces? eso es loq ue no entiendo je

    ResponderEliminar
  57. Depende qué es lo que quieras enlazar en el menú. Por ejemplo, si quisieras enlazar a Google entonces la URL del enlace sería http://google.com
    Si fuera una entrada de tu blog ingresa a la entrada que quieres enlazar y arriba en la barra de direcciones del navegador verás la URL de la entrada.

    ResponderEliminar
  58. Siento molestarte. Veo que no se puede centrar este menú. Tú en tu página si lo tienes centrado ¿es otro o es el mismo? Es que yo lo quiero centrado.
    Otra cosa, si pongo muchas subcarpetas se me tapan con la entrada o con el reloj u otros elementos de la página ¿hay solución para esto?
    y por último, ¿se pueden variar el ancho de las pestañas en función del texto? Y si no se puede hacer todo esto, ¿conoces algún cógigo para hacerlo?
    Gracias y que tengas un feliz año nuevo 2011.
    Saludos cordiales.

    ResponderEliminar
  59. Tanto como centrarlo no se puede (no de forma literal) pero puedes crear un espacio al inicio del menú para que éste se acomode más hacia la derecha.
    Para hacerlo busca esta parte y agrega lo que está en negrita:
    #menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    padding-left:30px;
    }

    Ese 30px lo puedes ajustar hasta que quede como quieres.
    Sobre lo demás, sólo sucede cuando hay un elemento en flash pero eso sucede siempre con cualquier tipo de menú cuando se encuentra con un objeto flash.
    Y no, no se puede ajustar según el ancho del texto.

    Saludos e igualmente feliz año nuevo!!!

    ResponderEliminar
  60. Muchas gracias. He visto en un comentario algo sobre los flash, voy a buscarlo y a ver si me vale.
    Saludos.

    ResponderEliminar
  61. super ahorita me ago uno para mi blog se ve estupendo y la vdd es elegante y me va ayudar mucho ya que tengo mucho contenido en mi blog gracias potro

    ResponderEliminar
  62. He probado este truco y no me sale. Intenté según los pasos que están aquí, pero el menú salía todo "abierto". También intenté colocar todo el texto CSS en el Gadget, ahí la apariencia es la adecuada, pero los submenús no se despliegan. ¿Qué podrá ser?
    Saludos.

    ResponderEliminar
  63. Lo que sucede es que los menús de subpestañas en las plantillas hechas a través del Diseñador de plantillas no funcionan.

    Una opción es que elimines todo lo que hay dentro de:

    /* Tabs
    ----------------------------------------------- */

    Pero antes haz un respaldo de tu plantilla.
    Saludos.

    ResponderEliminar
  64. Hola amigo potro, sabes esto funciona cuando o pones con un gadet, como seria si se pone dentro de la pagina con el diseñador de plantillas, necesito de tu ayuda si se puede, necesito esta opcion que funcione. xd.

    ResponderEliminar
  65. En las plantillas hechas con el Diseñador de plantillas los menús de subpestañas no funcionan.

    ResponderEliminar
  66. Hola que tal, yo tengo un menu desplegable css en un archivo .html
    que al abrirlo se abre en un navegador donde solo aparece el menu!
    el tema es que no se como implementarlo al blog.. lo tengo en archivo y no en codigo! espero respuestas, saludosss

    ResponderEliminar
  67. Mira el código fuente del archivo HTML (presionando las teclas CTRL + U)
    Ahí verás la estructura del menú.
    Si tiene un enlace de CSS entonces ábrelo y copia su contenido y pégalo antes de ]]></b:skin>
    Si los estilos están encerrados entre <style> y </style> entonces van antes de </head>
    Si tiene un script entonces va también antes de </head>
    Y el código del menú va (la estructura HTML) va en un elemento HTML/Javascript.

    ResponderEliminar
  68. hice todo tal y como me dijiste... y ya lo pude poner antes de que me respondas, pero siempre me pasa lo mismo...

    te muestro la pagina asi te das cuenta como tendria que quedar y como queda..

    cuando lo pongo abajo de la cabecera del blog, donde tendria q ir y donde quiero q vaya no se ve bien, no se despliegan los submenus

    en cambio cuando lo pongo mas abajo o en cualquier otra parte, funciona bien y se despliegan todos los submenus.. pero esta en una ubicacion incorrecta ya que no queda donde yo quiero que es abajo del titulo...

    http://espaciomichaelbetatester.blogspot.com/

    ResponderEliminar
  69. En realidad no es que estés haciendo algo mal, lo que sucede es que en las plantillas hechas a través del Diseñador de plantillas de Blogger los menús de subpestañas no funcionan.
    Esto es porque en el área debajo de la cabecera tienen estilos definidos que hacen que éstos menús dejen de funcionar.

    Una posible opción es eliminar todo lo que hay dentro de:
    /* Tabs
    ----------------------------------------------- */

    Eso puede hacer que se desplieguen los menús, aunque quizá el menú siga sin verse como debería verse.

    ResponderEliminar
  70. no hay nada dentro de
    /* Tabs----------------------------------------------- */

    y la plantilla la eleji cuando cree el blog (el de prueba) y no modifique nada en el diseñador de plantillas...

    como hago para poner una plantilla que no sea esa? descargue una de internet antes pero nunca la use , pruebo esa? saludos

    pd: el blog principal si lo hice con el diseñador de plantillas.. me gusta el fondo y el formato tal y com quedo, como hago para que no sea con el diseñador de plantillas pero que se vea igual?

    ResponderEliminar
  71. Todas las plantillas hechas con el Diseñador de plantillas tienen esa área que te comenté.

    Para subir una plantilla que no es de Blogger mira esta entrada:
    http://ciudadblogger.com/2009/01/cambiar-plantilla-de-blogger.html

    ResponderEliminar
  72. el tema es que no encuentro una plantilla que me sirva... ademas todas vienen con menus, botones, imagenes, etc que no se las puedo sacar!! no puedo manejarla 100% como una de blogger a traves de elementos de plantilla... ya tendria que manipular la edicion html pero ya es mucho bardo.

    no hay otra solucion para hacer funcionar el menu en la plantilla que tengo? no se podrian cambiar esos estilos? otra solucion?

    lo que me dijiste que borre, no hay nada dentro de eso.
    saludos

    ResponderEliminar
  73. Te repito. TODAS las plantillas del diseñador tienen esa área.
    Sin embargo y aunque te parezcan fáciles de personalizar ahora esas plantillas la realidad es que son muy limitadas en cuanto a personalización pues una vez que las usas te darás cuenta que muchos trucos no se puede aplicar a ellas, así que si tienes pensado hacerle muchos cambios será mejor que veas otras opciones de plantillas pues ahí te dará muchos dolores de cabeza.
    En btemplates.com hay cientos de plantillas de donde escoger, quizá alguna de ellas sea de tu agrado.

    Saludos.

    ResponderEliminar
  74. a lo que voy es que a una plantilla prediseñada, no se sacarle el menu con el que viene, o las imagenes o los botones a twitter, facebook, feeds, etc.. ni se como modificarle los colores

    ResponderEliminar
  75. Si apenas estás empezando con los blogs y las plantillas entonces debes hacerlo poco a poco. Las plantillas que son demasiado personalizadas requieren de mayor mantenimiento y mayor conocimiento de HTML, por lo que si apenas estás incursionando con los blogs puedes empezar con una plantilla más sencilla y poco a poco adentrarte en ella, quizá las plantillas sencillas te parezcan muy simples, pero con el tiempo adquirirás mayor habilidad para personalizarlas y la podrás formar a tu entero gusto.

    ResponderEliminar
  76. pero lo unico que quiero es poner el bendito menu...

    aca hay una prueba de que se puede lograr en una plantilla del diseñador de plantillas de blogger:

    http://desarrollosjava.blogspot.com/

    le pedi el codigo pero me dio el de la plantilla y no el del menu... y ahora se fue y no lo tengo, mañana se lo pido bien.

    ResponderEliminar
  77. Esa no es una plantilla hecha a través del Diseñador de plantillas de Blogger. Esa es un plantilla clásica de Blogger. En esas sí funcionan los menús y las puedes seleccionar entrando en Diseño > Edición de HTML y abajo click en 'Plantillas de diseño (lanzado en 2006)'.

    ResponderEliminar
  78. ya funciono pero hay cosas que necesito cambiar y no puedo... me podes agregar al msn asi te consulto unas cosas? pasa que tengo la pagina en marcha y esto del menu me freno mucho y voy a perder las visitas si no pongo material nuevo.. saludos

    es.nico@hotmail.it

    ResponderEliminar
  79. Con gusto te ayudo en lo que pueda pero todas las preguntas se hacen a través del blog en la entrada que corresponde.
    Recuerda que antes puedes utilizar el menú de este blog para encontrar los temas que buscas o bien, utilizar el buscador.

    Saludos.

    ResponderEliminar
  80. TENGO UN PROBLEMA CON ESTE EL MENU, ESTA POR DEBAJO DE MI GADGET DE FLASH QUE TENGO Y NO ME PERMITE SELECCIONAR LOS SUBMENUS. COMO PODRIA PONERLO POR ENCIMA. GRACIAS.

    http://municipalidaddepachacamac.blogspot.com/

    ResponderEliminar
  81. No veo que tengas puesto el menú ni tampoco pude localizar el gadget que mencionas. Pero te dejo un enlace donde se explica cómo solucionar los casos en los que el flash se sobre pone en los menús:
    http://aliviana.com/2008/11/flash-se-sobrepone-a-menu-javascript-resuelto/

    ResponderEliminar
  82. POTRO NADA SIGUE IGUAL. AHI TE DEJO EL LINK DE MI PAGINA.

    http://municipalidaddepachacamac.blogspot.com/

    ResponderEliminar
  83. Lo que sucede es que en las plantillas hechas con el Diseñador de plantillas de Blogger los menús con subpestañas no funcionan.

    Una posible opción es eliminar todo lo que hay dentro de:
    /* Tabs
    ----------------------------------------------- */

    Y con eso probablemente puedan mostrarse las subpestañas en esas plantillas.

    ResponderEliminar
  84. hola potro soy nuevo y mira lo que pasa en mi blog
    haber si me puedes ayudar

    www.puntomovies.blogspot.com

    es que no se como explicártelo es mejor que mires lo que pasa gracias por tu ayuda

    ResponderEliminar
  85. Hola iorififita,

    Entré a tu blog y no entiendo cuál es el problema, lo veo todo bien.

    ResponderEliminar
  86. el que se desliza de la parte de arriba funciona perfecto.


    pero este menú no me funciona, mira te lo explico así por que no encuentro otra forma

    entro al blog, hago clic en un link del menu, después que quiero hacer clic en el otro link no me funciona ya que pasa esto.



    las pagina se identifican con la letra p/nombre de la pagina cierto.

    entonces cuando hago clic en la primer link va a la pagina,pero estando en esa pagina y vuelvo a hacer clic en un link del menu pasa esto:

    sale asi en la barra de direcciones

    p/p/nombre de la pagina espero me hayas entendido

    XD
    :D

    y espero me puedas ayudar

    ResponderEliminar
  87. hola potro disculpame por molestarte tanto.

    es que quiero saber como haces para cuando te busca uno en google te salga esos links en la parte de abajo gracias adios

    ResponderEliminar
  88. Hola iorififita,

    Quise ver el problema pero parece que ya has eliminado el menú.
    Los links que mencionas no los agrego yo, los agrega Google cuando considera que un sitio tiene cierta relevancia en la red (según Google).
    Pero no hay nada que nosotros como usuarios podamos hacer para que aparezcan.

    Saludos.

    ResponderEliminar
  89. El Potro dijo... 46

    Hola Edudemonio,

    En las plantillas del diseñador de plantillas de Blogger no funcionan los menús de subpestañas :\



    Potro, leí eso buscando a ver si encontraba mi duda, ¿es cierto?
    Jooooo, yo toda ilusionada... No sé qué hacer ya... ¡Uf!

    ResponderEliminar
  90. Jajaja, sí es cierto, pero ¿ya probaste lo que te comentaba en el comentario anterior? quizá eso te ayude.

    ResponderEliminar
  91. Potro, sí lo intenté, pero nada...
    Así que decidí dejar el que tenía, qué rabia... Así que mientras tanto, se queda este http://chgevents.blogspot.com/
    Estaré muy atenta por si sale algún menú que me venga como anillo al dedo, la verdad es que este era increíble para lo que yo buscaba, pero qué le voy a hacer, estoy triste... jajaja.
    No tengo ni idea de cómo va lo de las plantillas, yo me puse una de blogger con una imagen de fondo... ¡Qué rollo que no me funcione el menú! Pero muchas gracias por tu ayuda...

    ¡Besitos!

    ResponderEliminar
  92. Bueno, esta semana veré cómo puede hacerse para echar a andar estos menús, estoy seguro que se podrá sólo que no sé por dónde empezar.
    Cualquier cosa que suceda pues lo publicaré en el blog para enterar a todos de cómo podría solucionarse y que puedan usar cualquier menú.

    Besos!

    ResponderEliminar
  93. Ya se ve tu favicon ,entoces talvez era mi navegador, los veia todos menos el tuyo, no lo vi como por 2 dias jeje,

    Potro necesito poner este menu pero solo en una etiqueta especifica, asi que use una de estas condicionalespero no le obedecio. Por ser un menu debe de llevar alguna otra condicional?

    ResponderEliminar
  94. Debe funcionar, ¿exactamente cuál condicional usaste y cómo lo hiciste?

    ResponderEliminar
  95. Puse el codigo que va antes de guarde cambios todo bien, despues use esta condicional

    "Mostrar /ejecutar un elemento en una entrada específica o etiqueta específica"

    y la aplique en el gadget HTML asi:




    <b:if cond='data:blog.url == &quot;http://peliculastube.blogspot.com/search/label/etiqueta&quot;'>
    <div id="menu">
    <ul id="menuList">
    <li><a class="submenu" href="URL del enlace">Pestaña 1</a></li>
    <li><a class="submenu" href="URL del enlace">Pestaña 2</a>
    <ul>
    <li><a href="URL del enlace">Pestaña 2.1</a></li>
    <li><a href="URL del enlace">Pestaña 2.2</a></li>
    <li><a href="URL del enlace">Pestaña 2.3</a></li>
    </ul>
    </li>
    <li><a class="submenu" href="URL del enlace">Pestaña 3</a>
    <ul>
    <li><a href="URL del enlace">Pestaña 3.1</a></li>
    <li><a href="URL del enlace">Pestaña 3.2</a></li>
    <li><a href="URL del enlace">Pestaña 3.3</a></li>
    </ul>
    </li>
    <li><a class="submenu" href="URL del enlace">Pestaña 4</a>
    <ul>
    <li><a href="URL del enlace">Pestaña 4.1</a></li>
    <li><a href="URL del enlace">Pestaña 4.2</a></li>
    <li><a href="URL del enlace">Pestaña 4.3</a></li>
    </ul>
    </li>
    </ul>
    </div>
    </b:if>



    claro sustituyendo las frases por mis enlaces.

    ResponderEliminar
  96. Ok, ok, lo que sucede es que dentro del gadget no hace efecto, sólo puedes hacerlo dentro de la estructura del gadget (en la Edición de HTML) y de esta otra forma:
    http://ciudadblogger.com/2011/01/ocultar-gadgets-y-elementos-en.html

    ResponderEliminar
  97. Bueno, gracias potro son mis novatadas con los codigos XD.
    Conoces Mexicali potro? eres de Tijuana no?

    ResponderEliminar
  98. Pues fíjate que nunca se me ha hecho ir, siempre surge algo y ya no voy, y cuando tengo chance de ir es en verano pero ni loco iría cuando están a 50º jaja, ¿por qué?

    ResponderEliminar
  99. PARCEROS GRACIAS A LO BIEN Q SI ME FUNCIONO TOOO
    BIEN

    ResponderEliminar
  100. Si jeje si quieres una probada del infierno en la tierra definitivamente Mexicali es el lugar.Lo conozco muy bien vivi años ahi, ahora estoy muy lejos ,todos esos lugares Ensenada ,La rumorosa,tecate,tijuana,Rosarito, y solo era por preguntar nadamas, ya que suban los xolos a primera voy a ir al caliente a ver los demas equipos

    ResponderEliminar
  101. hola potro perdon si molesto epro es que en mi blog el emnu se ve mal osea tiene fallas no se ve como deberia ser en horizontal se ve vertical y no se si me puedas ayudar ya van muchos menus de este tipo que pongo y no se vens e ven en blanco ayuda por favor que puedo hacer es mi blog?? o que pasa gracias saludos

    ResponderEliminar
  102. Pues me encantaría ayudarte pero sin saber en cuál blog tienes el problema me es difícil hacerlo.

    ResponderEliminar
  103. no no no gracias potro ya pude arreglarlo ya se ve el menu pero ay algo que em gustari< que me ayudaras e intentado poner un menu muy padre pero cuando lo instalo no se ve como deberia mira te paso el link de donde lo descarge para que lo chekes y oajala pudieras poner un tuto de como instalarlo por que la verdad no se mucho de esto y me gustaria que me ayudaras bueno con la esperanza de que puedas te mando un gran saludo amigo gracias por tu ayuda esta super tu pagina mejoro mucho bueno adios saludos desde queretaro!!!!!!!!!11

    ResponderEliminar
  104. http://www.stunicholls.com/menu/pro_dropdown_1.html aqui el link men espero que puedas ayudarme

    ResponderEliminar
  105. Deja lo anoto para las próximas entradas y con gusto publico cómo hacerlo ;)

    ResponderEliminar
  106. aaaaaa muchas gracias hermano!!!!! eres super

    ResponderEliminar
  107. Hola Potro, me gustaría usar este menú pero me preguntaba si podría adaptarse para que de cada subpestaña salgan otras subpestañas, nose si me explico xD
    ¡Gracias por tu ayuda!

    ResponderEliminar
  108. En esos casos es mejor usar un menú que ya tenga esas características y luego adaptarlo al diseño que quieres:
    http://ciudadblogger.com/2011/04/menu-horizontal-con-subpestanas-hecho.html

    ResponderEliminar
  109. el potro este es mi blog de prueba
    http://goyu73-prueba.blogspot.com/
    Miratelo como me queda y como puedo solucionar el problema de las subpestañas.
    Me encanta este menú y ya lo he personalizado pero tengo este problema de que las subpestañas se me cortan donde están los post, si miras el blog lo verás el fallo, como lo puedo solucionar

    ResponderEliminar
  110. y no tengo nada flash debajo y no es una plantilla de blogger

    ResponderEliminar
  111. Hola goyu73,

    Lo que sucede es que lo has metido dentro del contenedor de la cabecera y el contenedor de la cabecera (#header-wrapper) tiene una altura definida de 250px por eso no alcanza a mostrarse todo:

    #header-wrapper {
    margin:0 auto;
    overflow:hidden;
    padding:0;
    background:#97694F;
    height:250px;
    width:960px;}

    Si cambias la altura del contenedor de la cabecera podrá mostrarse el resto del menú.

    ResponderEliminar
  112. ok gracias, lo he probado y por mala suerte me queda fatal jajajja, queda un vacio grande entre el menu de imagenes y los posts y queda fatal, voy ha intentar poner una foto en la cabecera menos alta

    ResponderEliminar
  113. Hola Potro, e probado 3 menus desplegables en:

    1. http://normalmru.blogspot.com/
    2. http://fisicamatematicadesecundaria.blogspot.com/
    3. http://noractividad.blogspot.com/

    pero en los dos primeros tengo problemas con el Internet explore, se distorsiona el menú.
    Me puedes ayudar a encontrar la forma de mejor los menus

    ResponderEliminar
  114. Hola Física Matemática,

    El problema está en que uno de los pasos para que funcione en esas plantillas no está bien hecho.

    En el paso donde está el error no eliminaste los estilos del área especificada, lo tienes de esta forma:

    /* Tabs
    ul {z-index: 200; padding:0 !important;}
    li:hover {position:relative;}
    #crosscol ul li {padding:0 !important;}
    */
    .tabs-inner {
    margin: .5em 20px 0;
    padding: 0;
    }
    .tabs-inner .section {
    margin: 0;
    }
    .tabs-inner .widget ul {
    padding: 0;
    background: transparent none repeat scroll bottom;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -goog-ms-border-radius: 0;
    border-radius: 0;
    }
    .tabs-inner .widget li {
    border: none;
    }
    .tabs-inner .widget li a {
    display: inline-block;
    padding: .5em 1em;
    margin-right: .25em;
    color: #ffffff;
    font: normal normal 15px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
    -moz-border-radius: 10px 10px 0 0;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -goog-ms-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0;
    background: transparent url(http://www.blogblog.com/1kt/transparent/black50.png) repeat scroll top left;
    border-right: 1px solid transparent;
    }
    .tabs-inner .widget li:first-child a {
    padding-left: 1.25em;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-bottomleft: 0;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-bottom-left-radius: 0;
    -goog-ms-border-top-left-radius: 10px;
    -goog-ms-border-bottom-left-radius: 0;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 0;
    }
    .tabs-inner .widget li.selected a,
    .tabs-inner .widget li a:hover {
    position: relative;
    z-index: 1;
    background: transparent url(http://www.blogblog.com/1kt/transparent/white80.png) repeat scroll bottom;
    color: #336699;
    -moz-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
    -goog-ms-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
    box-shadow: 0 0 3px rgba(0, 0, 0, .15);
    }

    Y todo eso debe quedar sólo así:

    /* Tabs
    ----------------------------------------------- */
    ul {z-index: 200; padding:0 !important;}
    li:hover {position:relative;}
    #crosscol ul li {padding:0 !important;}

    ResponderEliminar
  115. Gracias El Potro por la ayuda anterior, ya corregí ese dificultad.
    Pero también anterior, pero si pruebas el menú en Internet exploren tiene problema, como lo soluciono

    ResponderEliminar
  116. Esas plantillas tienen muchos problemas en Internet Explorer cuando se modifican, uno de esos problemas es que muchas veces el menú de esconde, ahí no sé cómo ayudarte pues se trata de un problema tanto de la plantilla como del navegador :/

    ResponderEliminar
  117. Que tal Potro olle buenisimo el menu me funciona perfectamente bien noma quisiera saber si ai manera de que cuando ago clik en Pestaña 2 Pestañ 3 Pestaña 4 se laquie osea que nomas trabajen las subpestañas.

    ResponderEliminar
  118. Hola Jose,

    No he entendido bien, ¿te refieres a que esas pestañas no tengan enlace y que no hagan nada cuando se dé click sobre ellas?

    ResponderEliminar
  119. solo que tengan enlases las subpestaña

    ResponderEliminar
  120. Entonces donde pondrías la URL del enlace pon esto:
    javascript:void(0);

    Con eso al dar click sobre esa pestaña no abrirá nada, sólo desplegará el submenú.

    ResponderEliminar
  121. Potro muchisimas grasias todo me sirbio muy bien exelente.

    ResponderEliminar
  122. Potro tengo un problema. Agregue este Menu en mi blog, y le puse los links en las pestañas y en las sub-pestañas, pero cada vez que hago click, en cualquiera de las 2...

    por ejemplo puse en la pestaña 1:

    www.FastenMovies.Blogspot.com

    la pestaña se llama HOME .. respectivamente para que vuelva al inicio.

    pero arriba me sale esto:
    http://fastenmovies.blogspot.com/fastenmovies.blogspot.com

    y me sale una pagina que dice esto.

    No se encuentra la página.
    Lo sentimos, la página que estabas buscando en el blog FastenMovies - Descargas 1 Link no existe.


    No entiendo :S

    es como que todas las pestañas, antes de ingresar en la URL respectiva, antes de esas URL, sale mi direccion www.Fastenmovies.blogspot.com .

    ResponderEliminar
  123. Supongo que habías puesto mal las URLs porque ahora he entrado y veo funcionando el menú perfectamente.

    ResponderEliminar
  124. Potro, fijate como esta el blog. No funciona. Osea, sale el menu y le pongo las URLS correspondientes como debe ser. Pero primero antes de la direccion que le pongo a cada url sale mi direccion,, osea que en vez de ingresar a la direccion POR EJEMPLO: www.google.com

    sale esto: www.Fastenmovies.Blogspot.com/www.Google.com

    porque es esto Potro?

    ResponderEliminar
  125. Porque cualquier enlace que pongas siempre debe empezar por http://
    Por lo tanto si pusieras el de Google por ejemplo sería así:
    http://google.com

    ResponderEliminar
  126. Hola Potro ya no tomes en cuenta los demas comentarios me decidi por este menu para no meterme en complicaciones solo tengo una gran duda mira este es mi blog http://cityvilleextreme.blogspot.com/ el problema que tengo que al poner el menu se movieron mis margenes y las letras cuando posteo quedan muy a la derecha casi en linea con el margen como lo podras ver en esta entradahttp://cityvilleextreme.blogspot.com/2011/05/guia-para-la-renovacion-de-la-escuela.html hay algo para solucionar ese problema

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

    ResponderEliminar
  128. Ademas de que ha algunas entradas se les ha quitado la fecha en la parte de hasta arriba en donde dice la fecha en que se publico y me a juntado algunas entradas no respetando el margen que le eh dado de entrara a entrada http://cityvilleextreme.blogspot.com/ si puedes pasar por mi blog y veras de lo que te hablo de antemano muchas gracias y nuevamente espero no molestar

    ResponderEliminar
  129. Ademas de que por lo mismo de los margenes algunos me gusta de las entradas desaparecieron

    ResponderEliminar
  130. Pues debe ser por alguna otra modificación que hiciste porque el menú como tal no tiene un estilo que afecte a los estilos de la plantilla.
    En cuanto a que algunas partes se pegan demasiado al borde de la entrada prueba cambiando esto:

    ul {z-index: 200; padding:0 !important;}
    li:hover {position:relative;}

    Por esto:
    #crosscol ul {z-index: 200; padding:0 !important;}
    #crosscol li:hover {position:relative;}

    ResponderEliminar
  131. SI gracias con eso ya quedo y disculpa tu no me podrás ayuda con esa ya cheque y solo es que las entradas del mismo dia se juntaron pero ya las tenia separadas a cada una por caja cada entrada y y por mas que busco no se que linea buscar o que habra pasado de antemano gracias por todo tu sabiduría mi blog va quedando poco a poco me podrías ayudar con eso lo que paso lo hice entonces sin querer y pues se me juntaron todas las entradas de un mismo día

    ResponderEliminar
  132. Y noto que en las paginas ya no aparecen el cuadro de abajo para dejar comentarios solo aparece deje su comentario aqui pero no aparece para escribir , una disculpa de antemano pero vos me podrías ayudar si quieres mira así se muestra hasta abajo http://cityvilleextreme.blogspot.com/p/guias-y-tutoriales-en-breve.html que necesito para que me ayudes mi clave de blogger o te paso mi plantilla para k vos la veas?

    ResponderEliminar
  133. El diseño de las plantillas de Blogger así es, agrupa todas las entradas del mismo día en uno solo marco.
    La caja de comentarios seguramente la eliminaste al modificar algo en la plantilla. Si tienes una plantilla de respaldo (siempre hay que tener una) reinstálala para regresar al estado anterior y recuperar tu caja de comentarios.

    ResponderEliminar
  134. Muchas pero muchísimas gracias Potro eh solucionado todo gracias a tus enormes respuestas sos un capo tio sabelo y de casualidad entre tus post no tendrás uno de como colocar una imagen de fondo en todo el blog mil gracias nuevamente

    ResponderEliminar
  135. Ahí mismo en el diseñador de plantillas hay una opción para poner una imagen de fondo.

    ResponderEliminar
  136. hola Potro ... he seguido tus instrucciones y me ha salido el menu muy bien.... pero surge un problema en mi caso quiero el menu debajo de la cabecera y siempre me sale arriba ... por lo tanto cuando cambio el gadget abajo de la cabecera todas las sub-pestañas desaparecen .... jeje perdona si el problema y la solucion son obvias pero soy novata en esto con decirte que apenas cree el blog hace 3 dias xD

    ResponderEliminar
  137. Hola Benihime Morgan, ¿en cuál blog has puesto el menú?

    ResponderEliminar
  138. mmm... en: http://makainoandras.blogspot.com/
    aun no tiene ninguna entrada ya que quize darle prioridad a lo del diseño ... pero no se si eso tenga que ver ya que como te mencionaba, cuando el menú esta encima de la cabecera las sub-pestañas se desplegan sin problemas pero asi como lo veras en el blog te daras cuenta que no hay pestañas o.o
    De antemano muchas gracias por tomarte la molestia de responderme ^^

    ResponderEliminar
  139. Recuerda que primero debes seguir los pasos que se explican en el enlace que se menciona en la entrada.

    ResponderEliminar
  140. aaaaah muchas gracias!! ... ya lo probe y finciona perfecto enserio mil gracias por tu ayuda, como ya habia dicho soy super novata en esto ^^U

    ResponderEliminar
  141. Qué gusto que ya se ha solucionado ;)
    Como consejo extra, aunque sea un blog de pruebas escribe un par de entradas con imágenes para que puedas ver cómo se verá el diseño cuando termines, además así podrás saber si habiendo entradas hay algún problema o no ;)
    Saludos!

    ResponderEliminar
  142. hola de nuevo potro muchas gracias por el consejo... tengo otro problemita q quizas no tenga nada que ver con el tema O.O, pero dime si me equivoco ... en la parte donde va el gadget se intruducen las urls a donde redireccionara cada boton del menu, para qu no me salga la leyenda ''No se encuentra la página. Lo sentimos,etc etc... no existe.'' tengo que crear paginas estaticas? en caso de que sea asi como incluyo hago funcionar las sub-pestañas que estan incorporadas en los botones del menu? disculpa la molestia de nuevo si es muy obvio el problema ^^U

    ResponderEliminar
  143. Ese mensaje que te aparece debe ser porque la URL del enlace está mal escrito, siempre debe llevar el http:// antes de cualquier dirección.
    Por ejemplo, si quisieras enlazar a Google la URL sería así:
    http://google.com

    ResponderEliminar
  144. jejeje de hecho asi los escribo ... pero ya cheque que fue lo que me fallo y ya esta resuelto al parecer, resulta que estaba escribiendo algo que no iba ahi jajaja por el momento quite el menu ya que cambie de nuevo el diseño del blog, pero en cuanto tenga mas entradas en el lo vuelvo a poner, ahora si ya sabre como ponerlo correctamente XD jaja
    muchas gracias Potro por la paciencia y la ayuda ... ^^ saludos desde las playitas de Acapulco.

    ResponderEliminar
  145. Potro como puedo hacer para que este menu, ocupe todo el ancho del blog... porque ami solamente me ocupa un espacio maximo, el cual.. esta muy bien, pero deja espacios a los costados, quisiera que ocupe TODO el ancho.

    ResponderEliminar
  146. La única forma es que juegues con el ancho de las pestañas (ahí dice dónde) para que al hacerlas un poco más grandes se haga más ancho todo el menú.

    ResponderEliminar
  147. Hola potro me gusto mucho la idea ,fijate que realize un menu basandome en algo parecido a los codigos que vienen pero trabaje con tablas es que me cuesta mas las listas je.Bueno pues termine mi menu y pues me gustaria perfeccionarlo y necesito de tu grandicima ayuda porfavor.
    Hice elmenu basandome en este blog
    http://html-color-codes.info/codigos-de-colores-hexadecimales/ y bueno hice lo que quiero es que al pasar el cursor por una opcion del menu se oscuresca a ese azul que tiene ,porque yo puse un a:hover pero solo marca el cambio de azul como a un cuadro pequeño que cubre la letra y yo lo quiero como en el menu de ese blog,creo que me explico ? Bueno talvez no mucho ,y mi otra duda es que en el menu en la opcion narutoshippuden esta muy alejada delaopcion que sigue ,lo que quiero hacer es que todas las opciones queden bien proporcionadas porque hay de una a otras opciones unas aberturas o espacios mas grandes que otros y yo me esmero en hacer bien mis trabajos y no se ,siento que se ve mal o desproporcionado ,bueno esto parece ser todo mi blog:http://toditonarutoshippuden.blogspot.com
    agradesco tu ayuda ya que es de suma monta para mi Gracias .

    P.D.:Para ponerle a las letras en blanco un relleno o borde negro¿Es con el codigo text-shadow?

    ResponderEliminar
  148. Prueba poniendo así los estilos:
    background:url(http://c632769.r69.cf2.rackcdn.com/menu_002.png)repeat;
    width: 960px;
    height: 34px;
    font-weight:bold;
    margin: 0px;
    padding: 0px;
    border-left: 0px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    }
    #tablemenu{
    background:url(http://c632769.r69.cf2.rackcdn.com/menu_002.png)repeat;
    height: 34px;
    font-size:16px;
    text-transform:capitalize;
    width:960px;
    padding-left:0px;
    margin-right:0px;
    margin-left:0px;
    margin-top:-10px;
    border-color:#DDD;text-align:center;
    }
    #tablemenu a{
    color:#FFFFFF;
    text-decoration:none;

    }
    #tablemenu td{width:100px;}
    #tablemenu td:hover{
    color:#FFFFFF;
    font-size:18px;
    background:url(http://t3.gstatic.com/images?q=tbn:ANd9GcQaRjpwQoMicHwivt2MhcaGCe-xRc35_gJy1_i0Cr3NdggczDwo);
    }

    El <li id='limenu'> y su cierre </li> no son necesarios, puedes eliminarlos.

    Sobre las sombras mira esta entrada:
    http://ciudadblogger.com/2009/10/sombras-en-los-textos-tambien-para.html

    Saludos.

    ResponderEliminar
  149. Buenas Potro, en mi blog http://www.sumadinero.com/ estoy intentando implementar un menú horizontal con subpestañas. He intentado colocar este pero como ves no me salen las subpestañas. Ya he eliminado todo el contenido de Tab. Pero sigo sin desplegar.

    Que me aconsejas?

    Gracias

    ResponderEliminar
  150. Hola Marc,

    Necesitas seguir todos los pasos que se explican en la entrada de referencia para plantillas del Diseñador de plantillas. Entré a tu blog pero no veo todos los pasos que se deben aplicar.

    Saludos.

    ResponderEliminar
  151. Gracias Potro. Ya solucione el tema del despliegue del menú jeje Pero tengo un problema con varios menús que implementado.

    Resulta que me salen cortados al desplegar el submenu. Y no encuentro que variables tengo que tocar dentro del código. Espero que me puedas ayudar.

    Gracias.

    Saludos

    ResponderEliminar
  152. Hola Marc,

    Eso vamos a verlo en la entrada del menú con el que tienes el problema para poder darle el seguimiento adecuado y no desviarnos del tema de este post.

    Saludos.

    ResponderEliminar
  153. Hola Potro...Realmente sos un Kapo. Siempre tenes una solucion.Mi consulta es la siguiente...tengo instalado este menu con submenus,pero al querer instalarles unas imagenes a manera de boton no pude,pero me conformo con cambiar el estilo de las fuentes y su tamaño...que me podes comentar?

    ResponderEliminar
  154. Las imágenes no creo, pero las fuentes puedes cambiarlas añadiendo debajo de:
    #menu ul a {

    Esto:
    font-size:13px;
    font-family:Impact;

    El primero es el tamaño y el segundo el tipo de letra :)
    Saludos!

    ResponderEliminar
  155. amigo ayer vi un blog que literalmente hizo un blog con distintas plantillas quisiera saber si en realdidad es verdad que se pueden hacer espero y me puedas ayudar

    ResponderEliminar
  156. se puede instalar el pekenburns slider en blogguer?

    ResponderEliminar
  157. Pues un diseñador o programador puede crear una plantilla basándose en diferentes estilos o diseños, pero no es que tomes literalmente un pedazo de una y un pedazo de otra. Más bien crea una plantilla nueva y a ella le aplica las partes que le han gustado de otras plantillas.

    El pekenburns slider no lo conozco.
    Saludos.

    ResponderEliminar
  158. Hola solo para decir q estan muy interesantes tus entradas!
    y tengo una duda, he querido agregar algunos menus, ya le he intentado 2 o 3 de los que propones ahi, inclusive puse el otro codigo q pones antes de desilñador de plantillas se lo cambie pero note q no era el mismo codigo, lo reemplaze por el q pones, y puse el codgio del Menu tal cual es los mismos pasos, ya le he cambiado se supone sale los enlaces q le pongo me salen pero solo puedo escojer la primera entrada q le pongo, ya la 2da y demas se desaparece el menu desplegable no puedo me podrias ayudar?? de antemano gracias y saludos este es mi blog si me puedes ayudar y verificar q si no salen bien va saludos

    ResponderEliminar
  159. Hola LYCAON "BH",

    ¿Estás usando Internet Explorer? Porque es el único navegador donde cualquier menú de subpestañas para esas plantillas donde se tiene ese problema. Si ingresas desde otro navegador como Firefox o Chrome o cualquier otro no deberá pasar eso.
    He experimentado en varias ocasiones para solucionar ese problema con Internet Explorer pero sigo sin tener buenos resultados :(

    ResponderEliminar
  160. Hola Potro, antes de nada agradecer el tiempo que nos dedicas a todos los que estamos liados con el diseño de nuestros blog.

    Tengo una pregunta con este menu. Lo he instalado en mi Blog y ha quedado muy bien, lo único es que cuando entro desde Chrome se queda un espacio muy feo entre la barra y las entradas, y si entro desde mozilla se queda ese feo espacio entre un menu superior y tambien entre las entradas. ¿Como puedo eliminar esos espacios? ¿es por que he hecho algo mal?

    ResponderEliminar
  161. Hola Loren,

    No creo que hayas hecho algo mal, es mas que nada esas plantillas que son medio extrañas cuando se trata de alterarlas.
    Aunque podrías reducir el espacio, el problema es que si lo reduces para que en Firefox no se vea el espacio de arriba, entonces en Chrome se subiría el menú y se sobrepondría al otro. Me parece que la mejor opción sería usar sólo un menú, y si ese genera espacios entonces sería más fácil eliminar el espacio pues ya no afectaría a otro elemento.

    ResponderEliminar
  162. Hola Potro
    Hace un tiempo consegui poner el menú con subpestañas y me funcionaba bien pero hoy no se me despliegan las subpestañas
    Hace dos días puse el código de google Analitycs y todo me funcionaba ¿A que puede deberse el que no me funcionen las subpestañas?
    Y podrías decirme como arreglar el color y los bordes de los botones?
    muchas gracias
    mi blog es casa-lola-beceite.blogspot.com

    ResponderEliminar
  163. Hola lola,

    He entrado a tu blog y veo las pestañas desplegándose perfectamente bien.
    El color de ellas así como cualquier personalización del menú se indica en color verde.

    ResponderEliminar
  164. Potro una pregunta... Como hago para ponerle unos bordes al menu... osea, de la parte izquierda y derecha... porque nose si te daras cuenta que en mi blog el menu no queda completamente en el ancho del Blog, entonces quedan las orillas blancas. Quisiera hacerle unos bordes, para complementar esas franjas blancas, y que queden de color negro, para que continue con el Fondo Principal del blog que es porsupuesto, Negro.

    ResponderEliminar
  165. De esta forma podría tener bordes a los lados:

    #menu {
    border-left: 5px solid #000;
    border-right: 5px solid #000;
    }

    ResponderEliminar
  166. Potro lo agregue, y las casillas del Menu se amontonaron una debajo de la otra, en vez de mantenerse en forma lineal, se hizo una debajo de la otra. Asi que, no funciono :/

    ResponderEliminar
  167. ¿No será que al ponerlo eliminaste sin querer una llave de cierre?
    ¿Probaste poner un valor más bajo en el ancho del borde?

    ResponderEliminar
  168. No Potro, lo puse correctamente, y puse un valor mas bajo. Tu me diste 5px, y yo le puse 2px, y tampoco funcionaba... Las casillas se quedaron lineales esta vez pero, seguia sin tener un borde. Osea , se seguia viendo esa franja blanca de los costados.

    ResponderEliminar
  169. De igual manera Potro, ahora poniendolo en 2px se hacen UNA ARRIBA DE LA OTRA. No funciona :/... ya lo intente

    ResponderEliminar
  170. Eso gris que se ve a los lados es parte de la imagen de fondo de todo el contenedor del blog, si buscas esta parte (aparece dos veces):

    .content-fauxcolumns .fauxcolumn-inner {

    Verás que dentro hay un background, si lo eliminas o si lo cambias por:
    background:#000;

    Entonces deberá quedar todo negro.

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

    ResponderEliminar
  172. EXACTAMENTE POTRO, acaba de funcionar el truco. Eres Genial Potro MUCHISIMAS GRACIAS !!!...

    ResponderEliminar
  173. Hola Potro, he reemplazado el sexy drop menu por este realizado a base de puro CSS para así poder alivianar el tiempo de carga; sin embargo, me encuentro con sendos espacios entre éste y el header y además en relación al slide orbit que instalé debajo.

    Cómo lo puedo solucionar ?

    Te dejo el link como siempre

    www.lucesysombras.cl

    Gracias nuevamente
    desde Chile
    Rodrigo

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

    ResponderEliminar
  175. Ya Potro no te apures, hurgueteando he dado con la solución; corrígeme si no me equivoco: sobre ]]></b:skin pude modificar las distancia de los #HTML...

    Un abrazo !

    Rodrigo
    www.lucesysombras.cl

    ResponderEliminar
  176. Exactamente así es Rodrigo, sabiendo la ID del elemento puedes modificar los márgenes y varios estilos ;)

    ResponderEliminar
  177. Hola,
    El menú se me resiste. Estoy con un nuevo blogger "lamotoyelsidecar.bogspot.com y el menu debajo e la cabecera no abre los submenus, pero si lo pongo en la barra lateral de los gadgets si que funciona.
    Lo he repasado decenas de veces, incluso he eliminado el blog y vul¡elta a empeza, pero no me funciona.
    ¿Tiene solución?
    Gracias

    ResponderEliminar
  178. Hola José Luis,

    Recuerda que para los que usan plantillas hechas con el Diseñador de Plantillas de Blogger primero deben seguir los pasos del enlace que se menciona en la entrada. Eso es básico para que los menús de subpestañas funcionen.

    Saludos.

    ResponderEliminar
  179. Hola Potro,

    Solucionado.
    Gracias por tu paciencia infinita.

    Saludos,

    ResponderEliminar
  180. Qué gusto que así sea José Luís, ¡saludos!

    ResponderEliminar
  181. hola potro acá ando nuevamente por hacerte una consulta ...
    tengo la duda de si el menú utiliza una fuente exclusiva o te permite utilizar la que prefieras de las plantillas blogger

    gracias

    ResponderEliminar
  182. hola potro como se pueden quitar los puntos que aparecen a la izquierda de las pestañas?

    gracias por todo

    ResponderEliminar
  183. hola potro como puedo eliminar las viñetas ... no encuentro la manera .. muchas gracias como siempre

    www.capitol.com.uy

    ResponderEliminar
  184. Hola gera barbieri,

    El menú no tiene una fuente predeterminada, pero puedes usar el tipo de letra que prefieras añadiendo debajo de:
    #menu ul a {

    Esto:
    font-family: Arial ;

    Esos puntos aparecen ahí porque tienes arriba de los estilos del menú un código suelto que no debería estar, por eso tampoco se ve el menú como debería verse. Elimina esta parte:

    position: absolute;
    display: block;
    top: 2em;
    left: 0;
    }

    La verás justo arriba de:
    #menu ul {

    ResponderEliminar
  185. Sin palabras potro como siempre
    un saludo grande desde uruguay

    ResponderEliminar
  186. hola potro acá nuevamente con una consulta sobre el menú.

    existe la posibilidad de redondear los bordes?
    y ya que estamos de que el color del fondo se extienda a todo el ancho de la página.

    ResponderEliminar
  187. Hola gera,

    Agrega esto:
    #menu {
    background: #f9f9f9; /* Color de fondo de las pestañas */
    padding: 5px;
    border: 1px solid #ccc; /* Borde de las pestañas */
    width:900px;
    height:30px;
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    border-radius: 18px;
    }

    Arriba de:
    #menu ul {

    Ahí establece el ancho que quieras que tenga.
    Luego busca el borde y color de las pestañas (que está más abajo) y elimínalo para que no se repitan.

    Saludos.

    ResponderEliminar
  188. excelente como siempre potro !
    solamente tengo un problema y es que me quedan los textos más abajo

    ResponderEliminar
  189. en www.capitol.com.uy
    pero no lo puse porque me sucedía eso

    ResponderEliminar
  190. Yo lo veo bien gera, no encuentro ningún problema en el menú, a menos que eso suceda cuando pones los bordes redondeados o algo más, si es así entonces es necesario que lo vea puesto para decirte cómo se puede corregir.

    ResponderEliminar
  191. Hola Potro! Ahora le toca a este menu.

    Ya lo instale y creo que salio bien, pero....siempre hay un pero..., las subpestañas se meten bajo los post y no se ven, solo la primera. Como estoy haciendo el blog con una plntilla del diseñador de blogger, supongo que eto no tienes solución, pero si hay algo que pueda hacer...

    Otra cosa, me gustaria poner la letra en negrilla, para que s e vea igual que el menu vertical (...ese que tanta guerra me ha dado y que ya no me atrevo ni a mirar...)

    Bueno, te vuelevo a colocar el link del blog y espero respuesta tuya.

    http://secretec-servicios-empresariales.blogspot.com/

    Como siempre, gracias de antemano!!!

    ResponderEliminar
  192. Supongo que usas Internet Explorer, pues sólo ahí los menús de subpestañas se van detrás de las entradas en esas plantillas.
    Ese es un problema básicamente de las plantillas del Diseñador, no fueron hechas para tener subpestañas, y aunque podemos hacer que funcionen, en Internet Explorer se da siempre ese problema.

    Para que la letra esté en negrita agrega después de #menu ul a { esto:
    font-weight:bold;

    Saludos.

    ResponderEliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

Nota: solo los miembros de este blog pueden publicar comentarios.

 
Ir Arriba Ir Abajo
I Ciudad Blogger