Como centrar y personalizar el menu de paginas de blogger

Hoy te traigo un tutorial blogger para personalizar el menú de paginas. Si acabas de abrir un blog o si todavía no has cambiado nunca el diseño, la imagen que tendrás será un poco fea y sosa, por ello vamos a personalizar el menú de paginas blogger de forma sencilla y fácil para todas.

Lo primero que os recomiendo antes de empezar es centrar el menú de paginas, ya que a los lados no suele quedar especialmente bien.


1. Para centrar el menú de paginas de blogger vamos a blogger/plantilla/edición html y buscamos 




/* Tabs

----------------------------------------------- */

Puedes buscar con Cntrol + F para que te sea más fácil encontrarlo.

Y justo antes pegamos lo siguiente:

/* Menú de paginas blogger centrado
----------------------------------------------- */

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

Guardamos y listo.


Ahora que tenemos el menú de paginas de blogger centrado vamos a personalizarlo.

Como poner bordes y personalizar el menú de paginas de blogger:


1. Lo primero que tenemos que hacer es ir a blogger/plantilla/edición html y buscar el siguiente código:

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


Si no eres capaz de encontrarlo entero busca solo una linea hasta que lo localices.

2. Y ahora lo vamos a sustituir por uno de estos que os guste, si te gusta esta imagen:


personalizar el borde del menu de paginas blogger

Sustituimos el codigo anterior por este:

.tabs-inner .section:first-child ul { 

border-top: 2px solid #FA58F4; 

border-left: 2px solid #FA58F4; 

border-right: 2px solid #FA58F4; 
border-bottom: 2px solid #FA58F4; 
}

Si queremos este borde:
personalizar el borde del menu de paginas blogger
Lo sustituimos por este:

.tabs-inner .section:first-child ul { 

border-top: 3px dotted #FA58F4; 



border-left: 3px dotted #FA58F4; 
border-right: 3px dotted #FA58F4; 
border-bottom: 3px dotted #FA58F4; 
}


Si te gusta más este otro borde:
personalizar el borde del menu de paginas blogger
Sustituye el código por este:




.tabs-inner .section:first-child ul { 

border-top: 4px groove #FA58F4; 
border-left: 4px groove #FA58F4 
border-right: 4px groove #FA58F4
border-bottom: 4px groove #FA58F4 
}


Si la que te gusta es esta:

personalizar el borde del menu de paginas blogger


Sustituye el código por:
.tabs-inner .section:first-child ul { 
    border-radius: 18px; 
    border-top: 4px solid #FA58F4; 
    border-bottom: 4px solid #FA58F4; 
  }

Si prefieres el bode con puntitos:
personalizar el borde del menu de paginas blogger

Tienes que poner este código:

.tabs-inner .section:first-child ul { 
    border-radius: 18px; 
    border-top: 4px dotted #FA58F4; 
    border-bottom: 4px dotted #FA58F4; 
  }

Si lo quieres con rayitas como el mio, pues este. Aqui no lo hago en el otro blog y os subo captura porque ya lo podeis ver en este mismo blog, y cansa un poquito tener que hacer esto mil veces...
personalizar el borde del menu de paginas blogger


Tenemos que sustituir por este:

.tabs-inner .section:first-child ul { 

border-top: 2px double #FA58F4; 

border-bottom: 2px double #FA58F4; 
}


Y por hoy terminamos con los códigos, ahora vamos a ver como personalizar el borde a tu gusto, la base la tienes con los códigos de arriba, pero en este tutorial blogger algo importante son los colores:

Es decir yo os he puesto todos lo bordes con el color rosa #FA58F4; si no te gusta este puedes modificarlo por cualquier color que encontrarás en Colores html.

Si por ejemplo os gusta uno de estos bordes pero yo os lo he puesto con una linea y vosotras lo quereis con puntitos es tan facil como sustituir la palabra que no os gusta por la que si, teniendo en cuenta que:

dotted = Puntitos
 dashed = Lineas pequeñitas
 solid = Una linea normal
 double = Una linea doble
 groove = Como con un doble borde

Y si quieres poner o quitar algún borde:


border-top = es el borde de arriba

border-left = es el borde de la izquierda

border-right = es el borde de la derecha

border-bottom = es el borde de abajo

Y si quieres un borde más grueso o menos tienes que ponerle o quitarle números donde pone px.

Por ultimo tener en cuenta que los bordes quedan mucho mejor de como los veis aquí en las imagenes, ya que  para que no se corten las imágenes están reducidas. Y luego al poner las letras bonitas os quedará todavía mucho mejor.

Y ya lo voy a dejar por hoy, porque el post se esta haciendo eterno, pero si te ha quedado alguna duda, déjame la duda en los comentarios y te la resuelvo.

¿Que te ha parecido este tutorial blogger? ¿Sabias centrar y personalizar el menu de paginas blogger?

Y si quieres vivir de tu blog, ya estas tardando en hacerte con este curso, que es esencial para que tu blog vaya bien >>> CURSO PARA BLOGGER




melyssa

8 comentarios: