Menú en las nuevas plantillas de diseño : El Escaparate de Rosa

Estás en: Inicio » Tutoriales » Menú en las nuevas plantillas de diseño

Menú en las nuevas plantillas de diseño

Desde que Blogger introdujo en nuestro panel la opción de utilizar las nuevas plantillas de diseño, recibo constantes consultas solicitando la forma de incluir un menú horizontal en las mismas.

A menudo lo que solicitáis es el poder incluir uno de los menús que yo explico en mi blog para las plantillas anteriores, esto me ha hecho darme cuenta de que muchos de vosotros no sabéis que todas las plantillas del nuevo diseñador incluyen la posibilidad de usar su propio menú horizontal.

En realidad las nuevas plantillas incluyen todo el código necesario para utilizar un menú, incluido el CSS que hará que el menú se adapte perfectamente al diseño del blog.

Algunos ejemplos de menús en distintas plantillas de Diseño

Hay dos maneras de incluir el menú horizontal en las nuevas plantillas, utilizando las nuevas Páginas Independientes de Blogger o usando la Lista de enlaces.

Incluir el menú horizontal utilizando la Lista de Enlaces.

[1] Vamos a Diseño en nuestro panel y vemos que debajo de la cabecera hay una opción para incluir un gadget:

[2] Pinchamos para añadir un nuevo gadget y escogemos "Lista de enlaces".

[3] Configuramos el gadget tal como veis en la imagen, dejando vacío el título y el número de enlaces a mostrar y añadiendo los enlaces que se mostrarán en el menú. Podríamos añadir un enlace con la url del blog y el texto "Inicio" por ejemplo y en los demás podremos enlazar una entrada, otro blog o lo que queramos.

[4] Guardamos los cambios al gadget y ya podremos ver como ha quedado el menú. Para añadir más enlaces, lo haríamos editando el gadget que acabamos de configurar y que se mostrará en Diseño debajo del header.

Incluir el menú horizontal utilizando las Páginas estáticas.

[1] Desde Diseño - Editar páginas, añadimos las páginas nuevas que vamos a necesitar que se mostrarán en el menú horizontal.

[2] Una vez editada la página estática, pinchamos en "Publicar página" y se mostrará la pregunta "¿Cómo te gustaría que apareciese el gadget Páginas?", tenemos que marcar entonces la opción "pestañas del blog":

[3] Añadimos tantas páginas como pestañas tendrá nuestro menú y ya será visible en el blog el menú horizontal que mostrará además un diseño acorde con nuestra plantilla.
En Diseño podremos ya ver el gadget "Paginas" debajo del header y desde allí podemos editarlo si lo necesitamos.

Entradas Relacionadas:

42 comentarios:

Vku: Muy buen dato Rosa. kiss; 20/9/10
eduiracheta: hola rosa, me he fijado que cuando entro en tu blog, en la pestaña de mi internet explorer aparece un pequeño icono, como se hace¿?

gracias :)

http://theedpictures.blogspot.com/; 20/9/10
núria laura: hola rosa, buen truco no tenía ni idea de que se pudiera hacer, de todas formas me gusta más como queda personalizando páginas estáticas porque quedan debajo de la cabecera y se pueden personalizar los colores, con el truco de los enlaces queda muy separado .... de todas formas un buen truco, como todos los tuyos y super bien explicados.
saludos; 20/9/10
Anónimo: The Ed Pictures Supongo hablas del favicon:
http://elescaparatederosa.blogspot.com/2007/04/favicon-para-el-blog.html; 20/9/10
ANRAFERA: Gracias por la información. Saludos y buena semana.; 20/9/10
mis webs: hola Rosa, si ti mi blog seria una patata, ahora es solo patatilla, mil gracias.
Como se puede cambiar el diseño del menu horizontal?
Un saludo

http://elrincondelur.blogspot.com/; 20/9/10
Anónimo: Lourdes En el CSS de la plantilla, desde donde ves /* Tabs
---------------------------- */ hasta donde dice /* Headings
------------------------------------ */ es el código del menú y donde se hacen los cambios para su diseño.; 21/9/10
Anónimo: Rosa ayudamee porfavor:(( :(( hoy entre a mi blog y me aparecio :No ha sido posible encontrar el blog que buscas. Accede en caso de que seas el propietario" entre a mi cuenta y todo y no me aparece en el escritorio y no se que hacer :S ayer funcionaba bien AYUDAME :D; 22/9/10
Jorge Ángel Aussel: Hola Rosa.

Tengo un problema con una plantilla nueva, no precisamente con el menú, sino con el footer. Resulta que a partir de los créditos, hacia abajo, queda un espacio gigantesco llenado por nada. Este problema sucede al ingresar a Ángel Poético desde el explorer. No hallo dónde está el problema ¿vos me podrias ayudar?. Gracias, Rosa.; 22/9/10
Anónimo: Jorge Aussel Si no estoy errada, ese espacio lo está dejando el script que muestra la barra de Wibiya... para que esto no suceda, deberías colocarlo antes de </head>
Prueba lo que te digo, a ver si pudiera ser eso...; 22/9/10
Anónimo: Rockstar! ¿Es un blog compartido con más administradores?... si es así, puede ser te hayan eliminado de la lista, es decir, te hayan robado el blog si es que era tuyo en principio...
No puedo hacer nada, sea como sea, ve al Grupo de Ayuda de Blogger y expón allí tu caso:
http://www.google.es/support/forum/p/blogger/label?lid=7325950ed6049880&hl=es; 22/9/10
Jorge Ángel Aussel: @Rosa

En realidad no. Me sucede lo mismo en dos blogs que utilizan la misma plantilla, y en uno de ellos no utilizo la barra. Es extraño, porque no puedo hallar el modo de suprimir ese espacio. De todos modos hice el cambio que me sugeriste, pero no surtió el efecto deseado.; 22/9/10
Jorge Ángel Aussel: Rosa, disculpame que te vuelva a escribir. Estoy casi seguro de que el problema está en la parte del CSS, pero no hallo dónde. Porque ambas plantillas utilizan el mismo CSS, pero en una no fue modificada la parte del HTML. Es la plantilla Awesome Inc. de Tina Chen.

Resulta que creé un blog de pruebas con esa plantilla, subí una entrada, puse la dirección en el explorer, y no se veia con ese horrible espacio.; 22/9/10
Anónimo: Jorge Aussel Ya no está el espacio... supongo solucionaste el caso ¿no? :D; 23/9/10
Unknown: ¡Hola Rosa! ¿Cómo haces para que cuando contesta a alguien su nombre aparezca en rojo? Me encanta el diseño de tu blog.:); 23/9/10
Jorge Ángel Aussel: Hola Rosa, me pasé horas volviendo a editar la plantilla para mantener el diseño. El problema, increíblemente, estaba en unos códigos que había borrado, los cuales controlan la fecha. Hasta descubrirlo estuve un buen rato, pero el espacio ha desaparecido.

Ya está todo solucionado, Rosa. Muchísimas gracias por prestar atención a mi problema una vez más.

Saludos!; 23/9/10
eduiracheta: Rosa gracias por lo del favicon;) me estás sacando de muchos problemas, sin tu ayuda TED - http://theedpictures.blogspot.com/ no sería lo mismo
gracias; 24/9/10
Daniel Barrera: Rosa me parece genial tu blog, yo estoy iniciandome en el mundo de bloger y pues me surgen muchisimas dudas, por ejemplo como puedo generar los links para seguimiento en facebook, gracias!!; 24/9/10
Anónimo: Daniel Barrera Como cualquier otro enlace, solo que apuntará a tu perfil de Facebook...; 24/9/10
Anónimo: Jorge Aussel Eso pensaba hacer yo... fui a copiar tu código fuente para compararlo con la plantilla sin modificar y ya vi que el espacio no estaba... ¡Buen trabajo!; 24/9/10
Anónimo: pati En realidad es una tontería con un poquito de CSS... eso si, no es automático... en breve lo explicaré en una entrada, pues son varios los que me han preguntado al respecto ;); 25/9/10
Alberto: Hola Rosa
Ayer intenté colocar un comentario, pero hoy no lo veo, por lo que lo coloco de nuevo.
No puedo ver mi blog, http://www.reproduccionsocial.edusanluis.com.ar/ con el Explorer, pero si con Firefox ¿Que puedo hacer?
Gracias por tu atención; 25/9/10
Elite Voley: Hola!
Llevo una semana intentando poner el menu horizontal, eso sé hacerlo, el problema viene cuando intento hacerlo deslizante, no hay manera. Espero puedas ayudarme, gracias de antemano.
Saludos.; 28/9/10
Anónimo: Fabiana Reyes Moggio Para las nuevas siento no poder ayudarte... si, se que pasa eso, en esos diseños los menús se ocultan detrás del cuerpo del blog... aún no me he metido a tratar de entender esas plantillas que, por cierto, son de diseño totalmente distinto y problemático he de decir....; 29/9/10
Admin: hola rosi me ayduas con miw eb www.oficial-web.blogspot.com
el problema es este que quiero añadir dos columnas a la izquierda y no puedo me ayudarias eh buscado y no encuntro la forma; 5/10/10
Anónimo: TRANSFORMERS No puedo ayudarte, tu plantilla no sigue los standares de Blogger.; 6/10/10
Mandalas, Espacio Abierto: Hola Rosa

Mi problema es el siguiente. Ya tengo el menu horizontal, el de las páginas estáticas, aunque ahora sólo aparece Página Principal porque he quitado el resto ya que me he vuelto loca buscando en qué parte debo colocar la url de las etiquetas que quiero que aparezcan como pestañas en el menu. Expandiendo artilugios no he encontrado nada que ponga menu.

Tengo una plantilla de blogger, se llama Fantástico S.A..

Gracias por tu atención.; 6/10/10
Anónimo: Mandalas Quizá esto te sirva, no se...

http://elescaparatederosa.blogspot.com/2010/07/anadir-otros-enlaces-en-el-gadet-de.html; 6/10/10
Mandalas, Espacio Abierto: Hola de nuevo Rosa

Muchas gracias por tu ayuda. Ya lo he hecho y ha salido perfecto. :D.

Un saludo.; 6/10/10
Administradora: Hola rosa muchas gracias por lo del menu, me estaba volviendo loca con estas nuevas plantillas; una pregunta si quiero cambiar el aspecto del menu por ejemplo el color, la letra y la forma de los cuadritos como lo modifico. Gracias; 15/10/10
Anónimo: Administradora Hay algunas cosas que pueden modificarse en el CSS del menú, que empieza donde dice:
/* Tabs
---------------*/
Pero muy pocas cosas... ese es el problema de estas plantillas, que funcionan mediante variables, así que en el CSS poquitas cosas pueden modificarse... para eso están hechas precisamente, para quien no sabe o no va a modificar nada.; 15/10/10
Lola: Hay alguna posibilidad de poner el menú encima de la cabecera en vez de debajo??

Graciasss; 11/11/10
Anónimo: Globetrotter Pues la verdad es que he hecho la prueba y no, no se puede, es decir, se puede subir ahí pero pierde el diseño del menú, o sea, lo mismo que no poderse :S; 11/11/10
Lola: Gracias de todas maneras!!!; 11/11/10
Johan: Hola Rosa, muchas gracias por las soluciones que aportas. Verás, resulta que he puesto un menú horizontal en la plantilla nueva de blogger con el gadget de enlaces. He enlazado todo lo que yo quería... excepto contacto. Resulta que no se como enlazar a mi E-mail. Será una tontería pero me estoy volviendo loco. Gracias de nuevo, a ver si puedes echarme un cable.; 16/11/10
Johan: Perdona Rosa, mi blog es cuarentaentrece.blogspot.com
Saludos; 16/11/10
Anónimo: Johan Puedes hacerlo como yo, colocando un formulario en una entrada y enlazándolo ahí o, como creo que preguntas:

http://elescaparatederosa.blogspot.com/2008/02/enlace-correo-electrnico.html; 16/11/10
Johan: Perdona Rosa, pero he puesto la línea de bajo, sustituyendo lo obvio y sigo sin enlazar. La verdad es que soy muy novato en esto. Perdón por tu tiempo; 17/11/10
Anónimo: Johan No lo veo en tu blog, así que no se como lo estás haciendo... decirte, eso si, que con este método, no enlazará al email si quien pincha en "Contacto" no está usando en su PC el Outlock de Windows...; 17/11/10
Johan: Hola Rosa. Pues en el resto de pestañas he enlazado lo clásico, es decir, el nombre de la pestaña y la dirección :xxxxxx/search/label/ etc, es decir la URL de cada seccion. Eso mismo es lo que quisiera hacer con "Contacto", pero si añado la dirección de mi correo sale directamente un mensaje diciendome que no puedo porque ello puede ser utilizado por otras personas y tal. Así que me dio miedo y lo quité.
Por si te sirve de algo mi correo es Gmail
Otra cosa que había pensado es enlazarlo a la URL de mi perfil, pero en este sitio hay muchas cosas además del correo electronico.
En fin, soy muy ceporro, que le vamos a hacer...
Siento mucho que malgastes tu tiempo.
De todas maneras, muchas gracias y un abrazo. Seguiré atento a tu blog que me parece estupendo para los que comenzamos en esto, Ya ves, el menú lo he puesto siguiendo tus instrucciones y estoy muy contento de como funciona y de su apariencia. La única pega es lo del contacto, pero bueno...
Gracias por todo; 17/11/10
Anónimo: Johan ¿Y porque no incluyes un formulario y después lo enlazas tal como yo lo tengo?:
http://elescaparatederosa.blogspot.com/2009/06/formulario-de-contacto.html; 19/11/10
♥...Mo...♥: :D Excelente Rosa...!!!
Muchas Gracias por el aporte, como siempre tienes una respuesta para mis dudas.
Saludos desde Venezuela; 7/1/11

Publicar un comentario

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.