SLIDER

¡Hola!

Mónica Lemos
¡Hola! Soy Mónicay quiero que empieces a crear tu blog o tu canal de youtube sin complicaciones. Aquí descubrirás cómo.
TODO EL CONTENIDO

ES GRATUITO

Por ello no puedo crear contenido
con regularidad, de hecho tengo que dejarlo por el momento
Si quieres hacerme un regalo para agradecer todo el contenido gratuito de que puedes disfrutar gracias a mi esfuerzo puedes hacerlo aquí , quizás pueda seguir creando nuevo contenido útil. Gracias!

Suscríbete

¿Quieres asegurarte de que tus posts estén perfectos antes de ser publicados?
Te regalo una Check-List que te ayudará en esto.


Tutorial Blogger: Personaliza los enlaces del blog y de las entradas C14

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

comenzamos la clase  


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 explicadito con 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  






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:

personalizar enlace de las entradas
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

A H O R A   T E   T O C A   A   T I  

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!! :)


fin de la clase


¿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, déja 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 :)



suscríbete y recibe una check-list para entradas perfectas  




   

2 comentarios

  1. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
    Respuestas
    1. Hola MariCarmen,
      No te preocupes por ese cambio, porque hace más seguro tu blog y no debería ser el responsable de ningún otro cambio.. Quizás los errores son por otra cuestión? Me extraña que sea por el cambio de cifrado!
      Es todo lo que te puedo decir.
      Muchas gracias 😊
      Muack

      Eliminar

© Blogger Paso a Paso • Theme by Maira G. Adaptada por Mónica Lemos, autora de este blog.
Todas las imágenes son del banco de imágenes Unsplash.com o bien de mi propia autoría.
Si quieres puedes reclamar tu autoría - Contactar con la autora del blog.