Instalar Menú Horizontal con pestañas en Blogger

agosto 24, 2013


Instalar Menú Horizontal con pestañas en Blogger


Sí, hoy vamos a ver como instalar un menú horizontal con pestañas en Blogger, como el que yo tengo en este Blog y en el de Servicios de Diseño Gráfico,  lo he englobado dentro de los artículos de Programación Básica para Bloggers porque para personalizarlo vamos a necesitar saber un poquitín de programación. No mucha, sinceramente, ya que no vamos a analizar el código paso a paso, solo las opciones a personalizar. Con haber seguido los tutoriales de programación que hemos visto hasta ahora podéis hacer un menú como el mío sin problema, así que no tengáis miedo a intentarlo, ¡seguro que os queda genial!

El código que vamos a necesitar es este:


<div id='menuWrapper'>
<div class='menu'>
<ul>
<li><a href="http://serviciosdisenografico.blogspot.com.es/">Inicio</a></li>
<li><a href="#">Papelería</a>
<ul>
<li><a href="http://serviciosdisenografico.blogspot.com.es/p/tarjeteria.html">Tarjetería y Marcapáginas</a></li>
<li><a href="http://serviciosdisenografico.blogspot.com.es/p/laminas.html">Láminas</a></li>
</ul>
</li>
<li><a href="#">Blogs</a>
<ul>
<li><a href="http://serviciosdisenografico.blogspot.com.es/p/predisenados.html">Prediseñados</a></li>
<li><a href="http://serviciosdisenografico.blogspot.com.es/p/banners.html">Banners</a></li>
</ul>
</li>

<li><a href="http://serviciosdisenografico.blogspot.com.es/p/kits-de-fiesta.html">Kits de Fiesta</a>
</li>

<li><a href="http://serviciosdisenografico.blogspot.com.es/p/logotipos.html">Logotipos</a>
</li>

<li><a href="http://serviciosdisenografico.blogspot.com.es/2013/05/servicios-de-diseno-grafico.html">Servicios</a>
</li>

<li><a href="http://elperrodepapel.blogspot.com.es">Blog</a>
</li>

</ul>

</div></div>





Es mi menú del Blog de Servicios de Diseño Gráfico.

Si lo copiáis tal cual como elemento HTML/Javascrip en el lateral de vuestro Blog, os aparecerá un menú sencillo, sin formato, tan solo una lista. Puede ser útil para aquellos que queráis poner el índice de vuestras páginas en el sidebar en vez de en la cabecera. Pero hoy vamos a ver como dar formato a este menú, añadir tus propias pestañas/subpestañas y colocarlo en el Blog sin problema.

Prepara nuestra Plantilla para añadir un Menú con Pestañas


Para que nuestro menú funcione, primero tenemos que hacer unos cambios en la Plantilla HTML de nuestro Blog.


Hacemos click en cualquier zona dentro de nuestra plantilla y abrimos el buscador interno: Ctrl + F
Buscamos: <b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>


Eliminamos class='tabs'
El código después del cambio deberá ser: <b:section id='crosscol' maxwidgets='1' showaddelement='yes'>

Un poco más abajo, volvemos a tener class='tabs'


Lo eliminamos también.
El código resultante debe ser: <b:section id='crosscol-overflow' showaddelement='no'/>

Ahora vamos a eliminar las Tabs, para que nuestro menú horizontal con pestañas se vea correctamente cuando lo incluyamos en Diseño.

Para ello buscamos: .tabs-inner .section:first-child {

Encontraremos este código en nuestra plantilla, encabezado por /* Tabs 




Eliminamos todo lo que hay debajo de

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

Hasta llegar a 

/* Columns
----------------------------------------------- */

La parte del código dentro de /* Tabs debe quedar vacía.

Y en su lugar copiamos el siguiente código:

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

.tabs-outer {z-index:1;} 

El código resultante sería:

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

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

.tabs-outer {z-index:1;} 

/* Columns
----------------------------------------------- */

Comprobamos en Vista Previa que todo está correcto y guardamos los cambios. Con este sencillo cambio, ya podemos usar cualquier tipo de menú con pestañas/subpestañas y que éstas se vean correctamente.




Personalizar Menú con Pestañas



Ahora volvemos al primer código, al del menú, para personalizarlo y finalmente instalarlo en nuestro Blog.

Si os habéis fijado, ese código no es nada más que una lista, como las que aprendimos a hacer en esta entrada.

Así que nos será muy sencillo interpretarla. Antes de empezar, estructura el orden que quieres para tus pestañas principales y las subpestañas y copia los enlaces de las mismas para tenerlos a mano.

Empezamos.

Para no liarnos, podemos copiar el código que os he dado en un archivo de word. Así no tendremos que ir modificando poco a poco nuestro código en el nuevo elemento HTML/Javascrip que añadiremos al Diseño de nuestro Blog.

La primera parte del código a modificar es ésta:

<ul>
<li><a href="http://serviciosdisenografico.blogspot.com.es/">Inicio</a></li>


<ul></ul> --> delimita el comienzo y final de la lista.
<li></li> --> cada una de las pestañas.


Mi primera pestaña es Inicio y va enlazada a mi página principal. Solo tienes que cambiar mi enlace por el tuyo y donde pone Inicio poner el nombre que quieras para tu pestaña principal.
Esta primera pestaña no tiene subpestañas.

Pasamos a la siguiente:

<li><a href="#">Papelería</a>
<ul>
<li><a href="http://serviciosdisenografico.blogspot.com.es/p/tarjeteria.html">Tarjetería y Marcapáginas</a></li>
<li><a href="http://serviciosdisenografico.blogspot.com.es/p/laminas.html">Láminas</a></li>
</ul>
</li>

Mi Pestaña Papelería tiene dos subpestañas.



Que van dentro de la Pestaña Principal llamada Papelería. Como ésta pestaña Principal no enlaza a ninguna página, solo sirve para englobar las otras dos, no la he enlazado a ninguna página, ésto se consigue escribiendo # donde debería ir el enlace, como podéis ver en el código:

<a href="#">Papelería</a>

Empezamos a analizar el código para que puedas modificarlo a tu gusto:

<li> </li> --> Engloban el contenido de nuestra segunda pestaña y las correspondientes subpestañas.
<ul> </ul> --> Como he añadido subpestañas, estas forman una nueva lista que va marcada por estas etiquetas.
<li> </li> --> Cada una de las subpestañas que queremos añadir a nuestra Pestaña Principal.

Ahora puedes cambiar mis enlaces y nombres por los tuyos y añadir o quitar las que necesites, para añadir una nueva subpestaña solo tienes que añadir otro código <li> </li> antes de </ul> final.

¡Y lo mismo haríamos con el resto del código! Puedes añadir tantas pestañas comoquieras, siempre tendiendo en cuenta el espacio del ancho de tu Blog. Una vez que hayas entendido lo que significa y hace cada uno de los códigos, te resultará sencillo adaptarlo a tus necesidades.

Insertar el Menú en nuestro Blog


En Diseño, añadimos un nuevo elemento HTML/Javascrip, pegamos nuestro código y lo situamos debajo de la cabecera. Nuestro menú aún no está personalizado, eso viene ahora, así que no te preocupes si se ve raro.



Añadir el estilo de nuestro menú en la plantilla HTML


Llegados a este punto ya tenemos nuestra plantilla preparada para poder ver nuestro menú sin problema y hemos adaptado el código del menú a nuestras páginas y subpáginas. Nos queda nada para poder lucir nuevo menú en el Blog.

Vamos a la plantilla HTML del blog, abrimos el buscador y buscamos: ]]></b:skin>

Justo encima pegamos el siguiente código:


