Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
TUTORIAL BLOGGER: PERSONALIZAR EL MENÚ DE PÁGINAS
#1
Muchos de vosotros, usáis el menú de páginas que ofrece blogger para organizar el contenido de vuestro blog. El estilo que ofrece este gadget es bien feo y carece de personalidad verdad? Pues hoy vamos a aprender a personalizarlo y ponerlo bien bonito!

Os recuerdo, que en el blog hemos compartido un montón de tutoriales para organizar el contenido de nuestro blog, vivan los menús:






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



[Imagen: buscar-tabs-inner.gif]
[Imagen: pin-it.png]




Borramos todo el código que está en esa parte del código, de manera que quedará así:



[Imagen: eliminar-css-tabs.gif]
[Imagen: pin-it.png]




*NOTA: si ya teníais algún estilo para las páginas, debéis borrarlo también Guiño

*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*/



Podéis ver como queda el menú aquí:



DEMO


Espero que el tuto de hoy os sea muy práctico Guiño


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  Solucionado: Ayuda! Dominio Blogger NixonJ1 17 1,152 23-01-2017, 07:35 PM
Último mensaje: Vicen
  Ayuda! Dominio Blogger NixonJ1 1 402 22-01-2017, 04:19 PM
Último mensaje: Vicen
Pregunta Blogger Vs Wordpress oswaldo 14 1,061 02-01-2017, 11:35 PM
Último mensaje: onspot
  Creadores de paginas pedrovillarraga 25 2,030 26-03-2016, 09:57 PM
Último mensaje: uzumakysan
  TUTORIAL BLOGGER: ENMARCAR EL BLOG inguzca 0 1,128 07-02-2016, 09:04 PM
Último mensaje: inguzca
  DOMINGOS MOLONES: COLABORACIÓN CON VELVET CAT (FREEBIES + TUTORIAL BLOGGER) inguzca 0 409 07-02-2016, 09:03 PM
Último mensaje: inguzca
  FREEBIES: BOTONES DE SUBIR PARA NUESTRO BLOG (Y TUTORIAL BLOGGER) inguzca 0 576 07-02-2016, 08:58 PM
Último mensaje: inguzca
  TUTORIAL BLOGGER: CÓMO HACER UN MENÚ POR CATEGORÍAS inguzca 0 388 07-02-2016, 08:55 PM
Último mensaje: inguzca
  TUTORIAL BLOGGER: CÓMO PONER UN BUSCADOR EN LA BARRA SUPERIOR inguzca 0 883 07-02-2016, 08:53 PM
Último mensaje: inguzca
  TUTORIAL BLOGGER: CÓMO PONER UNA BARRA SUPERIOR CON MENÚ DESPLEGABLE E ICONOS SOCIALE inguzca 0 2,274 07-02-2016, 08:52 PM
Último mensaje: inguzca



Usuarios navegando en este tema: 1 invitado(s)