TUTORIAL BLOGGER | MODIFICA LOS LINKS DE NAVEGACIÓN

Desde que me inicié en el mundillo de Blogger he ido aprendiendo un montón de cosas, sobre todo de HTML y CSS. Yo no tenía ni idea de nada, solo veía muchos códigos y demasiadas cosas que no entendía, pero poco a poco a base de práctica y de querer mejorar la apariencia de mi blog, me he vuelto casi una adicta del HTML, cada día estoy trasteando y probando cosas nuevas. Algunas funcionan y otras no, porque algo tan simple como un punto te puede dar un gran dolor de cabeza. Cuando empecé el blog me di cuenta de que si alguien me hubiera explicado muchas de las cosas que ahora sé, me habría servido de mucha ayuda, por eso quiero compartir algunas de esas cosas que os pueden ayudar también a vosotros y a que vuestros blogs estén más bonitos.

Bueno y después de este mini discurso, os explico, el tutorial de hoy sirve para modificar y mejorar los links de navegación, esos que están justo debajo que sirven para ir de una página a otra, existen tutoriales que explican como cambiarlos por imágenes, pero yo no os quiero enseñar eso, yo os voy a explicar como "maquillar" un poco los que ya están. Si queréis haceros una idea de como quedaría podéis mirar en mi blog. ¡Vamos allá!

PASO 1 Antes de empezar haced una copia de seguridad por si acaso.

PASO 2 Lo primero que debéis hacer es ir a PLANTILLA » PERSONALIZAR » AVANZADO » AÑADIR CSS

PASO 3 Una vez allí copiad los siguientes códigos:

.blog-pager{
background:transparent;    /*  Elimina el fondo (En la Plantilla Simple)  */
text-transform:uppercase;   /*    Transforma el texto en mayúsculas  */
font-family: 'Futura';  /*      Especificamos una fuente  */
padding: 10px 10px 10px 10px;  /*  Le añadimos relleno  */
letter-spacing: 1px;   /*  Añade una separación entre letras (que siempre queda mejor)  */
font-size: 10px;     /*  Especificamos el tamaño de fuente  */
}

.blog-pager a{
background:#ffffff;  /*  Añadimos un fondo al enlace  */
color: #000000;  /*  Especificamos un color para el enlace  */
}

.blog-pager a:hover{
background:#000000;  /*  Añadimos un fondo diferente al enlace cuando pasa el ratón  */
color: #ffffff;   /*  Especificamos un color para que cambie el enlace al pasar el ratón  */
text-decoration:none;  /* Elimina el subrayado del enlace al pasar el ratón  */
}

Si quieres puedes añadirle bordes copiando los siguientes códigos para .blog-pager a y .blog-pager a:hover en lugar de los anteriores, eso sí copiando el primero (.blog-pager).

.blog-pager a{
background:#ffffff;  /*  Añadimos un fondo al enlace  */
border: 3px solid #000000;  /*  Añadimos un borde al enlace  */
color: #000000;  /*  Especificamos un color para el enlace  */
}

.blog-pager a:hover{
background:#000000;  /*  Añadimos un fondo diferente al enlace al pasar el ratón por encima  */
border: 3 px solid #666666;  /*  Añadimos un borde diferente al enlace al pasar el ratón  */
color: #ffffff;   /*  Especificamos un color para que cambie el enlace al pasar el ratón  */
text-decoration:none;   /* Elimina el subrayado del enlace al pasar el ratón  */
}

Podéis cambiar los colores a vuestro gusto, por ejemplo, yo he puesto el fondo de los enlaces de color blanco (#fffff) porque el fondo de mi blog es gris. Aquí os dejo un link para que busquéis colores hexadecimales y aquí os dejo otro link para que podáis ver las propiedades de los bordes, yo he puesto la propiedad solid, pero hay muchas más ¡y cambiarlo dependerá de vuestro gusto! Para cambiar las fuentes podéis mirar el tutorial de Google Fonts.

PASO 4 Ahora que ya habéis copiado los códigos y los habéis modificado a vuestro gusto lo último que queda por hacer es clicar en APLICAR AL BLOG para guardar los cambios. ¡Tachán!

¡Espero que os haya gustado el tutorial! ¡Que tengáis un buen Miércoles!