Personalizar el menú de páginas en Blogger

10.11.14

Aquí llega el último post de la serie de las páginas estáticas.

Ahora ya podrás decorar el menú de páginas a tu gusto y dejar a los otros que las utilicen!

¿A qué esperas?



Yo te recomiendo que primero de todo hagas un pequeño dibujo a mano, de cómo quieres que sea tu menú. O simplemente te lo imaginas en tu cabeza.

Pero no empieces a cambiarlo todo sin pensar, que hay muchas posibilidades distintas.

Que empiece el festival del menú de páginas estáticas!


Centrar menú o alinear a la derecha


Si queremos centrar el menú, justo antes de


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




debes pegar este código



  /* Centrar menú páginas
  ----------------------------------------------- */

  .PageList {text-align:center !important;}
  .PageList li {display:inline !important; float:none !important;}





Y te quedará así


En el caso de que quieras que esté alineado a la derecha
  • en vez de text-align:center pones text-align:right


Tipos de bordes del menú 


Buscas el siguiente código en código HTML de tu blog


  .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); 
  }



Ahora te enseño a modificarlo.

Hay 4 tipos diferentes de bordes en el menú:

  • border-top --> el borde de arriba
  • border-left --> el borde de la izquierda
  • border-right --> el borde de la derecha
  • border-bottom --> el borde de abajo

Puedes personalizar cada uno de ellos variando los siguientes valores

  • el tamaño del borde en píxeles
  • el tipo de borde que quieres: dotted, dashed, solid, double, groove
  • el color del borde. Puedes añadir el que tu quieras, en código HEX siempre.

Vamos  a ver algunos ejemplos.


Simplemente tienes que sustituir el código de un poco más arriba, el que te he dicho que buscaras, por el que más te interese de los siguientes.


  .tabs-inner .section:first-child ul { 
    border-top: 2px solid #4bceb4; 
    border-left: 2px solid #4bceb4; 
    border-right: 2px solid #4bceb4; 
    border-bottom: 2px solid #4bceb4; 
  } 





O también puedes poner sólo el borde de arriba y de abajo y que sea más grueso


  .tabs-inner .section:first-child ul { 
    border-top: 5px solid #4bceb4; 
    border-bottom: 5px solid #4bceb4; 
  }






Cambiando el estilo del borde puedes tener


  .tabs-inner .section:first-child ul { 
    border-top: 5px dotted #4bceb4;  
    border-bottom: 5px dotted #4bceb4; 
  }






  .tabs-inner .section:first-child ul {
    border-top: 5px dashed #4bceb4;
    border-bottom: 5px dashed #4bceb4;
  }









  .tabs-inner .section:first-child ul { 
    border-top: 5px double #4bceb4;  
    border-bottom: 5px double #4bceb4; 
  }





Aquí es el estilo groove, que hace una combinación del color que le has dado con uno de la misma gama. El efecto es muy chulo y no está muy visto, la verdad.



  .tabs-inner .section:first-child ul { 
    border-top: 5px groove #4bceb4; 
    border-left: 5px groove #4bceb4;   
    border-right: 5px groove #4bceb4; 
    border-bottom: 5px groove #4bceb4; 
  }






Laterales del borde


El final del borde por defecto es rectangular, pero también lo puedes modificar.

Si quieres que sea redondo, sólo tienes que modificar el radio del borde


  .tabs-inner .section:first-child ul { 
    border-radius: 20px; 
    border-top: 5px solid #4bceb4; 
    border-bottom: 5px solid #4bceb4; 
  }




O también que acabe en punta



  .tabs-inner .section:first-child ul { 
    border-top: 5px solid #4bceb4; 
    border-radius:200px / 9px; 
    border-bottom: 5px solid #4bceb4; 
  }





Personalizar las pestañas del menú


Busca en tu código


  .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); 
 }



Si te fijas bien en el menú que tienes hasta hora, hay unas lineas que separan los apartados del menú.

Com no quedan muy bien (si añades color de fondo se ven muy marcadas) las vamos a quitar.

Además aquí puedes añadir

  • color el color del texto del menú. Escoge tu color hex aquí
  • border-left borde izquierdo de la pestaña
  • padding ancho y alto de la pestaña de las pestaña. El primer valor corresponde a los márgenes de arriba y abajo y el segundo, de la derecha y la izquierda.
Te enseño un par de ejemplos



  .tabs-inner .widget li a {
     display: inline-block;
     padding: 10px 20px; /* Ancho de las pestañas */
     color: #000000; /* color del texto */
     border-left: 3px solid #000000;
  }








  .tabs-inner .widget li a { 
    display: inline-block; 
    padding: 20px 40px; 
    border-left: 3px solid #000000; 
  }





Mover el menú y color de fondo


Busca el 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 sustituyes por este otro



  .tabs-inner .widget ul { 
    background: #ebb5e0 repeat-x scroll 0 -800px; 
    margin-top: 30px; 
    margin-bottom: 30px; 
    margin-left: 0px;  
    margin-right: 0px; 
  }



Te quedará así


Y donde

  • background es el color de fondo de la pestaña
  • margin-top es el espacio que queda entre el menú y la cabecera.
  • margin-bottom es el espacio que queda entre el menú y el título del post
  • margin-left es el espacio que queda a la derecha del menú (por si te interesa moverlo)
  • margin-right es el espacio que queda a la izquierda del menú (por si te interesa moverlo)
Puedes modificar cada uno de estos valores, hasta que el menú de páginas estáticas te parezca estupendo.


Cuando pasas el ratón por encima


También tienes la posibilidad de personalizar el efecto hover (cuando le pasas el ratón por encima)

Busca este código


  .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; 
  }



Aquí puedes modificar

  • color que es el color del texto
  • background que es el color del fondo de la pestaña del menú

Por ejemplo



  .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
    color: #ffffff; 
    background-color: #de87cd; 
    text-decoration: none; 
  }









Espero que con todas estas modificaciones ahora ya puedas personalizar el menú de páginas estáticas a tu gusto.


Si te surge alguna duda me lo dices en los comentarios y te ayudaré hasta que te quede perfecto.


Laura

¿Te ha gustado lo que has leído?
Muchas gracias por compartirlo en tus redes sociales!
Tus contactos y yo te lo agradeceremos! :-)

¿Quieres contenido exclusivo para mejorar tu blog?
Suscríbete y recibirás AHORA la guía para dominar Blogger HOY!
Tu blog no pasará inadvertido.
Dejará huella.