%20(1).jpg)
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:
0 Comentarios