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:

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

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

CONSIGUE

LA VIDA QUE DESEAS

GRACIAS A UN NEGOCIO ONLINE RENTABLE

Disfruta de mi curso gratuito “Cómo tener un Negocio Online Rentable no solo económicamente”, en el que comparto las áreas más importantes a trabajar para conseguir la vida que deseas con tu Emprendimiento Online.

Interacciones con los lectores

10 comentarios

  1. Mónica Lemos

    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

  2. Nandi

    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.

  3. Mundo Creativo

    hola moni primero que nada gracias por el impresionante curso que nos das es buenisimo! y bueno tengo un problema para encontrar a:link { en la html en mi blog, no entiendo por que , estaria muy bello qu epudieras ayudarme , gracias!

  4. Gabriel Maican

    Hola Monica, de verdad te felicito. He investigado acerca de como tener un blog de blogger dinamico y hay varios de tus post por allí que me han ayudado muchísimo. Yo ando en ese plan, modificando mis blogs para que se vea mucho mas atractivo y le sea practico al visitante a la hora de navegar por mi blog. Solo falta posicionarlos en google en la primera pagina. Se que es difícil con el subdominio de blogger pero se que sí se puede, muchos ya lo han hecho y espero lograrlo en algun momento.

    Saludos desde Venezuela.

    • monicalemos

      Hola!!🖤🤗✨ enhorabuena por tus esfuerzos!
      la verdad es que siempre recomiendo un dominio propio, total son muy baratos!!!
      recomiendo siempre invertir desde el principio para obtener beneficios mucho antes!!
      ¡Animo!

  5. Betsabé

    Hola Mónica.
    Me encanta este curso, cada vez aprendo más, aunque aún me cuesta mucho reconocer ciertos códigos, pero un paso a la vez.
    Utilicé un diseño sencillo de Dabblet y cambié los colores de texto hasta que me pareció más adecuado.
    Muchas gracias y te saludo desde mi #Dia19cuarentena
    Un abrazo

Deja tu comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *