Contenido del artículo [ocultar]
Contenido del artículo [ocultar]
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 😉
Contenido del artículo[ocultar]
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?
Antes de realizar cualquier cambio en nuestro blog, tendremos que realizar una copia de seguridad del mismo por si algo no sale bien.
Puedes ver en este post como lo hacemos paso a paso
Nos vamos a Tema > HTML
Busca la etiqueta ]]></b:skin> y añade este bloque encima:
No hay comentarios:
Publicar un comentario
En breve les contestaremos