personalizar enlaces blog blogger

Personalizar enlaces del blog y de las entradas Tutorial Blogger

personaliza-enlaces-del-blog-y-de-posts

Penúltima clase, no me lo puedo creer, ¡Casi tenemos el blog terminado! Es increíble como va evolucionando un blog con pequeños cambios , ¿Verdad? Se notan mucho las diferencias.  

En esta clase vamos a personalizar los enlaces de nuestro blog en general y de nuestros posts en particular.  

No es nada difícil, como siempre, os lo dejo super fácil y solo tendrás que copiar y pegar un código en tu plantilla. te dejaré un vídeo para explicarte cómo hacerlo y ya el resto es cosa tuya 😉

Personalizar enlaces de tu blog en Blogger

Los enlaces son algo que siempre me ha gustado personalizar, sobretodo porque a mi esa línea que pasa por debajo como esta no me gusta nada, me parece muy «del montón» y otro motivo es porque si no busco otras posibilidades no sería yo. Culo inquieto que soy.   

Buscando encontré varias opciones diferentes pero la más completa está en un Dabblet que está genial. Es muy sencillo porque ya viene todo explicaditocon sus códigos y con los efectos que ofrece cada código.  

Así que primero os voy a explicar cómo conseguir el código(porque veo un poco chorra eso de copiarlo igual aquí) y os monto un vídeo para explicaros cómo lo haremos y además os voy a contar cómo podemos personalizarlos todavía más.

Vídeo tutorial explicativo personalizar enlaces en Blogger

Una vez visto el vídeo ya puedes personalizar tu código para los enlaces.

Entramos en el Dabblet y abrimos un Bloc de notas donde colocaremos nuestro código para poder personalizarlo.

En nuestro bloc de notas lo primero que tenemos que anotar es esta estructura,(la copias y pegas en tu bloc de notas)

a:link {/*estilo del link normal*/
}
a:visited {/*estilo del link ya visitado*/
}
a:hover {/*estilo del link cuando pasa el ratón*/
}

Antes de cada paréntesis de cierre como este }  vamos a pegar los estilos que queramos para nuestro enlace según sea un link, un link visitado o un link al pasar el ratón por encima.

Podemos añadir entre otras cosas, lo básico como lo siguiente:

  • color: el color del texto de enlace
  • font-family: el tipo de letra del enlace
  • font-size:  el tamaño del texto del enlace
  • border: el borde alrededor del texto de enlace

Yo he elegido este para mi blog de pruebas de este curso los siguientes códigos:

Código CSS para estilo de enlaces en todo el blog     

Obviamente en aquellos lugares donde ya lo hemos personalizado, como en el menú de páginas, no se modificarán los enlaces, solo en aquellos que no tengamos personalizados.  

Este simplemente es un gris para el enlace y un verde-mint para cuando pasamos con el ratón, y el enlace visitado otro gris, donde casi no se nota diferencia. Puedes ver el efecto en el archivo del blog de pruebas.

a:link {
  text-decoration:none;
  color: #888;
}
a:visited {
  text-decoration:none;
  color: #777;
}
a:hover {
  text-decoration:none;
  color: #8fb59e;
}

Código CSS para estilo de enlaces de los posts    

Para personalizar solo los enlaces de las entradas, lo único que hay que hacer es usar la misma estructura anterior, pero antes de cada inicio de código haremos referencia a que sea dentro del post poniendo antes de cada uno esto:

.post-body 

Mirar cómo ha quedado el del blog del curso:

El código que he usado es este:

.post-body a:link {
  text-decoration:none;
  color: #8fb59e;
}
.post-body a:visited {
  text-decoration:none;
  color: #000;
}
.post-body a:hover {
  text-decoration:none;
  -webkit-background-clip: text;
color: white;
-webkit-text-fill-color: transparent;
  background-image: -webkit-gradient(linear, left top, right top, from(#ea8711), to(#d96363));
background-image: -webkit-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79); 
background-image:    -moz-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79);
background-image:     -ms-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79); 
background-image:      -o-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79);
}

Como puedes observar, es el mismo código, pero al principio de cada uno he añadido .post-body

Cuando tengas tu código elegido y listo:

* Vamos a nuestro blog

Plantilla

Copia de seguridad

Editar HTML

Buscamos en plantilla el siguiente código (si no sabes cómo mira este vídeo)

a:link {

* y borramos desde ese código hasta este otro:

a:hover {  text-decoration:underline;  color: $(link.hover.color);}

* y pegamos, en su lugar, el código que tenemos personalizado en el bloc de notas.

Guardamos plantilla y vemos el blog, a ver cómo nos ha quedado!! 🙂

¿Qué tal esta clase? ¿Te ha resultado pesada?  ¿Qué estilo te ha gustado para tu blog?   

He de confesar que es un poco más durilla que el resto, pero también te ayudará a familiarizarte un poco con los códigos. De todas formas, si tienes cualquier problema o impedimento por favor, deja un comentario y lo solucionamos 🙂   En la próxima clase vemos cómo cambiar el diseño de nuestro pié de entradas, no te lo pierdas 🙂

Comparte

MI LIBRO

TU PROPIO ÉXITO

DESARROLLO PERSONAL Y BRANDING

Consigue tu ejemplar con ejercicios e ilustraciones.

0 0 votes
Article Rating
Subscribe
Notify of
guest
10 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments