ELIMINAR LO QUE NOS SOBRA
Si el menú de páginas de blogger tiene esta apariencia, es porque por defecto nos viene un estilo en la plantilla. Vamos a eliminarlo para luego ponerlo bonito. Vamos a Plantilla → Editar HTML y buscamos esto:
.tabs-inner
(No se os olvide incluir el punto!) La primera búsqueda no nos interesa, es la segunda. Veremos esto:
Borramos todo el código que está en esa parte del código, de manera que quedará así:
*NOTA: si ya teníais algún estilo para las páginas, debéis borrarlo también ;)
*NOTA 2: Todo lo que necesitas saber sobre el código CSS de tu plantilla → en esta entrada
AÑADIR EL CSS
Ahora, en el lugar del código que hemos borrado vamos a pegar el que os dejo a continuación. También podemos hacerlo desde Plantilla → Personalizar → Avanzado → Añadir CSS para ver cómo quedan las modificaciones.
.tabs-inner .section {
margin: -10px 0px 30px 0px; /*Para orientarlo*/
}
.tabs-inner .widget ul {
margin: 0 auto;
text-align: center; /*Para que quede centrado (cambiar por left si lo queréis a la izquierda, o rigth si es a la derecha)*/
border:1px solid #333333; /*Estilo del Borde del menú*/
background:#eeeeee; /*Fondo del menú*/
}
.tabs-inner .widget li {
float:none;
display:inline-block;
}
.tabs-inner .widget li a {
display: inline-block;
padding: 10px 20px; /*Para el espaciado de las pestañas*/
font: normal normal 12px Oswald; /*Tamaño y tipografía de las pestañas*/
color: #000000; /*Color del texto de las pestañas*/
text-transform:uppercase; /*Para que esté en mayúsculas, sino borrad esta línea*/
letter-spacing:2px; /*Espaciado entre caracteres, sino borrad esta línea*/
}
.tabs-inner .widget li a:hover {
color:#ffffff; /*Color del texto de las pestañas al pasar el ratón por encima*/
}
Orientar el menú
Con el primer bloque de código, conseguimos que el menú quede ubicado como nos apetece. Para ello, hacemos que exista una separación entre el menú y la cabecera; y el menú y el resto del cuerpo del blog.
En color moradito, encontramos el margen superior, esto es la distancia del menú con la cabecera. Si ponemos un valor negativo se acercará a la cabecera y si es positivo se distanciará.
De igual manera, en color verde, tenemos el margen inferior, es la distancia entre el menú y el resto del blog. También podemos asignarle un valor negativo para estrechar la separación entre ambos, o un valor positivo para que haya más espacio.
De colores azul y naranja tenemos los márgenes derecho e izquierdo. No debemos cambiarlos para que el menú quede centrado.
Resto de modificaciones
Como siempre, os he dejado de color lo que podéis modificar. Como siempre destaco el borde del menú que sabéis que podéis desglosarlo para sólo tener borde en alguna de las partes:
border-top: 1px solid #333333; /*Borde superior*/
border-bottom: 1px solid #333333; /*Borde inferior*/
border-left: 1px solid #333333; /*Borde izquierdo*/
border-bottom: 1px solid #333333; /*Borde derecho*/
No hay comentarios: