Hola! soy Cintia de Creaypersonalizatublog soy una adicta a blogger,diseño gráfico y todo lo relacionado con el mundo 2.0
COMO INSTALAR UN MENÚ DESPLEGABLE EN TU BLOG
PASO 1-Lo primero que vamos a hacer es ir a diseño→añadir gadget y lo haremos en el gadget vació que hay debajo de la cabecera o en su defecto lo creamos y lo arrastramos justo debajo del gadget cabecera.
PASO 2-Pinchamos en Html/Javascript e insertamos el código que encontramos justo debajo de la captura de pantalla.
<div id=’navmenu’>
<div id=’navmenuleft’>
<ul id=’nav’>
<li><a href=‘url‘>Pestaña1</a></li>
<li>
<li><a href=’url‘>Pestaña2</a></li>
<li>
<a href=’#’>Pestaña3</a>
<ul>
<li><a href=’url‘>Subcategoría 1</a></li>
<li><a href=’url‘>Subcategoría 2</a></li>
<li><a href=’url‘>Subcategoría 3</a></li>
<li><a href=’url‘>Subcategoría 4</a></li>
</ul>
</li>
<li>
<a href=’#’>Pestaña4</a>
<ul>
<li><a href=’url‘>Subcategoría 1</a></li>
<li><a href=’url‘>Subcategoría 2</a></li>
<li><a href=’url‘>Subcategoría 3</a></li>
<li><a href=’url‘>Subcategoría 4</a></li>
<li><a href=’url‘>Subcategoría 5</a></li>
</ul>
</li>
<li><a href=’url‘>Pestaña 5</a></li>
</li>
<li><a href=’url‘>Pestaña 6</a></li>
</ul>
</div>
</div>
<a href=’#’>Pestaña desplegable</a>
<ul>
<li><a href=’URL’>Subcategoría 1</a></li>
<li><a href=’URL’>Subcategoría 2</a></li>
<li><a href=’URL’>Subcategoría 3</a></li>
<li><a href=’URL’>Subcategoría 4</a></li>
</ul>
</li>
/* Menu desplegable
———————————————– */
.tabs-inner .section:first-child ul { margin-top: 0px;}
.tabs-inner .widget ul { background: #ffffff; text-align: center !important;}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: #000000; /*Color del texto de las pestañas al pasar el ratón por encima*/
background-color: #f2d4c4; /*Color del fondo de las pestañas al pasar el ratón por encima*/
text-decoration: none;
}
.tabs .widget li, .tabs .widget li{ display: inline; float: none;}
#NavMenu {
position: relative;
margin: 0 auto;
padding: 0;
border-top: 0px solid #64b6bb; /*Borde superior del menú, si no queremos borramos la línea*/
border-bottom: 0px solid #64b6bb; /*Borde inferior del menú, si no queremos borramos la línea*/
background: #64b6bb; /*Color de fondo del menú, si no queremos borramos la línea*/
}
#NavMenuleft {
width: 980px; /*Ancho del menú*/
float: none;
margin: 0 auto;
padding: 0;
}
#nav {
margin: 0 auto;
padding: 3px ; /*alto del fondo del menu*/
background:#64b6bb;/*color de fondo del menú completo*/
}
#nav ul {
float: none;
list-style: none;
margin: 0;
padding: 0;
overflow: visible;
}
.tabs-inner .widget li a {
display: inline-block;
padding: .6em 1em;
font: normal normal 18px ‘Georgia’, Trebuchet, Verdana, sans-serif; /* Tipo de letra */
color: #ffffff; /* Color de la letra */
text-transform: uppercase;/*poner texto en mayúsculas, sino lo quieres borra esta línea*/
border-left: 0px solid #b7d6ce; /* Borde izquierdo de la celda */
border-right: 0px solid #b7d6ce; /* Borde derecho de la celda */
}
#nav li a:hover, #nav li a:active {
color: #000000; /*Color del texto de las pestañas al pasar el ratón por encima*/
margin: 0;
padding: 10px 15px 10px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
font: normal normal 14px arial; /*Tamaño y tipografías de las subpestañas*/
background: #ffffff; /*Color del fondo de las subpestañas*/
border-top:2px solid #cccccc; /*borde superior de las suspestañas, sino lo quieres borra esta línea*/
width: 150px; /*Tamaño de éstas*/
color: #000000; /*Color del texto de las subpestañas*/
float: none;
margin: 0;
padding: 7px 10px;
}
#nav li li a:hover, #nav li li a:active {
background: #cccccc; /*Color del fondo de las subpestañas al pasar el ratón por encima*/
color: #000000; /*Color del texto de las subpestañas al pasar el ratón por encima*/
padding: 7px 10px;
}
#nav li {
float: none;
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
}
#nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; }
#nav li ul a { width: 140px; }
#nav li ul ul { margin: -32px 0 0 171px; }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; }
#nav li:hover, #nav li.sfhover {position: static;}
.tabs-outer{overflow: visible;}
.tabs-inner { padding: 0px; } .section { margin: 0px; }
►Solo queda modificar
los colores,
los tamaños y
fuentes: Recuerda que para poner la fuente que quieras debe aparecer en las opciones que ya vienen instaladas por defecto. Puedes consultar el aspecto y nombre si vas a Plantilla→personalizar→avanzado y miras en cualquier opción que te deje personalizar el texto.
Si véis que queda una raya blanca bastante molesta debéis modificar esta linea del código
width: 980px; /*Ancho del menú*/
Si queréis ver el resultado final podéis pinchar aquí Demo
Gracias por compartir toda esta información tan práctica. Eres muy amable.
Saludos!
Gracias a ti por leerla. Un beso
Hola,estoy creando un blog y quiero poner un menú con imágenes en cada etiqueta y que en algunas sea desplegable,no se si me explico bien,pero no se como hacerlo.
Si pudieras ayudarme o hacer un tutorial sobre eso
Un saludo y gracias.
Después de algunos problemillas y la ayuda de la mejor conseguí ponerlo la semana pasada. Gracias Ana! Me encantaría algun tutorial para crear nuestros propios diseños con programas gratuitos para hacer logos, ilustraciones sencillas, etc. Me chifla la sección!!
Algo de eso comente en un post de como tener el blog bonito. Con canvas.com pueden hacer alguna cosita chula..Me apunto tu idea de tutorial. Un beso.
Que bien!! Parece que me hayas leído el pensamiento porque hace un montón que quiero poner un menú desplegable pero no me ha salido bien.
Este finde lo pruebo y ya te diré si he tenido suerte!!
Encantada de que te sea el util el tutorial. Un beso.
Yo lo tengo puesto de hace tiempo, pero el diseño no me acaba de convencer porque además me daba errores según con que tipografía usaba. Así que probaré este!!
Por cierto me encantaría tutorial para poder imprimir el post directamente, para cuando hago recetas…
Un besazo a las dos!!
Tengo el tutorial del botón de imprimir en mi lista de futuros posts…un besito.
Me ha encantado!!! Ahora mismo no necesito menús desplegable, pero ¡quien sabe! A lo mejor dentro de poco tengo que echar mano de este tutorial tan bien explicado. Muchas gracias!!!
Por ahora no lo pongo que no me da la vida pero lo tendré en cuenta para cuando encuentre algo de relax. Gracias por el tuto! Besos.
Tu menu es unico…jeje.un beso.
Pues me va venir de perlas….mañana con mas calma intento haber que tal se me da……..
Gracias por este tutorial
Besines
holaa, necesito ayuda lo he instalado pero me aparece en la parte inferior que hago?'
La posicion drl menu dependera de donde has colicado el gadget html. Comprueba que lo tienes debajo de la cabecera. Un saludo.
¡Hola! Muchas gracias por el tutorial, hay otros por la red demasiado complicados. Lo único que no consigo es modificar es el color celeste y la grafía que se queda en las pestañas, y no se cómo hacerlo desde el código CSS. ¿Puedes explicar cómo hacerlo por favor? ¡Gracias!
Hola Tomas! para cambiar el celeste debes modificar estas lineas:
background: #b7d6ce; /*Color de fondo del menú, si no queremos borramos la línea*/ (Fondo del color de la barra)
background: #b7d6ce; /*Color del fondo de las subpestañas*/ (fondos de las subpestañas)
Para modificar la fuente debes modificar estas dos lineas:
font: normal normal 18px 'Georgia', Trebuchet, Verdana, sans-serif; /* Tipo de letra */
font: normal normal 14px Cambria; /*Tamaño y tipografías de las subpestañas*/
Para cambiar la fuente debes poner el nombre de la fuente entre los 'acentos'
Espero haberte solucionado la duda! 🙂 cualquier duda vuelve a dejarme comentario! ¡Gracias por leerme!
¡Sí, muchas gracias a ti!
Hola! He seguido todos los pasos pero me aparece el menú totalmente desplegado, con todas las pestañas y subpestañas a la vista. ¿sabes qué puedo hacer para arreglarlo? Gracias!!
Hola Javier, he vuelto a probar el tutorial en mi blog de pruebas y todo funciona bien. Quizás se te ha escapado algún carácter, letra o simbolo. Te aconsejo volverlo a intentar y después me cuentas. Un saludo.
A mi me pasa igual 🙁 Queda desplegado y todo abierto. Que pena porque me parecía un tutorial de lo más sencillo y útil.
He estado mirando tu blog donde tienes un menu y quizas no te sale bien porque tienes demasiadas categorias y no te cabe todo en una linea. Si lo haces todo igualito que tuto te sale bien sino compruebalo en el enlace demo del post. Yo tambien lo tengo en mi blog de pruebas y me sale perfecto. Un saludo,
Tengo el mismo tipo de error que javier das, si ya lo solucionaron pasen dato por favor… gracias
Yo tengo el mismo problema también! 🙁
Me pasaba lo mismo luego de cargar el html, pero luego de agregar el CSS se me arregló 🙂
A mi me pasa lo mismo. Has conseguido solucionarlo?
Hola… Me gustaría que el menú ocupara toda la pantalla… Que pongo? Gracias
Hola Ike,creo que te refieres a que sea mas ancho? y te ocupe todo el ancho de la pantalla? Para ello debes modificar esta linea del código
width: 980px; /*Ancho del menú*/
Hola, me pasa lo mismo que a Javier, que se ve todo desplegado, lo he intentado hacer un par de veces pero me sale igual, y he copiado todos los caracteres como pones. Hay que modificar alguna linea para que se vea como en tu demo. No consigo que sea deplegable. Gracias
A mi me ocurrió también, curiosamente después de corta/pegar el Css, y dar enter en el panel de escritura (saltando a la línea siguiente) volvió todo a su ser…
Pues no tengo ni idea..pero poniendo tal como esta a mi me sale. Quizas es problema de tu plantilla. Es de blogger o la has descargado de otro sitio? Un saludo.
Hola! Muchísimas gracias, pero tengo una duda. ¿Qué puedo hacer para poner dos entradas en un submenú? No sé si me explico bien. Es que quiero que me salgan todas las entradas relacionadas con moda cuando uno pincha en el submenú "Moda" , pero solo me deja poner una URL.
Ayuda plisss!
Hola, puedes agrupar todas las entradas que quieras bajo una misma etiqueta "moda" y poner la url de esa etiqueta en ese submenu. Creo que es a eso lo que te referias, no? Un saludo.
Buenas tardes
Mcuhisimas gracias. Queda genial . El único problema que tengo es que cuando paso el ratón por encima de las pestañas el cuerpo de las entradas se desplaza un poquito hacia abajo en vez de quedarse todo el blog inmóvil. Tendré que modificar algún parámetro? Te paso lo que he puesto:
/* Menu desplegable
———————————————– */
.tabs-inner .section:first-child ul { margin-top: 0px;}
.tabs-inner .widget ul { background: #ffe599; text-align:left !important;}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: b7d6ce; /*Color del texto de las pestañas al pasar el ratón por encima*/
background-color: #ffe599; /*Color del fondo de las pestañas al pasar el ratón por encima*/
text-decoration: none;
}
.tabs .widget li, .tabs .widget li{ display: inline; float: none;}
#NavMenu {
position: relative;
margin: 0 auto;
padding: 0;
}
#NavMenuleft {
width: 1200px; /*Ancho del menú*/
float: none;
margin: 0 auto;
padding: 0;
}
#nav {margin: 0 auto; padding: 0; background:transparent;}
#nav ul {
float: none;
list-style: none;
margin: 0;
padding: 0;
overflow: visible;
}
.tabs-inner .widget li a {
display: inline-block;
padding: .1em 1em;
font: normal normal 20px Rock Salt; /* Tipo de letra */
color: #ffe599; /* Color de la letra */
border-left: 0px solid #b7d6ce; /* Borde izquierdo de la celda */
border-right: 0px solid #b7d6ce; /* Borde derecho de la celda */
}
#nav li a:hover, #nav li a:active {
color: #38761d; /*Color del texto de las pestañas al pasar el ratón por encima*/
margin: 0;
padding: 10px 15px 10px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
font: normal normal 14px Rock Salt; /*Tamaño y tipografías de las subpestañas*/
background: #38761d; /*Color del fondo de las subpestañas*/
width: 150px; /*Tamaño de éstas*/
color: #000000; /*Color del texto de las subpestañas*/
float: none;
margin: 0;
padding: 7px 10px;
}
#nav li li a:hover, #nav li li a:active {
background: #38761d; /*Color del fondo de las subpestañas al pasar el ratón por encima*/
color: #ffe599; /*Color del texto de las subpestañas al pasar el ratón por encima*/
padding: 7px 10px;
}
#nav li {
float: none;
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
}
#nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 150px; margin: 0; padding: 0; }
#nav li ul a { width: 140px; }
#nav li ul ul { margin: -32px 0 0 171px; }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; }
#nav li:hover, #nav li.sfhover {position: static;}
.tabs-outer{overflow: visible;}
.tabs-inner { padding: 0px; } .section { margin: 0px; }
Hola, no sé si aun necesites la solución pero la dejo por si a alguien más le pasa. Después de muchas pruebas, se quedó fijo cuando le eliminé la línea "padding: 10px 15px 10px;"
Saludos!
Hola te hago una pregunta… yo ya tengo un código CSS, pero no me deja poner otro y no se que hacer.. como hago para separar dos códigos diferentes?
Hola, si ya tienes un código css para poner otro tendrás que ir directamente a editar plantilla buscar el código dentro de … y sustituirlo por el nuevo. Un saludo.
Por favor ¿cómo puedo poner la url? es que me bajado una plantilla pero no se como poner la url
La url la tienes que copiar del navegador estando en el post correspondiente a cada categoría. Aunque no se si todas las plantillas que se descargan admiten personalizarlas de la misma forma. Yo siempre he trabajo a partir de la plantillas que te da blogger. Un saludo.
Tengo un problema ya lo he puesto todo como has mencionado pero cuando paso al menú despegable se quita y no me deja darle clic jaja :/ Ayuda.
Hola, he visto tu blog y el menu lo veo perfecto. Aunque si le das en alguna pagina del submenu te dice que esa pagina no existe. Un saludo.
Hola, he visto tu blog y el menu lo veo perfecto. Aunque si le das en alguna pagina del submenu te dice que esa pagina no existe. Un saludo.
Genial! ya lo instale, me falta es modificarlo y listo. Mira esta es mi página mibelleza10.blogspot.com está aún en formación 😉 Gracias!
Ya me pase! Enhorabuena por tu blog y suerte en tu diseño. Un saludo.
Hola, quiero saber como modifico el código ccs, es decir como cambio el color, poner barras divisorias, tipo de letra color etc..
otra inquietud es como hago para poner una imagen en mi blog y que al darle clic me direccione a otra pagina o parte de mi blog
muchas gracias y me ha servido las instrucciones para colocar menú desplegable
Hola..tienes que cambiar las lineas donde pone color, border,background,..depende lo que quieras modificar. Al lado de cada linea te pone lo que modifica. Si no estas acostumbrado lo mas facil es ir cambiando y viendo la vista previa para ver si eso es lo que quieres.
Sobre lo de la imagen puedes poner un gadget de image en el sidebar y hay te da la opciom de enlazarlo con la url que quieras. Un saludo.
Hola tengo un problema no puedo cambiarle el color a las pestaños principales eh cambiado todos los backgound y nada sigue en un color medio naranja. Que puede ser
Hola..me pase y yo veo bien los colores verde y blanco. Supongo que lo solucionastes. Un saludo.
Muchas gracias 😀
Hola!!
Gracias por el post! Tengo una duda que no consigo resolver con ningún blog. A mi me gustaría añadir más pestañas dentro de las subcategorías. Por ejemplo en el caso de un blog de viajes:
– Pestaña 1: América
– Subcategoría 1: Estados Unidos
Y dentro de la subcategoría 1 me gustaría añadir: Nueva York, San Francisco, etc.
Sabrías ayudarme?
Muchas gracias!
Muchas gracias! Mañana mismo me voy a poner a ello, así como otras cosas que me enseñaste del blog que me parecen super interesantes, estoy aprendiendo un montón de blogger gracias a tu Blog. Enhorabuena! Haces un gran trabajo
Hola Ana María. En primer lugar, me gustaría agradecerte los tutoriales que compartes. He estado echándoles un vistazo y me parecen súper útiles, muy didácticos y bien estructurados. Tanto es así que me he animado a aplicar algunos en mi blog, como este.
Respecto a la barra, tengo un par de dudas:
– En mi caso, al instalarla y personalizarla todas las pestañas se han quedado apiladas (sin espacio entre ellas) y pegadas en el margen izquierdo. De momento le he hecho "un apaño" escribiendo líneas de código entre las pestañas para generar espacio entre ellas (o sea, li…/li sin nada en medio). El problema es que es es un apaño cutre y, claro, las pestañas no se centran autoajustándose, por lo que si visito el blog desde otro dispositivo aparecen descolocadas, así que, ¿Hay alguna manera de centrarlas en condiciones y dejando más espacio entre ellas?
– La segunda duda tiene que ver con las subpestañas. En ellas el texto también aparece justificado a la izquierda, y el ancho de la pestaña depende del largo del texto, por lo que son todas desiguales. ¿Es posible poner el texto centrado y conseguir que todas sean igual de anchas? He probado cambiando los valores de margin y padding, pero sin resultado.
Ea, no te entretengo más. Un besete y muchísimas gracias por tu tiempo y atención.
Hola, parece que blogger esta un poco loco. Porque he estado probando este tutorial en mis blogs de pruebas y en cada uno sale diferente o me da error al guardar la plantilla. Habrá que esperar un poco para volver a probar. En uno de os blogs que me sale bien la pestañas se ven bien y el texto esa centrado. Un besito.
Canela y Naranja he mirado el código de tu menu y tienes una líneas mal, referente al padding. Por eso te salen la subpestañas pegadas. Prueba a hacerlo de nuevo. Y me cuentas. Un beso.
Hola! Gracias por el tutorial! El único problemilla que tengo es que al personalizar el menú, luego de dar a "aplicar" y voy a vista previa los colores de el menú no cambiaron. Gracias por tu respuesta.
Ya solucioné el poblema que tenía, perdón por las molestias.
Hola!! a ver si me puedes ayudar, te lo agradeceria. Mi blog tiene varias paginas utilizadas como un menu de forma horizontal. Ahora he hecho el menu desplegable con sus pestañas, ya que me parece que queda mejor organizado y he puesto en el menu de paginas que no se vean ya que no quiero que parezcan en el blog ya que tengo el menu desplegable pero si me gustaria que cada pestaña se redireccione a cada una de ellas. Como hago? He puesto en la pestaña donde pone url, la direccion de cada pagina, y funciona perfectamente pero cuando cierro blogger no funciona nada del menu desplegable. Espero que me hayas podido entender. Muchas gracias
Hola, he entrado en tu blog y el menú va perfecto. Por cierto, hacer unas cosas muy chulas para cumples. Un saludo.
Gracias me has ayudado mucho. Una pregunta, cómo cambiar las palabras a negrita o curva?
Hola, tienes que buscar las líneas de font (fuente de la letra) y sustituir normal por bold (negrita) o italic (cursiva). Un saludo.
Muchisimas gracias por compartir me ha funcionado perfecto =)
queria preguntar si habia forma de que se pudiera ver el menú en el móvil
Este tipo de menú no se vería en su totalidad en la versión móvil. Lo más recomendable, en mi opinión, es crear uno especial solo para estos dispositivos así se ajustara a su espacio reducido sin dejar de ser legible. Te aconsejo que te pases por mi página de cursos gratis donde tengo uno para personalizar tu plantilla móvil de blogger. Un saludo.
hola estoy que realizo un blogger y no puedo poner menu y en el menu poner los temas las descargas videos tutoriales ayudame te dejo mi whatsapp 997176646
Hola Milagros, lo siento pero la politica del blog y mi escaso tiempo, no me permite atender consultas a traves de whatsapp. Seria imposible atende a ese nivel todas las consultas que recibo. Creo que si sigues lo pasos del tutorial y sustituyes el texto que ya se marca para personalizar cada uno con sus enlaces, no tendras ningun problema. He visto tu blog y solo te falta cambiar los textos de pestañas y subcategorias por tus nombres especificos. Un saludo.
Hola Milagros, lo siento pero la politica del blog y mi escaso tiempo, no me permite atender consultas a traves de whatsapp. Seria imposible atende a ese nivel todas las consultas que recibo. Creo que si sigues lo pasos del tutorial y sustituyes el texto que ya se marca para personalizar cada uno con sus enlaces, no tendras ningun problema. He visto tu blog y solo te falta cambiar los textos de pestañas y subcategorias por tus nombres especificos. Un saludo.
Muchas gracias por compartir, lo he hecho y me ha salido a la primera 🙂
Hola! Muchas gracias por este post pero… tengo una duda.. no consigo como cambiarle el color de fondo a las pestañas solo veo al momento de pararse con la flecha… como hago para darle un color el cual se vea siempre que no este la flecha encima?? ayuda pliz :c
Me ha sido muy útil tu post. Me está costando pero poco a poco me voy metiendo en el mundillo de los blogs y la cosa ya va teniendo forma. Ahora estoy en blogger pero creo que voy a hacer lo mismo en wordpress para pasar los blogs en castellano. Así practico con los dos.
Hola gracias por el post. Me está siendo muy útil pero me encantaría que me echaras una mano porque no soy capaz de que quede como yo quiero. Queda un espacio a la izquierda y a la derecha del menu, de color negro que no se como quitar. También algun que otro fallo que no se muy bien como describirte, pero que tú sabras perfectamente a lo que me refiero en cuanto lo veas.
Gracias por tu ayuda.
Hola ana maria! tengo un problema, se me pone todo perfecto, pero luego a la hora de clicar, hay algunas pestañas que funcionan y otras que me dicen que no hay entradas con esa etiqueta, aunque sí haya…estoy desesperada, llevo todo el día intentando ver que pasa y no hay manera…. gracias x la ayuda!!
mi blog: mamaunicornio.com , ya veras cm no va 🙁
¿que puede estar pasando?
Hola Nuria, me he paso por tu blog y no he podido comprobar que fallaba en el menú. Supongo que lo habrás quitado porque no te iba….Un saludo.
perdoname por l del link! no lo sabia!!! SORRY SORRY!!
lo consegui Ana maria!!! me he quedado fascinada con tu blog, con tu historia, con tu andadura…. me he suscrito a tu blog, me encantaría encontrar la manera de vivir de lo que me gusta como tu! Tienes una fiel seguidora!
Ay Nuria…me emociona leer tus palabras. Si practicamente fue ayer cuando empece en esto y ahora estoy recogiendo todos los frutos. Trabajo, constancia e ilusion….querer es poder. Un beso.
Tengo una liada con con las pestañas… no me sale nada! Me puedes mirar en que fallo ¿? Llevo mirando mil veces y haciendolo mil veces mas y nada… soy una inutil! no me sale nada!
vamosdefarturaenfartura.blogspot.com.es
Hola Evina, No se si antes tenias otro tipo de menu de paginas de blogger. Prueba a quitarlo. Yo borraría el gadget y miraría de volverlo a instalar todos de nuevo el código y css. Mirando bien de poner el nuevo gadget donde dice en el post. Repasa muy bien los pasos y códigos ya que si te comes o saltas algún elemento no funcionará. Un saludo.
No se por qué pero los submenus se me quedan fuera, ¿que puede ser?
Ya lo consegui, muchisimas gracias por todo! A sido de muchisima ayuda, lo único que me gustaria cambiarlo de color, pero muchas gracias.
Hola, tengo una pregunta.
Después de colocar el menú como hago para "archivar" cada entrada en cada pestaña? Es decir, por ejemplo:
Imaginemos que tengo un menú asi: INICIO-JUEGOS>>PC, >>PSP-SOBRE MÍ (LOS QUE LLEVAN >> ES POR SUBMENÚ).
Y en SOBRE MÍ quiero poner una entrada que trate sobre mí, en PC quiero poner otra entrada sobre otra cosa, en PSP quiero escribir otra entrada sobre otro tema… Y así sucesivamente.
Como puedo hacerlo?
Muchas gracias a todos
Si pones tus post organizados por con etiquetas y pones la url de la etiqueta en cada pestaña o subpestaña de menu, se veran todos los post que lleven esa etiqueta cuando hagan clic en la pestaña correspondiente. Lo mismo ocurre si quieres poner una url de pagina o post. Un saludo.
Si pones tus post organizados por con etiquetas y pones la url de la etiqueta en cada pestaña o subpestaña de menu, se veran todos los post que lleven esa etiqueta cuando hagan clic en la pestaña correspondiente. Lo mismo ocurre si quieres poner una url de pagina o post. Un saludo.
Muchas gracias, Ana María
Ana, como puedo contactar contigo de otra forma?
Iria tienes un formulario de contacto en mi blog. Un saludo.
Hola, excelente tu información.Un favor, me gustaría que revisaras mi blog ya que al deslizar el mouse por el menu desplegable al pasar por la primera opción se oculta el menu.
Muchas gracias quedo atento
Mil gracias por la información, es la única entrada que realmente me ha ayudado.
Gracias mil, me ha servido de muchoooo.
yo creo que lo voy a intentar…. igual se oyen los gritos por media España
primero organizaré bien las etiquetas …. ya te contaré
saludos
Marta
Una pregunta Como puedo poner un submenu en un submenu?
Hola amiga a mi me pasaba que me salia todas las pestañas desplegadas , y lo unico que hice para solucionarlo en CSS donde se copia el codigo , escribir una palabra cualquiera y luego borrarla y ya darle a la pestaña naranja de arriba del todo y , funciona , un saludo maja
Hola ana,
Lo he probado y no se que le pasa, que se me quedan las subpestañas extendidas debajo de los menus… No se cómo arreglarlo,
https://girlaupairexperience.blogspot.com
gracias
Hola Sara,
lo mismo ya no te pasas por aquí, pero me pasa exactamente lo mismo que te pasaba a ti, se me queda el menú desplegado debajo de las pestañas principales. Me he pasado por tu blog (muy chulo por cierto) y veo que lo conseguiste arreglar, ¿me podrías decir como lo hiciste?
Te lo agradezco.
Un saludo,
Hola Ana,
el reto que yo tengo con este gadget es un poco más complicado.
En mi blog, tengo un menú horizontal con 7 páginas. El caso es que el contenido de una de ellas es una lista con información anual y la lista se me ha extendido mucho por lo que quiero hacer que esa página tenga subcategorías donde pueda dividir la información para cada año, una subcategoría por año.
Lo que me gustaría es tener sólamente una de mis 7 páginas con menú desplegable.
La otra incógnita es, cada subcategoría ¿ha de ser una nueva página de blogger? Y si es así, ¿tienen que estar visibles una vez hechas? Sólamente contendrían texto.
Espero que se entienda la idea.
Salu2
Puedes adaptar el menu segun tus necesidades. Puedes tener un menu con las pestañas desplegables que quieras. En mi ejemplo creo que hay dos o tres. Pues con borrar la parte de las subcategorias ( el codigo que va entre ul y /ul) ya lo tienes. Las subcategorias podran ser paginas o entradas. Pueden no estar visibles pero deben estar publicadas. Espero haber resulto tu duda. Un saludo.
He seguido todos los pasos y la página que contiene subcategorías, al poner el ratón sobre ella, se mueve y es imposible pinchar sobre ella.
Este es mi blog yla página en cuestión del menú horizontal es "MIS CITAS EN EL ANUARIO".
http://quintanillanatura.blogspot.com.es/
Mira bien tu código.Hay algún li que te sobra. De todas maneras este código esta hecho para funcionar con un menú en una sola línea. Fíjate en la parte del código que tiene subcategoria y el que no para hacerlo igual. Quizás por eso se te montan las categorias. Prueba a reducir la fuente del texto o bórralo todo y empieza de nuevo. Suerte y un saludo.
Muchas gracias Ana, solucionado.
Gracias por tu atención y paciencia jeje.
Salu2!
Hola Ana 🙂
Tengo una pregunta y creo no haber leido que otro lo comentara..
1.-Tengo las lineas entre cada pestaña que no se me quitaron al borrar la linea en CSS. Tienes una idea?
2.- Me gustaria usar una tipografia que instale y tengo en CSS tambien, pero no quiere aceptarla. Otra idea? 🙂
Te agradezco de antemano por tu ayuda 🙂
Un saludo grande y felicitaciones por tu maravilloso blog!
Hola Ana,
Logre quitar las lineas separadoras 😀 Ahora… mi pregunta es.. es posible poner entre cada pestaña esta rayita: | ?
Hola Ana
He colocado tu menu en mi blog pero al pasara el ratón por las pestañas se despliega el submenú pero desaparece al bajar el ratón, ¿sabes a que es debido?
http://bellotaviajera.blogspot.com.es/
Me he pasado por tu blog y yo lo veo perfecto. Supongo que lo habrás arreglado. Un saludo.
Hola! La verdad es que creo que es la primera vez que encuentro un tutorial sobre HTLM y CSS que he entendido y me ha funcionado, por lo que muy buen trabajo!
Un beso! <3
Es una Maestra en este tema, sencillo y fácil de aplicar los cambios a nuestros diseños. Sin esta ayuda no hubiese logrado colocar un menú desplegable en mi blog. Muchas Gracias usted es Excelente!!!
Me alegro que le haya sido de utilidad y muchas gracias por sus bellas palabras. Un saludo.
Que bien que haya gente como tú que enseña de manera tan fácil!! muchas gracias por el post!
tu post me ayudo muchiiiiiisimo, mil gracias!!!! pero sabes que me gustaria cambiar el color de fondo del menu, como puedo hacerlo?? ayudame
Solo tienes que buscar en el código de CSS la línea donde pone color de fondo del menú y sustituir por el color que quieras. Un saludo.
Muchas gracias por el tutorial!!!! había probado un montón y todos me daban algún error. Solo me resta solucionar un detalle, y es que se ha modificado el ancho de las entradas ya fuí a ajustes de ancho y está como lo tenía antes de hacer el menú pero no se ve igual. ¡Qué puedo hacer? Saludos
Yo ya hice todo como lo pusiste, pero no se me centra lo que pongo 🙁 no se me cambia tampoco la tipografía como hago?
Me ha venido genial! Pero sigo sin poder cambiar el tamaño de las letras y me queda pequeñísimo!
http://www.unlugarparaquedarse.com
Hola Ana!
no sé si aún estes activa en este blog o no pero de todas formas quiero agradecerte ^^
no sabes lo que sufrpi buscando tutorial tras tutorial y no obtener nada, te estaré infinitamente agradecida siempre!
hasta pude darle un diseño de acuerdo a mi blog ^^ ya sólo me queda el buscar como ponerle las letras en negrita, pero luego lo buscaré.
Mil gracias!
Hola, Ana,
No sé si ya te escribí hoy, hace unas horas. Bueno, te comento que los códigos de este blog no me funcionan. Los he copiado tal cual, sin modificar nada, y también he elegido la plantilla más sencilla de blogger. No funciona. ¿Se te ocurre algo?
(Los menús salen todos desplegados y apiñados en el centro de la cabecera.)
Hola Ivan, en el blog de prueba que sale en el post funciona y en otro que creo hace poco para volver a probarlo. De todas maneras, hace unas semanas la plataforma blogger se actualizo y algunos cosas se descolocaron. Tengo previsto volver a hacer la prueba del menú en otro blog pero tengo que encontrar un hueco. Un saludo
Entiendo, ok.
Por cierto, tengo otra pregunta, independientemente de esto. Verás, cuando se diseñan los códigos del menú, se necesita introducir las URLs del blog para cada pestaña. ¿Cómo averigua uno cuáles son esas URLs?
Imagina un menú desplegable con dos pestañas: Inicio y Temas, más las dos subcategorías: tema 1 y tema 2.
¿Cuáles serían las direcciones? La gente da por hecho estas cosas y uno se queda a cuadros.
Gracias, saludos.
Si vas a la categoría que quieres poner en el menú , solo tienes que copiar al url que aparece en la barra del navegador y ya tienes la dirección de los posts de esa categoría. Un saludo.
Hola, gracias por el post, muy bueno.
He intentado ejecutar todos tus pasos, pero ya con la primera parte, la vista previa de mi blog no es la adecuada, y aunque sigo hasta el final, eso no cambia. Es como si la plantilla que utilizo no dejara hacer ese menú desplegable, y los estilos y colores ya están fijado.
¿Podrías ayudarme por favor?. Mi blog es: http://www.laaventuradeldragon.blogspot.com
Como ves, la parte de páginas en negro, debajo del logo, es lo que quiero poner en desplegable:
1ª opción (el que intenté sin conseguir): Asia y despliega países, Oceanía y despliega países (2 niveles).
2ª opción (la que me gustaría): Países, despliega sólo Asia y Oceanía, y éstos, a su vez, despliegan sus correspondientes países (3 niveles).
Si te parece y me das tu correo, te puedo enviar la vista previa de cómo quedaba tras ejecutar los pasos, por si con ello te puedes hacer una mejor idea del problema.
Gracias. Un saludo
Efectivamente este tutorial funciona para plantilla de blogger. No suele hacerlo con otras externas ya que tienen unos códigos más enrevesados que pueden causar conflictos. Lo siento pero no respondo dudas personalizada por email. Me faltaría horas al día..Un saludo.
¡Hola!
Soy nueva en esto del HTML, estoy editando una de las plantillas de blogger y he seguido tu tutorial pero debe haber algo que hago mal pero no sé qué puede ser. No me gustaría molestarte pero te agradecería mucho que pudieras ayudarme.
Mi blog es http://tree-huggers-carol-n-sandra.blogspot.com.es/
Hola, como ya he comentado en otras respuestas, hay platillas fuera de blogger que no aceptan este tutorial por su configuración y código. Un saludo.
Hola!!
Voy a intentar hacer el menú desplegable como has puesto, a ver si sale bien… jejeje!!
Hay una cosa que no entiendo, cuando pones lo de cambiar la zona que aparece en rosa y en azul… no me sale nada en rosa o azul.
Que es lo que tengo que cambiar?
Gracias.
Hola Ana,
Soy yo de nuevo, he intentado hacerlo como dices y no me sale, me faltan pestañas.
Si me pudieses ayudar…
Gracias.
Un saludo.
Como el tutorial tiene un tiempecillo y los hizo una antigua colaboradora, aprovecharé para para probarlo de nuevo y darle un repaso. A veces pasa que por el formato de unas comillas al copiar y pegar el código no funciona.Un saludo
Hola, gracias por avisar por los colores. Desde que migré de blogger a wordpress todos los formatos de los post se desconfiguraron. Un saludo
Hola Ana,
Muchas gracias por modificar, voy a probar de nuevo a ver si ahora me deja.
un saludo.
Ana,
Aquí estoy de nuevo, desesperada porque ya no sé si es que he entrado en bucle y no veo salida o es que en realidad soy nula para esto… 😉
A ver, he hecho todo como has puesto en el post, con 6 pestañas (dos de ellas con subcategorias) y al poner las URL y darles nombres, guardo y solo me salen 3 pestañas y nada de subcategorias y cuando pincho en ellas, sale este texto «La página que estabas buscando en este blog no existe,».
He seguido la plantilla que has puesto al pie de la letra y nada, que no hay manera.
Mientras me contestas, voy a seguir indagando.
Gracias.
Un saludo.
Hola Patricia, he visto tu código y al copiar las urls de las pestañas has puesto dos clases de comillas. Deja solo unas. Muchas veces cuando se copiar y pega código con comillas éstas no funcionan bien. Muchas veces hay que borrar las comillas y ponerlas a mano. Un saludo.
Buenos días Ana,
Cambié las comillas como me dijiste y por fin salieron todas las pestañas (además configuré el tamaño de la letra, por eso no me salia el menú completo) pero me sigue saliendo desplegado. Lo tengo tal cual copiado del ejemplo y la CSS igual, y me sigue saliendo todo el menú desplegado. ¿Qué puede ser lo que está mal?
Otra duda, para escribir y que me salga el post en la pestaña que yo elija, ¿como debo hacerlo?
Muchas gracias por todo.
Un saludo y que tengas un bonito día.
Patricia tienes otro error de comillas dobles al principio del código (donde pone nav ). Pon las comillas simples y se arreglará. Para que los posts salgan en cada pestaña solo tienes que añadir la etiqueta que le corresponde a cada uno cuando lo escribes. Un saludo.
Ana!!!!
Ahora si que si!!! Solucionado!! 🙂
Muchísimas gracias por tu paciencia y ayuda!!
El post, genial, sobretodo para principiantes como yo!!
Un saludo.
Hola Ana,
Vuelvo a estar por aquí… 🙁
Bueno por fin creé el menú con las pestañas y subpestañas, pero cuando paso el ratón por las pestañas que tienen subpestañas (valga la redundancia) y quiero pinchar en una de las «sub» desaparecen y no me deja pinchar en ellas. ¿Por qué ocurre eso?
Gracias de nuevo.
Un saludo.
Hola Ana:
Te felicito por tu blog. He seguido los pasos que has mencionado para crear un menú. Todo perfecto salvo que los submenús que he aplicado a una de las opciones del menú me aparecen visibles en todo momento, y no encuentro modo de que sólo aparezcan visibles cuando paso el ratón por el menú correspondiente..
Gracias
Hola Jose Luis y gracias por tu palabras. He paso por tu blog y no el menú desplegable así que no te puede decir cual es el problema. Normalmente al copiar el código si nos olvidamos y o perdemos algún pequeño carácter ya no funciona. También puede influir como comento en el post que tu plantilla no es de blogger sino que la descargarte en una web externa. Un saludo.
Hola de nuevo Ana:
Muchísimas gracias por preocuparte. Eliminé el menú desplegable que hice porque no me salió bien, y dejé lo que has visto que es simplemente una relación de páginas.
Seguí los pasos y creo haber encontrado el problema:
Yo lo que pretendo es un menú con cuatro-cinco pestañas: home, información de un libro que recientemente me han publicado, página de contacto, quizá una cuarta con algo como «Acerca de mí» y una pestaña que es la que quiero que sea el desplegable: «Contenidos».
Cuando se despliegue quiero que aparezcan dos submenús: «Leyendas» y «Extravagancias».
Hasta aquí todo bien. Sólo que estas dos últimas son páginas en las que he ordenado todos los enlaces que se refieren bien a un tema, bien a otro. Pero son páginas, no etiquetas ni nada parecido, en las que sólo figura el encabezado de la entrada correspondiente con el enlace si clickeas sobre dicho nombre.
Creo que ahí estaría el problema: que los submenús son páginas con una relación de entradas, y no una relación de entradas bajo una etiqueta.
Lo que no acabo de entender es lo que me dices de que he descargado la plantilla de una web externa… Todo el proceso lo he hecho desde gmail.
Saludos y felices fiestas.
José Luis
Eso no tiene nada que ver mientras pongas los enlaces correctos puedes añadir tanto páginas como enlaces a etiquetas. Sobre la plantilla parecía que no lo habías elegido de las que trae por defecto blogger pero puede que me equivoque. A veces cuando descargamos plantillas de otras webs pueden venir con error o incompatibilidades con otros elementos que queramos incluir. Un saludo
Hola. Yo lo solucioné modificando los parámetros de ancho de letra y ancho del menú. Si le metes más grosor al menú ya se superpone un milímetro y no desaparecen.
Hola Ana Maria!!! muy bueno tu Blog!
Soy nueva en esto de Blogger. Use tu tutorial para hecer el menu desplegable pero me sale solo hasta la tercera pestaña, y ninguna de las pestañas se desplega….
Agradeceria mucho si puedes chequear mi Blog!
Hola Ana María,
tengo un problema muy tonto que seguro la solución está delante de mi y no lo veo. Al inicio de la creación del «menu» pides cambiar lo que va en rosa con el nombre real… y en azul el «url». Qué url copio? porque ya he probado a copiar uno de una entrada y nada. Cómo detecta esa sección todas las entradas que van ahí?
P.D. las entradas ya están etiquetadas por secciones.
Espero haberme explicado. Muchas gracias!!
Tienes que poner la url de la etiqueta correspondiente. La puedes ver si pinchas en alguna parte de tu blog donde muestres las etiquetas de tus posts. Un saludo.
Lo he intentado un millón de veces y no me funciona, marca que la página no existe 🙁 podrías ayudarme?
Mi blog es: A Reader in the 221B
Hola, ¿cuál es la página que no existe?. Los códigos son los correctos. A veces dependiendo de cómo los copies y tu plantillas, pude que no funcionen. Un saludo.
Muchas gracias Ana por tu post l0 veo fácil de hacer pero tengo un problema. Resulta que lo he intentado colocar en varias ocasiones y me queda centrado y con las pestañas de forma vertical y no se muy bien pq me pasa. Necesito colocarlo de tal manera que las pestañas queden horizontales y el desplegable baje de forma vertical. Me puedes ayudar porfavor? Gracias Ana
Buenas noches.
Llevo ya un rato intentándolo y por más que lo hago se queda igual. Está el menú como desplegado y no soy capaz de juntarlo todo. ¿Podrías ayudarme, por favor? Te dejo la dirección de mi blog, el problemilla se encuentra justo bajo la cabecera. http://www.blogladooscuro.com/
Un saludo y mil gracias por estos tutoriales.
EL MEJOR TUTORIAL QUE HE ENCONTRADO!! REALMENTE NECESITABA UN MENU DESPLEGABLE EN MI PAGINA WEB POR LA GRAN CANTIDAD DE PAGINAS CON LAS QUE TRABAJO Y TU LO HAZ SOLUCIONADO. CASI SIENTO QUE TE AMO (JAJA OK NO) PERO GRACIAS POR ESTO !!! ;D
Me has puesto colorada…jeje. Un saludo
Hola! tengo un problema en mi blog/pagina web al hacer click en un menu todo perfecto pero luego cuando quiero moverme del menu como que le agrega algo a la url como que la duplica entonces obviamente sale que la pagina no existe, como se puede arreglar eso?
Gracias
Hola Fernando, eso suele pasar porque al copiar el código se copia también «código basura». Prueba a pegarlo sin formato o primero en un editor de texto plano tipo bloc de notas y después a la web. Un saludo
Siento Ana Mª darte la lata. Sé escribir pero no sé interpretar… Te explicas muy bien… pero… Me esplico: me estoy volviendo loco con lo del URL!!! no sé a qué se refiere, gracias. Es esto, pero qué quito? qué pongo? En este caso concreto la categoría sería de «Cuentos de África»
https://venerablesarboles.blogspot.com.co/2017/12/el-arbol-de-la-palabra-de-kioko.html
Tejos
Esta es la ulr que le puse y no funciona… Ya me dirás qué le falta, gracias
Lo primero que veo que le falta es el comienzo. https://www.tudonimio.com….
Hola, gracias por tu atención, creo que ya he resuelto el lío, gracias
Buenas. Interesante tutorial. Pero tengo una pregunta.
¿Si yo quisiera podría colocar una URL en el menú base?
Me explico, allí donde está el ‘#’ colocar una URL igual quye en los submenús en caso de que le den click ¿O eso afectará al resto del menú y no se desplegará?
Todos los # se pueden sustituir por la url donde quieras re dirigir a la persona que haga click en ese elementos del menú. Un saludo