PERSONALIZAR MENU DE PAGINAS EN BLOGGER

Personalizar menú de páginas y pestañas en Blogger tutorial

 Esta clase es muy útil y sencilla y te va a encantar. Vamos a personalizar menú de páginas en Blogger.

Además te comparto un truco muy útil de diseño.  

Llega el momento de personalizar nuestro menú de páginas, para que quede molón, limpio, claro, atractivo. Ten en cuenta por favor que el menú debe leerse a la perfección, ser limpio y claro. Es una de las partes más importantes de cualquier web.

Como siempre digo, en cosa de diseño es mejor algo sencillo pero elegante y ya sabes que para los títulos del sidebar he elegido el fondo Washi-Tape , y para el menú he diseñado (usando el washi de los títulos de sidebar) un WashiTape digital más largo y me ha encantado como ha quedado de fondo de menú. Me quedo con ese.   

Lo comparto para que puedas descargarlo y usarlo y además te regalo un truco para cambiarle el color y que así puedas conseguir el color de tu paleta de colores.  

Antes de usar este recurso piensa si la Identidad de tu Marca concuerda con este gráfico. Es un gráfico irregular, con efecto rasgado ¿Está alineado eso con tu marca personal? Si es que no, usa otro recurso o elige otro diseño. Tu comunicación será mucho más coherente.

Truco para cambiar color de cualquier background o imagen de fondo  

Podría ponerme a diseñar varios colores para que te los descargaras pero tendría que hacer un montonazo para que alguno te pudiera servir, así que ¿Qué mejor que consigas tú misma/o el color que buscas?  

Si quieres descargarlo solo tienes que compartir el post en alguna de tus redes a través del siguiente botón. Así me ayudarás a mi y yo a ti, es genial ¿Verdad? Prometo tutorial para que puedas añadir este recurso en tu blog 🙂  

Una vez que tengamos nuestro diseño pensado y preparado (en el caso de la imagen) para nuestro menú de páginas, vamos a editarlo y copiarlo en nuestra plantilla. Para esto simplemente te facilito los códigos de diferentes estilos para que puedas colocar el que quieras.Al final del post de explico lo que puedes modificar.  

** Selecciona el código al completo(está en un cuadro de texto extensible) y copia el que elijas en tu plantilla (explico dónde se copia después de todos los códigos y opciones).

Fondo del menú de páginas con Washi-tape

