Personalizar Menú de Páginas en Blogger

enero 14, 2014


Personalizar Menú de Páginas en Blogger


Ya hemos visto como instalar un menú con pestañas en Blogger. Algunos de vosotros me habéis comentado que hay que tocar mucho la plantilla y es un poco engorroso, así que he pensado hacer hoy un tutorial más básico, en el que no hay que modificar tanto la plantilla HTML de nuestro blog pero que sirve igualmente para personalizar el menú de páginas, ésta vez con las opciones que ofrece Blogger y añadiendo solamente un pequeño fragmento de código al original para centrar las páginas.

Para ello, he creado un blog nuevo, para empezar de cero, seleccionando la Plantilla Sencilla (Simple) de Blogger.

1.- Creamos las páginas para poder personalizarlas.

Páginas --> Página Nueva --> Página en Blanco



2.- Podemos escribir cualquier cosa para la prueba y la publicamos.

3.- Ahora seleccionamos Mostrar --> Pestañas Principales.

MUY IMPORTANTE: Pinchar en Guardar Disposición, arriba a la derecha, para que Blogger guarde los cambios de nuestro menú de páginas.

ACTUALIZACIÓN: La forma de crear/editar páginas en Blogger se ha actualizado, puedes ver la nueva forma de hacerlo en el siguiente enlace:






Ahora mismo se vería así:


Ya tenemos nuestro menú de páginas listo para personalizar.

4.- Vamos a nuestra plantilla HTML, pinchamos en cualquier parte dentro de la caja de código y pulsamos: Control + F. Se abrirá el buscador interno.

Buscamos:

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

El código que veremos debajo, es el de nuestro menú de páginas. Será similar a éste:


Vamos a aplicarle formato directamente a la plantilla, personalmente me gusta más que el Diseñador de Plantillas de Blogger y tiene muchas más posibilidades.

Todos los símbolos $ que ves, son los que pueden personalizarse desde el Diseñador de Plantillas, cuando aparece $, es porque es un dato aleatorio, por decirlo de alguna manera.

5.- Primero vamos a centrar nuestro menú, añadiendo al final de este código:

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

Justo antes de:

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

Así:


Si seleccionamos Vista Previa, vemos que nuestras páginas ya aparecen en el centro:


Guardamos los cambios antes de seguir.


6.- Vamos a personalizar el color, tipo de letra y los bordes de nuestro menú.


Buscamos esta parte del código dentro de Tabs.

.tabs-inner .section:first-child ul {
  margin-top: -$(header.border.size);
  border-top: $(header.border.size) solid $(tabs.border.color);
  border-left: $(header.border.horizontalsize) solid $(tabs.border.color);
  border-right: $(header.border.horizontalsize) solid $(tabs.border.color);
}

Ejemplo


Para conseguir un borde rosa alrededor de nuestra barra del menú, cambiaremos el código anterior por éste:

.tabs-inner .section:first-child ul {
margin-top: -1px;
border-top: 1px solid #F78181; /* Borde superior de la barra del menú */
border-left: 1px solid #F78181; /* Borde izquierdo de la barra del menú */
border-right: 1px solid #F78181; /* Borde derecho de la barra del menú */
border-bottom: 1px solid #F78181; /* Borde inferior de la barra del menú */
}

Border-top: Borde superior.
Border-left: Borde izquierdo.
Border-right: Borde derecho.
Y hemos añadido: Border-bottom: borde inferior.

Puedes ver los diferentes tipos de bordes que puedes usar en esta entrada:

Bordes y Colores en HTML




7.- FONDO Y MARGENES:


Seguimos editando nuestro código:

.tabs-inner .widget ul {
  background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
  _background-image: none;
  border-bottom: $(tabs.border.width) solid $(tabs.border.color);

  margin-top: $(tabs.margin.top);
  margin-left: -$(tabs.margin.side);
  margin-right: -$(tabs.margin.side);
}

Y lo sustituimos por:

.tabs-inner .widget ul {
background: #CEE3F6 none repeat-x scroll 0 -800px; /* Color de fondo de la barra */
_background-image: none;
border-bottom: 0px solid #dddddd;
margin-top: 0; /* Margen superior de la barra del menú */
margin-left: -30px; /* Margen izquierdo de la barra del menú */
margin-right: -30px; /* Margen derecho de la barra del menú */
}

El resultado:


Variando el número de pixels de los margenes, podemos mover nuestro menú, por ejemplo:

margin-left: 100px;
margin-right: -30px;

Resultado:

8.- LETRAS Y COLORES:


Código a personalizar de nuestro código Tabs:

.tabs-inner .widget li a {
  display: inline-block;

  padding: .6em 1em;

  font: $(tabs.font); 
  color: $(tabs.text.color); 

  border-$startSide: $(tabs.border.width) solid $(content.background.color);
  border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);
}


Y lo cambiamos por:

.tabs-inner .widget li a {
display: inline-block;

padding: .6em 1em;
font: normal normal 15px 'Rock Salt', Trebuchet, Verdana, sans-serif; /* Tipo de letra */
color: #000000; /* Color de la letra */
border-left: 0px solid #ffffff; /* Borde izquierdo de la celda */
border-right: 0px solid #dddddd; /* Borde derecho de la celda */
}

Resultado:



Puedes instalar una fuente de Google Fonts para los títulos de las páginas de tu menú tal y como vimos en esta entrada:

Cambiar el tipo de letra de los títulos de las entradas del Blog

Hasta el paso 13. Una vez hayamos instalado la nueva fuente, sustituiremos el tipo de letra que tenemos en nuestro código, por la que acabamos de añadir.

Por ejemplo:

font: normal normal 15px 'Patrick Hand SC', Trebuchet, Verdana, sans-serif; /* Tipo de letra */

Resultado:


Podemos aumentar el tamaño:

font: normal normal 25px 'Patrick Hand SC', Trebuchet, Verdana, sans-serif; /* Tipo de letra */

Resultado:



Si te has fijado, han desaparecido los separadores entre las diferentes páginas, eso lo hemos conseguido gracias a la última parte de este código con el que estamos trabajando ahora:

border-left: 0px solid #ffffff; /* Borde izquierdo de la celda */
border-right: 0px solid #dddddd; /* Borde derecho de la celda */

Si quieres mantenerlas o aplicarles un formato y/o color diferente, puedes hacerlo de la misma manera que seleccionaste los bordes para tu menú.



9.- EFECTO HOVER:


Vamos a modificar la última parte de nuestro código Tabs:

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  color: $(tabs.selected.text.color);
  background-color: $(tabs.selected.background.color);
  text-decoration: none;
}

Lo reemplazamos por:

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: #ffffff; /* Color de la letra al pasar el cursor */
background-color: #F78181; /* Color de fondo de la página seleccionada */
text-decoration: none;
}

Con este trocito de código, lo que vamos a modificar es el efecto hover, es decir, como se verá nuestro menú cuando pase el ratón por encima.

Resultado:


¿Qué te ha parecido? Divertido ¿verdad? 




¿QUIERES APRENDER A DISEÑAR BLOGS PROFESIONALES EN BLOGGER?
¡CON UN MONTÓN DE MANUALES Y PLANTILLAS PREMIUM!
ECHA UN VISTAZO A MI PROGRAMA DISEÑA EL BLOG DE TUS SUEÑOS: 




SI QUIERES QUE DISEÑEMOS EL BLOG DE TUS SUEÑOS JUNTAS
HAZ CLICK AQUÍ:








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á:

93 pensamientos ¡falta el tuyo! ;)

  1. me lo dejo para un dia de estos, cambiar la barra de pestañas, es un buen tutorial.

    ResponderEliminar
  2. un tutorial que puedes hacer, por lo menos a mi me vale porque ni idea, es como hacer una galeria de imagenes y que cada imagen enlace a una direccion, tipo a como tienes lo de retos. porque me gustaria hacer algo asi con las cosas que hago, poner foto con enlace, que seguro que lo tendras puesto por algun lado

    ResponderEliminar
    Respuestas
    1. ¡Hola Sonia!

      ¿Te refieres a algo así?

      http://www.elperrodepapel.com/2014/01/disenar-entradas-blogger-fotos.html

      ¡¡Besos!! :)

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

    ResponderEliminar
  4. Muchas gracias por la entrada!! La verdad es que me ayuda mucho porque estoy empezando con mi blog.

    Tenia una preguntita: Mi barra horizontal está debajo de la cabecera y me gustaria poner otra barra pero en la parte superior de la cabecera con: Sobre Mi, contacta, etc., y un buscador.

    Lo he intentado poner " a mi manera" pero lo unico que consigo es una lista vertical que me sale encima de la cabecera, y tambien esos temas se me repiten en la barra horizontal que ya tenia debajo.


    Muchas gracias por tu trabajo!!

    ResponderEliminar
    Respuestas
    1. ¡Hola Ismail! Lo que me preguntas es demasiado complejo para explicarlo aquí, ya que tendrías que añadir un menú adicional mediante un código, como hemos visto en añadir menú con subpestañas en Blogger y moverlo hasta la zona donde quieras que aparezca.

      Eliminar
  5. ¿y para tener la barra horizontal con los bordes redondos?

    Gracias!! :)

    ResponderEliminar
    Respuestas
    1. tendrías que añadir un border-radius:20px o de los píxels que quieras en la primera parte del código: .tabs-inner .section:first-child ul

      Eliminar
    2. Waw gracias!! Lo probaré mas tarde!

      Mil gracias :)

      Eliminar
  6. Hola Celia, instalé un menú superior en mi blog siguiendo tus instrucciones, pero necesitaría que fuese desplegable para poder organizar mejor el contenido que quiero darle ¿Sería posible hacerlo desplegable y tan bonito como los que enseñas a hacer? Gracias y enhorabuena por tu blog, me está sirviendo de mucho.

    ResponderEliminar
    Respuestas
    1. ¡Hola Ecosenda!

      En esta entrada tienes un tutorial para instalar un menu con pestañas en Blogger:

      http://www.elperrodepapel.com/2013/08/menu-horizontal-pestanas-blogger.html

      ¡Feliz jueves!

      Eliminar
    2. ¡Gracias Celia! lo miraré y seguiré tus instrucciones, a ver si algún día de estos por fin consigo terminar mi blog (que me está costando lo suyo).

      Gracias nuevamente y feliz jueves también para ti.

      Eliminar
  7. Celia, he seguido todos tus pasos del tutorial y tengo un problema. Al llegar a:

    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."

    No me deja comprobar en vista previa porque sale una notificación en rojho que dice:

    "No se ha podido cargar la vista preliminar de la plantilla: Error al analizar XML, línea 801, columna 25: Open quote is expected for attribute "class" associated with an element type "b:section"."

    Así que al llegar hasta aquí me da miedo guardar los cambios por si la lío parda y no guardo.

    ¿Sabes qué puede pasar?

    ¡Madre mía! soy un desastre lo reconozco.

    Siento molestarte tanto, de verdad...

    ResponderEliminar
  8. Hola Celia, de momento ese problema lo pude solucionar, eso sí por las bravas, jejee!. Borré todo el código HTLM, puse otro sin tocar de otro blog de pruebas y comencé desde 0, pesado pero efectivo ;). Ahora me queda terminar el tutorial y cruzar los dedos para que funcione. Gracias nuevamente por tu blog, sin él no podría ponerlo bonito. ¡Gracias! Un abrazo.

    ResponderEliminar
  9. Hola!
    tengo un problema, ya había intentado centrarla pero no servía, ahora como tú me lo dices, tampoco. Tengo esa misma plantilla que sale en tus imágenes. Enloqueceré y no se va a centrar la barra :(

    ResponderEliminar
    Respuestas
    1. El código para centrar las páginas es

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

      :)

      Eliminar
  10. Hola Celia, este post me sirvió muchísimo. Gracias por compartir este tipo de información!!

    Te sigo =)

    ResponderEliminar
  11. Hola Celia, introduzco el código donde y como tu dices en la plantilla Sencilla de Blogger pero no hay forma de que aparezca centrado. Lo mismo me ocurre con los bordes.
    O algo estoy haciendo mal yo o algo no esta correcto de tu lado. Es mas que obvio que el error es mío pero te pido que me des una mano…
    Gracias desde ya.

    ResponderEliminar
    Respuestas
    1. ¡Hola!

      Tienes varios blogs en tu perfil de Blogger ¿puedes decirme en cual estás personalizando el código para echarle un vistazo y decirte?

      ¡Gracias a ti!

      Eliminar
  12. Hola. No conocía tu blog, me encanta!
    Todavía no lancé mi blog, porque recién comienzo a diseñarlo y buscando cómo editar el menú de páginas te encontré...
    Podrías decirme cómo eliminar las lineas de borde? Necesito que sólo permanezcan las palabras del menú.
    Probé con tu tutorial y se me ocurrió eliminar 1px solid #F78181 por none pero no funcionó, je! Entonces deshice todo, comencé de nuevo y esta vez puse como color: blanco (#FFFFFF) Todas desaparecen, pero las que no tengo idea cómo eliminar son las líneas verticales entre pestañas. Si pudieras ayudarme con esto... Mil gracias y felicitaciones por este espacio!!

    ResponderEliminar
    Respuestas
    1. ¡Hola guapa!

      Fíjate en el paso 8 y asegúrate de eliminar los bordes de las celdas:

      border-left: 0px solid #ffffff; /* Borde izquierdo de la celda */
      border-right: 0px solid #dddddd; /* Borde derecho de la celda */

      ¡Prueba y me cuentas!

      Feliz finde :)

      Eliminar
    2. Gracias, gracias!!! Vi tu respuesta hace días y pude solucionarlo (lo tenía justo delante de mis ojos y no me daba cuenta!) Pero me enganché retocando más cositas y finalmente no te respondí. Te súper agradezco, además tu blog me está ayudando muchísimo. Un abrazo enorme!

      Eliminar
  13. Hola me
    llamo Magdalena y me pasa que quiero Editar mi blog (poner gadget x ej) pero no me sale la pestaña de Diseño.
    ¡cómo puedo solucionbar ese problema?

    Gracias

    ResponderEliminar
    Respuestas
    1. ¡Hola Magdalena!

      Si tu blog es de blogger, tiene que salirte :)

      Dentro de tu panel de administración de blogger, fíjate en la parte izquierda, donde aparece entrada nueva en naranja. Debajo están todas las opciones de administrador, Diseño se encuentra entre Ingresos y Plantilla.

      ¡Gracias a ti!

      Eliminar
  14. Hola Celia, acabo de conocer tu blog y me encanta tu trabajo. Me gustaría saber si me puedes solucionar una duda. Cuando voy al menú página en blogger sólo me da opción a página nueva, no me sale las dos opciones que tenía antes y tu señalas aquí :página en blanco y dirección web, el caso es que en su día cree un pequeño índice y si lo tenía.. Gracias

    ResponderEliminar
    Respuestas
    1. ¡Hola Sildan!

      La forma de editar/crear páginas en Blogger se ha actualizado, puedes ver cómo se hace ahora aquí:

      http://www.elperrodepapel.com/2014/03/cambios-en-las-paginas-de-blogger.html

      ¡Gracias y feliz domingo!

      Eliminar
  15. Hola! Acabo de encontrar tu blog buscando como insertar el menú horizontal encima de la cabecera y me ha encantado. He seguido todos los pasos que has explicado, y me queda centrado, sin bordes y con la letra que quiero, pero me quedan las páginas super juntas. He intentado aumentar pixeles, insertar los bordes de las celdas, pero nada, no lo consigo. ¿dónde tengo que modificar?
    Muchas gracias!!

    ResponderEliminar
    Respuestas
    1. ¡Hola Nuria!

      Déjame el enlace de tu blog y así puedo verlo :)

      ¡Gracias y feliz finde!

      Eliminar
  16. Hola! Acabo de encontrar este blog en busca de cómo modificar el aspecto de las pestañas en blogger... Y tengo un par de dudar después del cacao mental que me producen siempre los códigos html estos xD
    No es posible poner una imagen que tú quieras y ajustar su tamaño para entrar en la pestaña? Quiero decir, hacer tú un diseño en el ordenador y subirlo para que aparezca.
    Gracias!! <3

    ResponderEliminar
    Respuestas
    1. ¡Hola AntuNyan!

      ¿Te refieres a algo así?

      http://www.elperrodepapel.com/2013/10/como-anadir-un-menu-con-imagenes-en.html#more

      ¡Muchas gracias y feliz finde!

      Eliminar
  17. Hola Celia!

    Mira, tengo la barra horizontal instalada, pero a la hora de centrarla no me sale.. se me queda igual,te dejo el link del blog para que lo beas

    BLOG: lasrecetasdemrpig.blogspot.com

    ayuda! =)

    gracias de nuevo saludos!!!

    ResponderEliminar
    Respuestas
    1. ¡Hola Nazaret!

      Acabo de visitar tu blog y aparece centrada, supongo que lo has conseguido ¡enhorabuena! :D

      ¡Gracias a ti!

      Eliminar
  18. Llevaba tiempo que quería poner páginas, y con este tutorial ha sido de lo más fácil! Eso sí, la copia de seguridad que nunca falte que el HTML y yo estamos conociéndonos aún..
    Ana Sánchez

    ResponderEliminar
    Respuestas
    1. ¡Me alegro mucho, Ana!

      Al HTML se le pierde el miedo con la práctica ;)

      ¡Feliz jueves!

      Eliminar
  19. Genial, qué útil :)
    ¿Y si en vez de cambiar simplemente el color, la fuente, etc. queremos poner de fondo una imagen que hemos hecho nosotros (tipo una cinta sencillita) se podría hacer?

    ¡Un saludo!

    ResponderEliminar
    Respuestas
    1. ¡Hola Elia!

      ¿Te refieres a poner un menú con imágenes?

      Como este: http://www.elperrodepapel.com/2013/10/como-anadir-un-menu-con-imagenes-en.html

      ¿O a poner una imagen de fondo solamente? tengo pendiente hacer un tutorial sobre eso, sí se puede ;)

      ¡Feliz jueves!

      Eliminar
    2. Me refiero a una imagen de fondo, así que estaré pendiente :)
      ¡Muchas gracias!

      Eliminar
    3. ¡Hola de nuevo, Elia!

      Mira a ver si es ésto lo que necesitabas :)

      --> http://www.elperrodepapel.com/2015/03/tutorial-blogger-imagen-detras-del-menu.html

      ¡Besos y feliz tarde, guapa!

      Eliminar
  20. MIRARE LA ACTULIZACION DE BLOG Y A VER SI AHORA ME SALE CENTRAR COMO PONIAS MIL GRACIAS SON GENIALES TUS TUTORIALES

    ResponderEliminar
  21. Hola Celia! Me ha sido de gran ayuda el tutorial, pero tengo una última duda. Me gustaría saber como puedo espaciar más los títulos de las paginas entre si.
    Muchas gracias,
    Carla

    ResponderEliminar
    Respuestas
    1. ¡Hola Carla!

      En el paso 8 del tutorial, prueba a poder bordes transparentes aumentando el número de píxeles ;)

      Por ejemplo:

      border-left: 2px solid transparent; /* Borde izquierdo de la celda */
      border-right: 2px solid transparent; /* Borde derecho de la celda */

      Si no te funciona, pásame el enlace de tu blog para echarle un vistazo.

      ¡Gracias a ti y feliz miércoles!

      Eliminar
  22. Hola buenas.
    Quería saber que tengo que modificar para que me entren más caracteres en cada pestañita sin que me ponga el título de la página en dos líneas.
    Gracias

    ResponderEliminar
    Respuestas
    1. ¡Hola!

      Eso sucede cuando añades demasiadas pestañas a tu menú superior, puedes cambiar el ancho de cada celda hasta adaptarlo... pero si me dejas el enlace a tu blog con el código instalado puedo aconsejarte mejor ;)

      ¡Gracias a ti!

      Eliminar
  23. Muchísimaaaaaas gracias!!! de verdad no sabes lo que me has ayudado! te explicas genial y se entiende a la perfección!

    Gracias!

    ResponderEliminar
  24. Hola Celia!
    Muchas gracias por el tuto! Está genial!!!
    Te hago una pregunta, ¿cómo puedo modificar el alto de la barra? Al cambiar la tipografía se ha ajustado y me aparece con mucho espacio arriba y abajo, me gustaría estrecharla,

    Muchísimas gracias!!!

    ResponderEliminar
  25. Hola Celia!!! llevo un rato intentando hacer todo lo que explicas y al menos he conseguido cambiar el color del fondo tan oscuro que tenía, por el tuyo azul mucho más bonito.
    Gracias por tu ayuda, sigo con ello.
    Un saludo

    ResponderEliminar
  26. Como hago para que solo se vea el texto? O sea, que sea transparente el menu, solo se vea "Página principal" "Sobre el blog" etc, etc.

    ResponderEliminar
    Respuestas
    1. ¡Hola Seiun!

      Cambia el color que tengas en todos los background por transparent ;)

      ¡Feliz miércoles!

      Eliminar
  27. Se que es una entrada "antigua" pero quería agradecerte por el tutorial. Cada vez que que intento editar la plantilla de blogger me doy de golpes contra la pared y en este caso aunque tuve que modificar varias cosas una y otra vez, finalmente pude personalizar mi menú (:
    Un beso.

    ResponderEliminar
    Respuestas
    1. ¡Me alegro mucho, Sofía! Y muchas gracias ;)

      ¡Feliz jueves!

      Eliminar
  28. Hola Celia
    Intenté en primer lugar poner el menú desplegable y la lié bastante, y el caso es que ahora estoy intentando recuperar el diseño que tenía antes, poruqe ahora mi menú está todo solapado en el centro de la cabeza de página y es horrible. No consigo arreglarlo y sinceramente no sé ni que hacer ni que es lo que ya hago mal, voy saltando de página en página buscando soluciones. Si te parece puedes pasarte y mirarlo: pasionytentacion.blogspot.com
    Estoy desesperadaTT
    Igualemente gracias por tus entradas, me has ayudado mil a mejorar mi blog y hacerlo más visible!;)

    ResponderEliminar
    Respuestas
    1. A y por cierto, por si quieres ponerte en contacto conmigo o cualquier cosa: mirecosti@gmail.com

      Eliminar
    2. ¡Hola Mireia!

      Acabo de pasarme por tu blog ¿conseguiste arreglarlo? El bebé apenas me ha dejado tiempo y no he podido ponerme a revisar comentarios con dudas hasta ahora...

      ¡Ya me cuentas!

      Gracias ¡y feliz domingo!

      Eliminar
  29. Gracias por el post! Hace tiempo que quería personalizar el menú horizontal del blog y ahora he encontrado como. Saludos!

    ResponderEliminar
  30. Hola Celia! Muchas gracias por el post!

    Solo tengo una pregunta, como se puede poner que los bordes y la línea divisoria sea transparente?

    Gracias!!

    ResponderEliminar
    Respuestas
    1. ¡Hola Anandi!

      Donde ponga border: 1px solid (código del color), cambia el código de color por transparent y se ponen transparentes :) O cambia el número que hay delante de px por un 0 y así desaparece automáticamente.

      ¡¡Gracias a ti!! Feliz martes :)

      Eliminar
  31. Muy bueno el post, pero no me aparece ningún código de los que tenga que buscar... no sé por qué.
    Cada cosa que intento cambiarle no me aparece el código.

    ResponderEliminar
    Respuestas
    1. ¡Hola Nicole!

      ¿Has hecho click antes de abrir el buscador dentro del código de tu plantilla? Pincha en cualquier parte y luego pulsas Control + F. Es que si abres el buscador sin pinchar en tu plantilla se abre el buscador web, no el de la plantilla.

      ¡Ya me cuentas! Besos :)

      Eliminar
    2. Sisi, eso lo hago. Pero no sólo me pasa cuando intento esto, sino cuando quiero centrar el título o lo que fuese (que también tengo que buscar los códigos HTML), no me aparecen. No sé si es un error de mi plantilla, o qué (es la básica).

      Eliminar
    3. Jo, pues que raro! Me pasas el enlace de tu blog a ver si puedo verlo en un ratito y te digo algo?

      Eliminar
    4. http://nicoleforns.blogspot.com

      Muchísimas gracias por ayudarme, Celia! ☺

      Eliminar
    5. ¡Hola Nicole!

      Pues si que aparece el código en tu plantilla... Prueba a buscar b:skin

      Verás un triangulito tumbado de color negro en el margen de la izquierda. Pincha encima. Lo que te aparece en color azul son los diferentes estilos que dan forma a tu plantilla HTML (lo que se llama CSS).

      Si vas bajando despacio, encontrarás el código Tabs. Una vez lo hayas encontrado puedes personalizarlo siguiendo los pasos del tutorial.

      ¡Ya me cuentas si así lo consigues!

      Gracias a ti ¡y feliz domingo!

      Eliminar
  32. ¡Hola!♥

    Gracias por el post, aunque ya haya pasado el tiempo, me gustaría saber como hacer un menú despegable. Sí me puedes ayudar con ello, venga, gracias. :*

    ResponderEliminar
    Respuestas
    1. ¡Hola Claudia!

      Puedes hacer un menú desplegable siguiendo los pasos de este otro tutorial:

      http://www.elperrodepapel.com/2013/08/menu-horizontal-pestanas-blogger.html

      ¡Gracias a ti!

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

    ResponderEliminar
  34. Hola Celia!! he intentado hacerlo, pero en vista previa no me lo muestra... diría que todo está correcto, pero no sé porque no sale... Esta es la que estoy intentando instalar Parisienne|Tangerine
    Y los códigos están así:
    .tabs-inner .widget li a {
    display: inline-block;

    padding: .6em 1em;

    font: normal normal 20px 'Parisienne|Tangerine' Trebuchet, Verdana, sans-serif;
    color: $(tabs.text.color);

    border-$startSide: $(tabs.border.width) solid $(content.background.color);
    border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);
    }

    Muchas gracias y que ese niño vaya bien!!!

    ResponderEliminar
    Respuestas
    1. Vale, sin problema, todo arreglado jajaja
      Gracias por todo!!

      Eliminar
  35. Hola guapa!

    Te sobraba un tipo de letra aunque supongo que te diste cuenta ya jeje

    Besos!

    ResponderEliminar
  36. Hola Celia, me encantó este tutorial y me sirvió muchísimo. Solo que tengo un problema, pero no es con el menú de páginas, sinó que en el cuerpo de alguna entrada en blogger, no me deja ponerle una fuente predeterminada. No se, he intentado de todo pero no puedo poner fuente predeterminada en mi blog, tal vez podrias ayudarme :(. Gracias por este tutorial.

    ResponderEliminar
    Respuestas
    1. ¡Hola!

      Puedes hacerlo desde el Diseñador de Plantillas:

      Plantilla -> Personalizar -> Avanzado -> Texto de la página

      ¡Saludos!

      Eliminar
  37. Gracias, en serio! Nunca habia antes logrado personalizar mi menu, y ahora con ese tutorial he podido!
    En serio, uds hicieron un milagro!
    Muchas gracias!

    ResponderEliminar
  38. Hola Celia, me ha encantado tu blog, me ha sacado de muchisimas dudas.
    Pero me gustaria saber si es posible hacer mi barra de menu en la parte de arriba alineada hacia la derecha y sin fondos.
    Agradeceria mucho tu ayuda.

    ResponderEliminar
    Respuestas
    1. ¡Hola Maribel!

      Para los fondos es sencillo, solo tienes que poner transparent y desaparece el color :)

      Para alinearla a la derecha tienes que jugar con el margin y el padding, modificando los pixels, hasta que quede donde quieres. En el punto 7 vemos los márgenes, el padding tendrías que añadirlo tú si ves que sigue sin quedar bien.

      ¡Feliz tarde!

      Eliminar
  39. ¡Hola!

    Espero que me puedas ayudar. Tengo todas las páginas del menú de un color pero la pestaña de Página principal no sé cambia de color. ¿Por qué? ¡Cómo puedo hacer que tenga el mismo color que las otras?

    Gracias, ¡un beso!

    ResponderEliminar
    Respuestas
    1. ¡Hola Mireia!

      Fíjate que en el punto 9 (Efecto Hover) tengas los mismos colores que en el punto 8.

      ¡Gracias a ti!

      Eliminar
  40. Hola! tengo una pregunta ya se como ahcer la barra de menu pero lo que no se es como hacer una entrada y guardarla o publicarla segun sucategorio ejemplo si hago un tutoiral como ahgo para guardarka en la categoria tutoriales espero tu respuesta!

    ResponderEliminar
    Respuestas
    1. ¡Hola Lolita!

      Tendrías que usar etiquetas, tal y como explico en esta entrada:

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

      ¡Gracias y buenas noches!

      Eliminar
  41. Madre mia, menudo trabajo de post!
    Enhorabuena, no sabes como nos facilitas la vida.
    A ver si saco un rato y me pongo a ello, que falta le hace a mi blog.
    Gracias por la info!!!!

    ResponderEliminar
  42. Hola Celia,
    Tu blog, una pasada. Jamás había utilizado HTML ni CSS ni nada de nada y con paciencia y siendo meticulosa me ha salido tal y como indicabas.
    Después de todo este proceso me ha surgido un problema:
    Quiero ELIMINAR las LÍNEAS/DIVISIONES que hay en el menú de las páginas. Copié tu último código de tu blog "http://serviciosdisenografico.blogspot.com.es/" para hacer pestañas y subpestallas y que me quedara como el tuyo, con los consiguientes cambios que he ido personalizando.
    Antes para eliminar las líneas lo que hacía era:
    Plantilla/personalizar/avanzado/añadir CSS y copiaba y pegaba en el espacio blanco el siguiente código:

    .tabs-inner .widget li a, .tabs-inner .section:first-child ul, .tabs-inner .widget ul {
    border:none;
    }
    Pero ahora al haber seguido tu proceso, auqnue lo introduzco no me sirve.

    Espero que me puedas echar una mano.
    Muchas gracias!!!

    ResponderEliminar
    Respuestas
    1. ¡Hola, guapa!

      Busca este trozo de código del que hablamos en el paso 8:

      border-$startSide: $(tabs.border.width) solid $(content.background.color);
      border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);
      }

      Y asegúrate de poner 0px en los dos, así:

      border-left: 0px solid #ffffff; /* Borde izquierdo de la celda */
      border-right: 0px solid #dddddd; /* Borde derecho de la celda */

      ¡Ya me cuentas si te ha funcionado!

      Besos ¡y feliz tarde!

      Eliminar
  43. Un tutorial estupendo!!!Mil gracias por compartir.

    ResponderEliminar
  44. Hola mira es q no puedo hacerlo por q blogger cambio las cosas, pueden hacerlo de nuevo ?

    ResponderEliminar
    Respuestas
    1. ¡Hola Lana!

      La plantilla sigue igual :) Lo que cambió hace tiempo es la forma de editar las páginas pero si te fijas al principio del tutorial tienes un enlace a otro post donde explico cuáles son esos cambios ;)

      ¡Espero que te sirva!

      Muchas gracias ¡y buenas noches!

      Eliminar
  45. Qué interesante me parece tu blog, super útil para los que no tenemos ni idea de programación! He intentando cambiar la apariencia de mis página pero me quedo atascada en el punto 4, no soy capaz de que me salga el código para poder modificarlo ¿sabes dónde está el error? Gracias :)

    ResponderEliminar
  46. ¡Buah! Uno de los tutoriales más útiles de mi vida. En serio, llevaba muchísimo tiempo buscando algo así :) ¡Muchísimas gracias y espero seguir viendo entradas tan buenas como esta por aquí!

    ¡Un beso!
    Paco M.

    ResponderEliminar
  47. Gracias por este tutorial tan bien explicado pero en mi caso quiero bajar el título de los menus y centrarlos o que no se repitan cuando estoy dentro de la pestaña. Llevo semanas con esto y no hay manera, sabe alguien de algún codigo css para modificarlo?¿

    Gracias

    ResponderEliminar
  48. Hola:
    Me gusto mucho tu tutorial porque la explicación esta bien realizada y el tamaño de letra cuenta mucho, por eso te sigo.
    !Gracias!

    Con cariño CHC n.~<3

    ResponderEliminar
  49. Felicidades Celia por tu magnifico artículo, me parece muy bien tu técnica además me ha encantado tu explicación. Bueno les invito a mi WEB seria un placer si le echaran un vistazo

    http://diel.es

    Gracias por tan excelente aporte!!

    ResponderEliminar
  50. ¿Como se hace para que cuando se pase el ratón por encima se despliegen? Como tienes tu en este blog

    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.