/* Menu horizontal con buscador
----------------------------------------------- */
#menuWrapper {
width:100%; /* Ancho del menú */
height:35px;
padding-left:14px;
background:#F5A9D0; /* Color de fondo */
border-radius:20px; /* Bordes redondeados */
}
.menu {
width: 100%;
float: left;
font-family:"Lucida Sans Unicode", "Trebuchet Unicode MS", "Lucida Grande",sans-serif;
font-size:13px; /* Tamaño de la fuente */
font-weight:bold;
}
.menu ul {
float:left;
height:0px;
list-style:none;
margin:0;
padding:0;
border-radius: 0px 0px 20px 20px; /* Bordes redondeados del submenú */
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#F5A9D0 url(http://lh4.googleusercontent.com/-iqgCHipLGx4/T5DqLrsVALI/AAAAAAAACaI/bcIY7SV8s5I/s35/separador.gif) bottom right no-repeat;
color:#6E6E6E; /* Color de la fuente */
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px; /* Espacio entre cada pestaña */
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a {
background: #A9E2F3; /* Color de las pestañas al pasar el cursor */
color:#045FB4; /* Color del texto al pasar el cursor */
text-decoration:none;
}
.menu li ul {
background:#A4A4A4; /* Color de fondo del submenú */
display:none;
height:auto;
padding:0px;
margin:0px;
position:absolute;
width:200px; /* Ancho del submenú */
z-index:100;
border-top:1px solid #fff; /* Borde superior del submenú */
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
margin:0px;
padding:0px;
width:200px;
}
.menu li:hover li a {
background:none;
border-radius: 0px 0px 20px 20px; /* Borde de las subpestañas */
}
.menu li ul a {
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#A9E2F3; /* Color de las subpestañas al pasar el cursor */
color:#ffffff;
text-decoration:none;
}

Este es mi código, si lo copias tal cual, tu menú será como el mío.



Pero modificando las partes del código que te he marcado en rojo, puedes aplicar los colores, tamaños y efectos de redondeo que tú quieras, es cuestión de ir probando en Vista Previa hasta que des con el resultado que más te guste.

Una web genial para el tema de los colores HTML es ESTA, es la que yo uso y funciona muy bien.


Bueno, pues espero que esta información te sea útil. Este tipo de menús tardan menos en cargar que los de imágenes, por lo que reducen el tiempo de carga del Blog y la verdad es que estéticamente quedan muy bien. Además de que mejoran la usabilidad y navegación para nuestras visitas.

Ya me cuentas si te has animado a usarlo y los resultados.






Suscríbete a mis entradas por email ¡para no perderte nada!





♥ Las recibirás en tu bandeja de entrada el mismo día que sean publicadas ♥






Te encantará:

80 pensamientos ¡falta el tuyo! ;)

  1. Súper claro!!! Voy a intentarlo, besos!!

    ResponderEliminar
  2. Un currazo de tres pares de narices pero la verdad es que en cuanto tenga un dia entero para dedicarle al blog, este es una de las mejoras que quiero aplicar.
    Muchas gracias por tus tutoriales, eres una crack!!
    Lou

    ResponderEliminar
    Respuestas
    1. Verás que es sencillo, pasito a pasito ;)

      ¡Feliz finde, guapa! :)

      Eliminar
  3. Holaaa, me encanta tu entrada, y he querido probarla pero no me deja =( no encuentro el tab :.tabs-inner .section:first-child {. De después de tab no tiengo las columnas (no sé si eso tiene algo que ver xD).
    Al borrar las tabs que encuentro pongo vista previa y no me carga nada =/

    Sabes que problema puede haber?

    Gracias por adelantado, espero conseguirlo =)

    ResponderEliminar
    Respuestas
    1. ¡Hola Jossy!

      Perdona, no había visto tu comentario :S

      ¿Puedes pasarme el enlace de tu blog y le echo un ojo cuando tenga un ratito? ¿tienes el código instalado!

      ¡¡Gracias a ti y perdona el despiste!!

      Eliminar
  4. Está genial, iba dudando entre usar las pestañas de blogger o montar algo así, y creo que esto es mucho más flexible. Ya sabía hacer lo de la lista, pero lo de montar todo el css y localizar el código a modificar en la plantilla se me hacía muy cuesta arriba. Después de hacer unas pruebas, veo que tiene buena pinta. Muchas gracias.

    ResponderEliminar
  5. Gracias Celia. Lo he entendido muy bien porque lo explicas muy claro. El problema me surge desde el principio, porque no tengo el codigo <b:section class= en mi plantilla. qué puedo hacer?

    ResponderEliminar
    Respuestas
    1. ¡Hola guapa!

      Tienes que tenerlo :) ¿Estás usando el buscador interno? Tienes que pinchar en tu plantilla, en cualquier parte de la caja de código HTML, entonces pulsas Control + F y lo buscas, ya me dices ¿vale?

      ¡Gracias!

      Eliminar
  6. Hola Celia,
    Tu post me ha parecido muy útil!! Pero tengo dificultades cuando pego el código que indicas justo encima de ]]>, ya que una vez colocado tanto si lo visualizo en la vista previa como si guardo los cambios y abro el blog en una nueva pestaña, el menú se ve como una lista, normal, vertical y sin ningún tipo de estilo aplicado. Sabes que puede estar ocurriendo?? Mil gracias por tu ayuda!! ^_^

    ResponderEliminar
  7. Encima de ]]>, que veo que me he comido una parte!!

    ResponderEliminar
    Respuestas
    1. ¡Hola!

      ¿Has comprobado si has eliminado los dos class='tabs' que os comento al principio? ¿Y has cambiado el contenido de /* Tabs
      ----------------------------------------------- */?

      Eliminar
    2. Hola Celia!! Gracias por tu pronta respuesta, se agradece y mucho!!

      Sí, lo he comprobado y está exactamente igual que en tu tutorial. De hecho he repetido dos veces el proceso, volviendo atrás, por si había cometido algún error y sucede lo mismo.

      Lo que no he probado es a "instalar" de nuevo la plantilla original -ni siquirea sé si se puede- y empezar de cero.

      Mientras no lo soluciono he dejado el listado en un gadget a la derecha de la pantalla, así por lo menos parece que el listado en formato vertical está hecho adrede ; ) Pero la verdad es una pena porque me ENCANTA el diseño de tú menú!!!

      Espero tus comentarios. Millones de gracias de nuevo!!

      Eliminar
    3. Hola!

      Si me pasas el enlace de tu blog con el código instalado puedo intentar ayudarte :) Sin verlo es complicado saber qué puede pasar ;)

      ¡Feliz sábado!

      Eliminar
  8. Estoy pensando que igual pongo un menu en el lateral, me ha venido muy bien tu tutorial ;)

    ResponderEliminar
  9. Hola! Te encontré a través de Google, y he intentado hacerlo porque me encantaban tus pestañas pero... me he quedado en el paso 1 :( He conseguido cambiar la plantilla, pero luego a la hora de modificar el html y añadir el nuevo menú me armo un lío. En cualquier caso muchas gracias por el tutorial, intentaré hacerlo de nuevo un día que tenga más tiempo porque es genial. Saludos.

    ResponderEliminar
    Respuestas
    1. ¿Has conseguido hacerlo, guapa?

      ¡¡Beso y gracias a ti!!

      Eliminar
  10. hola celia ..tengo un pequeño problemilla.... hice todo ta cual lo explicas pero no me salen pestañas, solo me sale n lo que serian mis pestañas en un lateral y en columna ¿que hago?
    espero tu respuesta :)

    ResponderEliminar
    Respuestas
    1. ¡Hola Raquel!

      Comprueba que has modificado correctamente el código tabs y que has eliminado los ids que os comento un poco más arriba, sino, te aparecerá con un formato que no es el del tutorial.

      Y recuerda ocultar tus páginas en el apartado Páginas del panel de administración de Blogger :)

      Eliminar
  11. No me sale, Celia =((((
    ¿De verdad eres tu la de la foto?
    =((

    ResponderEliminar
    Respuestas
    1. ¡Hola hAlamH!

      He mirado tu código y te falta la última parte del tutorial, el código que da estilo al menú de páginas, por eso te aparece en formad de listado. Míralo de nuevo, insertalo antes de skin y me cuentas ;)

      ¡Feliz tarde!

      Eliminar
  12. Hola Celia, tengo una pregunta tonta referente a este tipo de menús. Cuando tengamos que realizar una entrada en el blog, tenemos que ir modificando en la plantilla de htlm en cada una de ellas luego?

    ResponderEliminar
    Respuestas
    1. Hola... ¿puedes explicarme un poco mejor? No he entendido bien tu pregunta :S

      ¡Lo siento!

      Eliminar
  13. Hola Celia, lo tengo listo! lo único que no consigo es centrar el menú, y hacer desaparecer la barrita negra que separa cada pestaña ¿me podrías ayudar?

    ResponderEliminar
    Respuestas
    1. ¡Hola Lidia!

      En este trocito de tu código:

      .menu li a{
      background:#FFFFFF url(http://lh4.googleusercontent.com/-iqgCHipLGx4/T5DqLrsVALI/AAAAAAAACaI/bcIY7SV8s5I/s35/separador.gif) bottom right no-repeat;
      color: #D8D8D8; /* Color de la fuente */

      Elimina la URL que va entre paréntesis, así:

      .menu li a{
      background:#FFFFFF url(#) bottom right no-repeat;
      color: #D8D8D8; /* Color de la fuente */

      Y para centrar las páginas, prueba a poner ésto:

      /* Centrar Páginas */
      .PageList {text-align:center !important;}
      .PageList li {display:inline !important; float:none !important;}

      Justo donde termina tu código del menú.

      Ya me cuentas si te ha funcionado ;)

      ¡Feliz Viernes!

      Eliminar
    2. No puedo centrarlo con el código que tú has puesto, en cambio tocando el primer panding left y añadiendo un par de margin he conseguido ponerlo, al final el principio del código me ha quedado así:

      #menuWrapper {
      width:1345px; /* Ancho del menú */
      height:45px;
      margin-left:-45px;
      margin-right:-50px;
      padding-left:220px; /* Centrar letras menú */
      margin-bottom:-30px;
      background:#fd5693; /* Color de fondo */
      border-radius:0px; /* Bordes redondeados */
      }

      Eliminar
  14. Muchísimas gracias, no conseguí centrarlo sí eliminar las barritas.
    Seguiré investigando a ver como puedo centrarlo MIL BESOS y FELIZ VIERNES!

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

    ResponderEliminar
    Respuestas
    1. Muchísimas gracias! había puesto un problemilla pero ya lo solucioné todo
      Explicas genial! ^^

      Un abrazin!

      Eliminar
  16. Hola Celia tengo unos cuantos probelmas, no encuentro los codigos que mencionas, me puedes ayudar? por favor http://re-jewvenate.blogspot.com/

    ResponderEliminar
    Respuestas
    1. ¿a qué codigos te refieres, Ruth? Comprueba que estás usando el buscador interno de la plantilla de blogger para buscarlos y no el general de la página web. Para abrir el de la plantilla, tienes que pinchar dentro de tu plantilla, en cualquier parte, y pulsar Control + F.

      Eliminar
  17. Hola Celia. Una pregunta ¿sabes como puedo quitar estos puntos que aparecen en el menu? https://pbs.twimg.com/media/Bjbr0VVCAAA6wT-.png
    Gracias^^

    ResponderEliminar
    Respuestas
    1. ¡Hola Mª del Mar! Aségurate de que has quitado bien las dos class tabs que os digo al principio del tutorial, no debería aparecer el formato de lista en el menú si habéis seguido bien los pasos :)

      Eliminar
  18. Hola Celia! Es genial tu blog me ha servido de muchisima ayuda. Gracias :)
    Solo tengo una duda, me podrias decir como hacer para que las distintas pestañas queden con bordes redondeados, como si fueran botones, igual que en tu blog. Esque a mi me salen los bordes redondeados para toda la barra, y no me termina de gustar.
    Muchas gracias por anticipado ;)
    Un beso guapa!

    ResponderEliminar
  19. Hola de nuevo, otra cosa que te queria preguntar es que me sale el menu de subpestañas muy separado del menu principal, he debido tocar algo que no debia y no se como arreglarlo. ¿Me podrias ayudar? Te lo agradeceria muchisimo.
    Gracias! :)

    ResponderEliminar
    Respuestas
    1. ¿me puedes pasar el enlace de tu blog con el código instalado para poder verlo?

      Eliminar
  20. Hola Celia!!
    Llevo muy poquito tiempo con mi blog y una de las cosas que quería era añadir el menú para que quien entre en el blog sepa un poco donde encontrar las entradas y demás pero me parecía algo imposible hasta que he dado con tu blog!!!! Genial la entrada que has escrito y todo muy bien explicado! Muchas gracias por tus tutoriales tan bien redactados y estructurados!
    Me pasaré a visitar el resto de tu blog porque tiene muy buena pinta ;)
    Un beso y hasta pronto!!

    ResponderEliminar
  21. hOLA INTENTE HACER EL MENU DOS VECES Y ESTA TODO BIEN HASTA QUE LO PERSONALIZO, AHI CUNDO VOY A LA VISTA PREVIA SE QUEDA COMO CUANDO CAMBIAMBIO LA PARTE DE /* Tabs--- */ . nO SE QUE PASA, MEPODRAS AYUDAR? mUCHAS GRACIAS!!

    ResponderEliminar
    Respuestas
    1. ¿puedes pasarme el enlace de tu blog con el código instalado? Solo se me ocurre que estés colocando mal la parte del CSS

      Eliminar
  22. hola! gracias por el tutorial, pero me salta una duda.
    ¿puedo poner dos enlaces(de tu propio blog) en una misma pestaña?

    ResponderEliminar
    Respuestas
    1. ¡Hola Marcelo!

      Que yo sepa es imposible enlazar dos urls a una misma pestaña, a no ser que uses subpestañas dentro de la pestaña principal :)

      Eliminar
  23. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  24. Muy muy útil! Ademas, enredando con el código un poco he conseguido cambiarlo bastante, y me ha quedado bien para no saber de códigos jaja. Gracias!

    ResponderEliminar
  25. Muy bueno! Gracias!!!

    Buenas...!

    Te invito a conocer mi blog:
    http://hoylamodaerestu.blogspot.com.es/

    Espero que te guste

    Un saludo!!

    ResponderEliminar
  26. Te has complicado demasiado. Seguro que hay formas más sencillas

    ResponderEliminar
    Respuestas
    1. Siempre comparto lo que yo he probado y sé que funciona, seguro que hay cientos de formas de hacerlo :)

      ¡Feliz martes!

      Eliminar
  27. hola wapa! estoy intentando hacer el menú pero tengo unos problemas:

    no encuentro: .tabs-inner .section:first-child { lo más parecido es: .tabs-inner .widget li:last-child a { y no está debajo de: /* Tabs
    ----------------------------------------------- */ ya que hay esto;

    /* Tabs
    ----------------------------------------------- */
    .tabs-outer {
    overflow: hidden;
    position: relative;
    background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0; (etc..)

    y lo siguiente es: /* Headings
    ----------------------------------------------- */ no columns. como puedo arreglarlo? gracias

    diariodeunapotinguera.blogspot.co,

    ResponderEliminar
    Respuestas
    1. ¿Qué plantilla tienes instalada? El tutorial es para la plantilla sencilla/simple de Blogger :)

      Eliminar
  28. Hola Celia, gracias por tu dedicación
    he seguido tus explicaciones al pie de la letra y me esta quedando bastante bien, prácticamente sólo he modificado el color de tu diseño.
    La duda me surge en que si le quiero poner una pestaña más, se me desdobla la barra hacia abajo y queda un poco feo, se solapan las subpestañas de arriba con las de abajo, es posible que sea porque tengo mucho texto en el menú?
    http://elrincondedippy.blogspot.com.es/
    Por ahora lo que he hecho es quitar una pestaña, y así queda bonito, aunque sobra un poco a la derecha, pero en comparación con nada, que es lo que tenía esta genial.

    ResponderEliminar
    Respuestas
    1. ¡Hola guapa!

      Claro, el número de páginas se adapta al espacio que tengas, si usas nombres muy largos para algunas de ellas, queda menos hueco para las demás y pasan a doble fila, solapándose con las subpestañas, como tu dices. Por eso es muy importante pensar bien que nombre vamos a asignar a cada página, que sea breve y descriptivo, para poder poner todas las pestañas que necesitemos.

      Aún así, no es recomendable usar más de 5 o 7, porque al final se pasarán a segunda fila sin remedio al tener un espacio limitado.

      Puedes probar a poner un tipo de letra más pequeña o dejar menos espacio entre una pestaña y otra, pero quedan más comprimidas y estéticamente no queda muy bien. Pero ya sabes, para gustos... ¡los colores!

      ¡Muchas gracias y feliz finde!

      Eliminar
  29. ¡Hola Celia!,

    una duda que tengo: ¿el menú se crea con las páginas?, es decir, ¿los enlaces que hay que poner son de las páginas, de las etiquetas o de qué cosa? Lo digo, porque yo lo he hecho con las páginas pero ahora me encuentro con que obligatoriamente, al pinchar en cada pestaña, me salen los títulos de las páginas que no puedo cambiar (tamaño, color, etc) y no me gusta mucho el resultado del aspecto, porque me gustaría que fuese más personalizado, y no sé cómo solucionar esto.

    Espero haberme explicado bien y ver tu respuesta proximamente.

    Muchas gracias y enhorabuena por tu utilísimo blog.

    Besos.

    ResponderEliminar
    Respuestas
    1. ¡Hola!

      Puedes crearlo con páginas o con búsquedas por etiquetas, lo que prefieras. Y sí, aparece el nombre de la página a la que enlazas. El tipo de letra de los títulos de tus páginas puedes cambiarlos desde el Diseñador de Plantillas de Blogger, funcionan igual que los títulos de tus entradas. El mismo estilo que asignes a los títulos de tus entradas, aparecerá en los títulos de tus páginas.
      Y si enlazas a búsquedas por etiquetas, aparecerá por defecto el mensaje: mostrando todas las entadas con X etiqueta.

      ¡Feliz finde y gracias!

      Eliminar
    2. Este comentario ha sido eliminado por el autor.

      Eliminar
  30. Hola Celia, ante todo muchas gracias por tu por tu rápida respuesta.

    Te he entendido todo menos la última parte (soy muy torpe en esto). Verás a ver si me explico bien...

    Sí, al poner el menú con las páginas, el tipo de fuente del título es el mismo que el de las entradas (y me gusta), el problema es que no puedo cambiar ni el color ni el tamaño, que es lo que me gustaría personalizar, porque ahora mismo sale gris (como tengo el color de fuente en el menú para que se vea bien). Estoy dándole vueltas a la manera de ocultar los títulos (si es que se puede) y poner los títulos dentro del cuerpo del texto de las páginas con imágenes hechas con algún programa (me tiene loca este tema...)

    Por otro lado, para mi tipo de blog, en el que quiero mostrar mis jabones y cosméticos naturales, me gustaría diseñarlo para sacarle todo el provecho posible en este sentido (tipo página web), no sé si conviene más hacer el menú con las páginas o con las entradas, porque con las páginas queda muy organizadito y además me ha costado muchísimo hacerlo (horas y horas hasta las tantas de la madrugada, ufff!), pero según tengo entendido al ser páginas estáticas, en Blogger sólo se puede poner entradas nuevas en la página de inicio y no en las demás, entonces en mi caso utilizaría poco o nada las entradas y sólo con las páginas no sé cómo quedaría. No sé cual sería la mejor opción...

    Espero haberme explicado bien y si cuando puedas me das tu opinión de experta, te lo agradeceré muchísimo.

    ¡Muchas gracias y buen finde!

    ResponderEliminar
    Respuestas
    1. ¡Hola guapa!

      Hay un código que si lo copias arriba del todo de la página, puedes modificar lo que quieres que se vea y lo que no, es éste. Os conté un poco como funciona cuando hablamos de como crear una portada, como la que yo tengo, en blogger, en esta entrada:

      http://www.elperrodepapel.com/2014/01/instalar-portada-blogger-dos.html#more

      Espero que te sirva :)

      Las páginas estáticas puedes modificarlas todas las veces que quieras, añadiendo y quitando fotos, enlaces o información, para que muestren lo que tu quieres que vean tus visitas. Yo prefiero enlazar a búsquedas de etiquetas porque se van actualizando automáticamente, pero eso ya depende de lo que te resulte más sencillo :)

      Puedes ver la entrada en la que hablamos del tema de las etiquetas aqui:

      http://www.elperrodepapel.com/2013/10/etiquetas-blog.html#more

      ¡Feliz domingo! :)

      Eliminar
    2. Hola Celia, perdona por no agradecerte antes tu respuesta pero andaba tan obnubilada con las tareas del diseño del blog que se me olvidó hasta que te pregunté.

      Muchas gracias por tu repuesta, muy útil como siempre.

      Besos :)

      Eliminar
  31. Hola!disculpa pero apenas busco
    en el buscador no me sale nada! :B algo se actualizo en blogger o que?Hace mucho que quiero poner un menu y no puedo :c gracias

    ResponderEliminar
    Respuestas
    1. ¡Hola Abril!

      Asegúrate de pinchar dentro de tu plantilla HTML, en cualquier parte, solo haz click. Y luego pulsa a la vez Control + F :)

      ¡Feliz finde!

      Eliminar
  32. Hola Celia, mira yo ya tengo puesto en el blog un menu que me gusta bastante, pero con pestañas no desplegables osea sin subpestañas, que tendria que hacer para añadirlas, lo he intentando como tu explicas pero sin resultado. Gracias

    ResponderEliminar
  33. Hola Celia he probado el menu en otro blog de prueba y me salio super bien pero con los colores estoy vuelta loca, no me salen muy bien. Alguna sugerencia. Muchas gracias

    ResponderEliminar
  34. Hola! Acabo de descubrir tu blog y he de decir que me ha parecido grandioso, estoy maravillada con los diferentes tutoriales. Quiero modificar mi blog y estoy haciendo pruebas en otro, para asegurar los pasos, y he de decir que este del menú me ha salido estupendamente, gracias!! La única pega es que el margen izquierdo, donde empiezan las pestañas, me queda metido hacia dentro, no sé si me explico. Si quieres te dejo el enlace del blog de pruebas para que veas a lo que me refiero, y me digas, si es posible y no mucha molestia, si hay algún modo de arreglarlo: Un Mundo de Verdad
    Muchísimas gracias!! Un saludo. Y de nuevo felicidades por tan buenos tutoriales

    ResponderEliminar
  35. muchas gracias por compartir tus conocimientos, me ha quedado muy bien, sólo me gustaría saber si se puede poner un texto más laro en las subpestañas, yo he ensanchado la subpestaña pero el texto no llega hasta el final del ancho y se monta en la siguiente subpestaña, bueno, no se si me explico bien si puedes ayudarme te lo agradecería. un saludo y de nuevo muchas gracias

    ResponderEliminar
  36. quería decir un texto más LARGO en las subpestañas

    ResponderEliminar
  37. Me encantó el diseño (tanto del blog como el del menú) enserio muchas gracias.
    Solamente tuve un problema al poner el ultimo código, no entendía con lo de "encima" me confundí un poco, no sabía si antes o después del "]]>"
    Salía todo el código abajo del titulo del blog pero luego de varios "Ctrl-Z" lo resolví. Sin embargo ¡Muchas gracias!

    ResponderEliminar
  38. Hola Celia, muy interesantes tus recomendaciones. Estoy empezando mi blog, y de momento quiero cosas sencillas pero siguiendo tu ejemplo algo he hecho mal que sale la barra en blanco y las casillas no se ven hasta que pasas el ratón por encima. ¿podrías echar un ojo y decirme de que se trata? Gracias
    http://haciacinessalvajes.blogspot.com.es

    ResponderEliminar
  39. Hola:
    He realizado un menú horizontal y lo he colocado en el blog pero me queda pegado a la cabecera y me gustaría separarlo un poco, es decir que la cabecera y el menú no estén unidos. Sería posible?
    http://enlacestic3primaria.blogspot.com.es.
    Gracias, un saludo

    ResponderEliminar
  40. Hola Celia, muchas gracias por este tutorial, llevaba días buscando uno así.

    Sin embargo, hice todo lo que dices, y cuando agrego el gadget html, actualizo el blog y ni siquiera me aparece tu modelo de menú. Simplemente me aparece el menu abajo de la cabecera sin fondo y con letra en rosa, y me aparece el menu horizontal y arriba de él, el menú en forma de lista.

    Entonces no sé cómo quitar esa menú en forma de lista, ni qué hice mal para que no me aparezca como en la foto a ti para poderlo editar y que quede acorde a mi blog. Lo voy a dejar así hasta que lo veas, mi blog es http://oleaccesorios.blogspot.com.es

    Saludos y muuuchas gracias

    ResponderEliminar
  41. ¡Hola!♥

    Muchas gracias por el post, me ha servido mucho :3

    ¡Saludos!

    ResponderEliminar
  42. Celia estoy intentando centrar el menú pero no puedo, no sé que es lo que hago mal. Lo he puesto debajo del todo del código del menú (el primer código) y luego debajo del todo del código de diseño (último código), pero no consigo centrarlo. El problema es que no te puedo enseñar mi blog ya que es uno de pruebas y lo tengo privado.

    Y muchas gracias por tu ayuda, por tus explicaciones que son estupendas, desde hace mucho tiempo quería saber html y me era imposible, pero ahora gracias a tí estoy aprendiendo.
    Espero tu respuesta.

    ResponderEliminar
  43. Hola Celia,

    ¿Qué tengo que hacer para que este menú de desplegables se vea bien en la plantilla móvil? Uso blogger.

    Gracias!

    ResponderEliminar
  44. Buen día, Celia.
    Me encanta tu blog y quiero agradecerte por la ayuda que nos brindas.
    Bueno, he seguido este tutorial que nos has compartido y me sale un error... He seguido todos los pasos al pie de la letra, pero no se que sucede. Si fueras tan amable de ayudarme... Te dejo el link de mi blog.

    http://thesworld07.blogspot.mx/

    Gracias de antemano <3

    ResponderEliminar
  45. ¡¡Dudas resueltas en la Consultoría Mensual!!

    Busca tu respuesta --> http://www.elperrodepapel.com/2015/01/consultoria-blogger-resolviendo-dudas.html

    ¡Feliz sábado! :D

    ResponderEliminar
  46. Hola buenas tardes, tengo una duda muy grande, mi blog tiene menú desplegable pero no sé cómo poner contenido en las pestañas de mi menú. ¿Podrías ayudarme? Gracias.

    ResponderEliminar
  47. Hola, espero que puedas ayudarme, tengo un menú horizontal con varias pestañas, están centraditas muy monas, pero la ultima pestaña me da problemas. Da igual qué pagina coloque en esa ultima pestaña que el problema es que al pasar el ratón por encima no me deja seleccionarla. El enlace está bien poruqmsi cambio el orden la que antes me daba problema por estar la última, ahora ya no lo da, pero si la nueva que coloque en ese lugar. Por qué pasa esto? Cómo podría sokucionarlo? Gracias!

    ResponderEliminar
  48. ¡Hola Celia! Primero que nada agradecerte. Estoy encantada con este tutorial, llevaba tiempo intentando averiguar cómo hacer el menú horizontal y hasta ahora no lo había conseguido. Por fin lo hice pero el problema es que cuando paso el cursor por las subpestañas para hacer click no me dejan, desaparecen :(

    Te dejo el link a mi blog http://misteriosdeco.blogspot.com.es/

    De nuevo, muchísimas gracias. Estaré atenta a la respuesta, a ver si tiene solución. Un abrazo.

    P.D.:Yo si tengo la plantilla básica de blogger.

    ResponderEliminar



¡Anímate a comentar! ♥Tu opinión es muy importante para mí♥



El Perro de Papel es una Marca propiedad de Celia Espada García debidamente registrada en la OEPM, Modalidad M, Número 3527002 (0). Todos los recursos creados por Celia Espada García están correctamente protegidos y vinculados a la autora y no pueden usarse sin consentimiento previo.

Safe Creative #1408270134965
Los derechos de autor y propiedad intelectual del material compartido, tanto gratuitamente como de pago, en esta web y sus redes sociales pertenecen a "El Perro de Papel", exceptuando las referencias a otros creadores, los cuales están debidamente citados en los créditos.