Fondo del menú de páginas con Washi-tape
.PageList {
text-align:center !important;
}
.PageList li {
display:inline !important; 
float:none !important;
}
.tabs-inner .section:first-child {
margin: -10px 0px 30px 0px;
}
.tabs-inner .section:first-child ul {
border-top: 0px solid #000;
border-bottom: 0px dotted #000;
}
.tabs-inner .widget ul {
  background-image: url(https://1.bp.blogspot.com/-Xj8sRQXmTOg/V0_lihNaDKI/AAAAAAAAAEQ/m87XGFP5sJYCBp90iSu5NFgkWpJsUY0DwCLcB/s1600/fondo-menu-blogger-washitape.png);
  height: 60px;
margin-bottom: 0;
  margin-top: 0;
  margin-left: -30px;
  margin-right: -30px;
}
.tabs-inner .widget li a {
  display: inline-block;
padding: 26px 20px 15px 22px;
  font:normal bold 12px Arial;
text-transform: uppercase;
letter-spacing: 3px;
  color: #fff;
  border-$startSide: 0px solid #fff;
  border-$endSide: 0px solid #fff;
}
.tabs-inner .widget li:first-child a {
  border-$startSide: none;
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  color: #666;
  background-color: transparent;
  text-decoration: none;
}         

Selecciona el texto y copialo.

Fondo del menú de páginas cuadrado

Fondo del menú de páginas cuadrado
.PageList {
text-align:center !important;
}
.PageList li {
display:inline !important; 
float:none !important;
}
.tabs-inner .section:first-child {
margin: -10px 0px 30px 0px; 
}
.tabs-inner .section:first-child ul {
border-top: 0px solid #000;
border-bottom: 0px dotted #000;
}
.tabs-inner .widget ul {
background: #8fb59e;
  height: 50px;
margin-bottom: 0;
  margin-top: 0;
  margin-left: -30px;
  margin-right: -30px;
}
.tabs-inner .widget li a {
  display: inline-block;
padding: 20px;
  font:normal bold 12px Arial;
text-transform: uppercase;
letter-spacing: 3px;
  color: #fff;
  border-$startSide: 0px solid #fff;
  border-$endSide: 0px solid #fff;
}
.tabs-inner .widget li:first-child a {
  border-$startSide: none;
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  color: #666;
  background-color: transparent;
  text-decoration: none;
}

Fondo del menú de páginas cuadrado con bordes redondeados

Fondo del menú de páginas cuadrado con bordes redondeados
.PageList {
text-align:center !important;
}
.PageList li {
display:inline !important; 
float:none !important;
}
.tabs-inner .section:first-child {
margin: -10px 0px 30px 0px; /*posición*/
}
.tabs-inner .section:first-child ul {
border-top: 0px solid #000;
border-bottom: 0px dotted #000;
}
.tabs-inner .widget ul {
background: #8fb59e;
border-radius: 50px;
  height: 50px;
margin-bottom: 0;
  margin-top: 0;
  margin-left: -30px;
  margin-right: -30px;
}
.tabs-inner .widget li a {
  display: inline-block;
padding: 20px;
  font:normal bold 12px Arial;
text-transform: uppercase;
letter-spacing: 3px;
  color: #fff;
  border-$startSide: 0px solid #fff;
  border-$endSide: 0px solid #fff;
}
.tabs-inner .widget li:first-child a {
  border-$startSide: none;
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  color: #666;
  background-color: transparent;
  text-decoration: none;
}

Menú de páginas con línea arriba y abajo

Menú blogger con línea arriba y abajo:
.PageList {
text-align:center !important;
}
.PageList li {
display:inline !important; 
float:none !important;
}
.tabs-inner .section:first-child {
margin: -10px 0px 30px 0px; 
}
.tabs-inner .section:first-child ul {
border-top: 2px solid #8fb59e;
border-bottom: 2px solid #8fb59e;
}
.tabs-inner .widget ul {
  height: 50px;
margin-bottom: 0;
  margin-top: 0;
  margin-left: -30px;
  margin-right: -30px;
}
.tabs-inner .widget li a {
  display: inline-block;
padding: 20px;
  font:normal bold 12px Arial;
text-transform: uppercase;
letter-spacing: 3px;
  color: #8fb59e;
  border-$startSide: 0px solid #fff;
  border-$endSide: 0px solid #fff;
}
.tabs-inner .widget li:first-child a {
  border-$startSide: none;
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  color: #666;
  background-color: transparent;
  text-decoration: none;
}

Menú de páginas con línea arriba y puntitos abajo

Menú de páginas con línea arriba y puntitos abajo:
.PageList {
text-align:center !important;
}
.PageList li {
display:inline !important; 
float:none !important;
}
.tabs-inner .section:first-child {
margin: -10px 0px 30px 0px; /*posición*/
}
.tabs-inner .section:first-child ul {
border-top: 2px solid #8fb59e;/*bordes del menú*/
border-bottom: 2px dotted #8fb59e;/*bordes del menú*/
}
.tabs-inner .widget ul {
  height: 50px;
margin-bottom: 0;
  margin-top: 0;
  margin-left: -30px;
  margin-right: -30px;
}
.tabs-inner .widget li a {
  display: inline-block;
padding: 20px;/*espacio entre pestañas*/
  font:normal bold 12px Arial;
text-transform: uppercase;
letter-spacing: 3px;
  color: #8fb59e;
  border-$startSide: 0px solid #fff;
  border-$endSide: 0px solid #fff;
}
.tabs-inner .widget li:first-child a {
  border-$startSide: none;
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  color: #666;
  background-color: transparent;
  text-decoration: none;
}

Menú de páginas cuadrado con selección en blanco

Menú de páginas cuadrado con selección en blanco
.PageList {
text-align:center !important;
}
.PageList li {
display:inline !important; 
float:none !important;
}
.tabs-inner .section:first-child {
margin: -10px 0px 30px 0px; /*posición*/
}
.tabs-inner .section:first-child ul {
border-top: 0px solid #000;/*bordes del menú*/
border-bottom: 0px dotted #000;/*bordes del menú*/
}
.tabs-inner .widget ul {
background: #8fb59e;
  height: 50px;
margin-bottom: 0;
  margin-top: 0;
  margin-left: -30px;
  margin-right: -30px;
}
.tabs-inner .widget li a {
  display: inline-block;
padding: 20px;/*espacio entre pestañas*/
  font:normal bold 12px Arial;
text-transform: uppercase;
letter-spacing: 3px;
  color: #fff;
  border-$startSide: 0px solid #fff;
  border-$endSide: 0px solid #fff;
}
.tabs-inner .widget li:first-child a {
  border-$startSide: none;
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  color: #8fb59e;
  background-color: #fff;
  text-decoration: none;
}

 ¿Qué tal si lo personalizamos un poquito más a nuestro gusto? 

  • Personalizar los códigos: En las clases anteriores como en la de personalizar título de gadgets, hemos practicado la modificación básica de algunos códigos, para acercarnos al efecto deseado. De todas formas te dejo una explicación de todos los significados para que puedas adaptarlo.
.PageList {
text-align:center !important;
}
.PageList li {
display:inline !important; 
float:none !important;
}
  • Esta parte del código, lo llevan todos, es para centrar las pestañas. Si lo quieres a un margen basta con cambiar center por right o left, según quieras derecha o izquierda, respectivamente.
.tabs-inner .section:first-child {
margin: -10px 0px 30px 0px; /*posición del menú*/
}
.tabs-inner .section:first-child ul {
border-top: 0px solid #000;/*bordes del menú arriba*/
border-bottom: 0px dotted #000;/*bordes del menú abajo*/
}
  • En esta parte podemos cambiar todo lo que queramos para que se adapte a nuestra identidad de marca. Cambiar el color, que ahora está en negro #000 o el tamaño de la línea, en este código con 0px.
    • Si queremos que la línea sea punteada: dotted
    • Si queremos que sea a rayas: dashed
    • Ahora está en solid que es una línea normal, arriba top y punteada abajo bottom.
    • Si quieres que también tenga línea a los lados usa border-left y border-right con el resto de código igual.
.tabs-inner .widget ul {
background: #8fb59e; /*fondo del menú*/
  height: 50px; /* ancho del menú*/
margin-bottom: 0; /* margen abajo*/
  margin-top: 0; /* margen arriba*/
  margin-left: -30px; /* margen izquierda*/
  margin-right: -30px; /* margen derecha*/
}
.tabs-inner .widget li a {
  display: inline-block;
padding: 20px;/*espacio entre pestañas*/
  font:normal bold 12px Arial; /* tipo de letra*/
text-transform: uppercase; /*mayúsculas, si no lo quieres elimína esta línea*/
letter-spacing: 3px; /* espacio entre letras*/
  color: #fff; /* color del texto*/
  border-$startSide: 0px solid #fff; /* borde en la pestaña, así no hay*/
  border-$endSide: 0px solid #fff; /* borde en la pestaña, así no hay*/
}
.tabs-inner .widget li:first-child a {
  border-$startSide: none;  /* borde en la pestaña, así no hay*/
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  color: #8fb59e; /*Color cuando pasamos con el ratón*/
  background-color: #fff; /* fondo de la pestaña cuando pasamos con el ratón*/
  text-decoration: none; /* sin subrayado de enlace*/
}

En todo el resto ya te lo dejo señalado en cada código, cambia al gusto.

Podéis cambiar todos los códigos de color e ir viendo los cambios para visualizar cómo os gusta más, pero si no controláis mucho de código os aconsejo que solamente uséis uno de los códigos que he compartido y cambies donde he puesto  #8fb59e por el color que elijas de tu paleta de colores, es super fácil, no me digas que no! 😉

De todas formas cualquier dudita ya sabes, me lo cuentas en los comentarios de aquí abajo 🙂

Insertar código de personalización de menú de páginas en plantilla HTML de Blogger

Ahora vamos a colocar el código en nuestra plantilla para que nuestro menú quede así de bonito.    

  • Vamos a Tema
  • Hacemos una Copia de Seguridad en el menú de puntitos a la derecha
  • Le damos a Editar HTML en el mismo menú de puntitos a la derecha
  • Buscamos en plantilla (si no sabes cómo mira este vídeo) el siguiente código:
.tabs-inner .section
  • Después borramos todo lo que hay desde ese primer código hasta este otro:
.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;
}
  • Este anterior también se elimina.
  •  En su lugar pegamos el código que hayamos elegido de los anteriores que os he compartido.
  • Guardamos y Listo!

Para que el proceso te resulte mucho más fácil te dejo el vídeo tutorial 🙂

Vídeo tutorial paso a paso para personalizar el menú de páginas

¿Qué te ha parecido? ¿Fácil o difícil? Podemos adaptarlo todo a  nuestro estilo de blog con unos pocos detalles y crear un menú de páginas a nuestro estilo. 

Si tienes cualquier duda no dudes en comentar aquí debajo. Además me ayudaría muchísimo y me haría muy feliz que le dieras like al vídeo y compartieras en post en tus redes para poder seguir currándome más posts de utilidad y creando más cursos interesantes 🙂

Comparte

CONSIGUE

LA VIDA QUE DESEAS

GRACIAS A UN NEGOCIO ONLINE RENTABLE

Disfruta de mi curso gratuito “Cómo tener un Negocio Online Rentable no solo económicamente”, en el que comparto las áreas más importantes a trabajar para conseguir la vida que deseas con tu Emprendimiento Online.

Interacciones con los lectores

32 comentarios

  1. Two Forks

    Hola, estoy siguiendo tu blog y no veas lo útil que me están siendo tus vídeos y tus post, ¡¡¡increíbles!!! estoy modificando las pestañas y quiero poner el menu con la raya arriba y los puntos abajo, pero si cambio el color me desaparecen la raya y los puntos. Obviamente algo estoy haciendo mal, ¿me podrías ayudar?

    Un saludo

  2. La Aventura del Dragón

    Hola Mónica, ¿cómo puedo incluir un buscador en el menú y centrado junto al resto de pestañas?. Gracias

  3. Berenjena

    Hola! Me encanta el tutorial y está clarísimo, y con el video se ve súper sencillo. Sin embargo no lo puedo llevar a cabo porque no encuentro lo de ".tabs-inner .section" para insertar el código, ni con ctrl-F ni buscando entre los códigos. Alguna idea de lo que me puede estar pasando? Gracias!

  4. Anónimo

    hola! una pregunta, como se hace para que en el menú de paginas pueda ser como el tuyo de "CURSO GRATIS" o "RECURSOS", en el que cuando aprietas la flechita, salgan otras opciones? Lo siento, no me sé explicar bien. Gracias

  5. Gnirvin

    Mucha gracias, me a servido mucho tu vídeo un sigo trabajando en mi blog yo trabajo mi tema desde visual studio code y tede mi blog aun lo trabajo y si tienes algun video de una galerio para poner fotos asi como las pajinas de peliculas que van pasando unas imajenes seria mucho tu ayuda :*

  6. Betsabé

    El tutorial es muy didáctico, se entiende todo, y el paso a paso es muy útil, es un contenido que no se encuentra en otras páginas.
    Desde mi cuarentena por ser del grupo de riesgo de salud, saludos desde Santiago de Chile.

  7. Rafael

    Buenas, me gustaría que los nombres de las distintas páginas de mi blog aparezcan de distinto, o al menos un grupo de ellas. Quisiera agrupar por color las pestañas que se refieren a un mismo tema.

    • monicalemos

      Hola Rafa, eso requiere modificación de código más profunda. Espero que lo consigas, o bien inviertas en profesionales que te ayuden.
      Un saludo

  8. Eva

    Hola Mónica, intento poner el fondo del menú cuadrado con selección en blanco y al incluirlo en la plantilla HTML me sale este error:

    “Declaración de variable no válida en máscara de página: La variable se utiliza, pero no está definida. Información: tabs.text.color
    Error 400”

    ¿Qué puedo hacer?

Deja tu comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *