4 jul. 2016

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

  • 8:00
  • por
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 :)



Curso gratis paso a paso para crear un blog y diseñarlo a tu gusto con videotutoriales

Blogger paso a paso Mónica Lemos

Me apasiona la educación, en su sentido más amplio. Son muchos mis centros de interés, por ello creo que ser Blogger o Youtuber es una oportunidad de compartir lo mejor de cada persona al mundo. Mientras estoy intentando evolucionar 'educadamente' en esta 'loca' sociedad. Desde este rincón puedo ayudarte con asesorías y servicios ¿Te animas?

Comenta dudas, opiniones...



Ya han comentado 4 veces:

  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
  2. Hola Mónica:

    Te felicito por este gran trabajo que has realizado de ofrecernos la posibilidad de personalizar una plantilla de blogger.

    Te comento, que si borro el código a:link hasta a:hover y lo sustituyo por el de post-body, en mi caso me lo hace en todo el blog donde tengo enlaces. Para que no suceda, lo único que he tenido que hacer es mantener el código que comentas que debemos borrar y añadir el nuevo código de post-body.



    ResponderEliminar
    Respuestas
    1. genial Nandi, esa es la opción más acertada!!!

      Muchas gracias por tu comentario!! me alegra mucho que te pasaras por aquí a comentar,

      Un saludo

      Eliminar