Espero que su semana esté transcurriendo de lo mejor. Hoy les traigo un tutorial que seguro les va a gustar porque se trata de agregar un vistoso subrayado al título de nuestras entradas. El tutorial no es nada complicado y el resultado es muy bueno.
El efecto consiste en un subrayado animado deslizante que funciona al pasar el cursor sobre el título del post, como pueden ver en este ejemplo y también en mi blog de pruebas.
( ↪ Ver DEMO)Ahora sí, vamos con el tutorial
1.§ Vamos a Plantilla - Editar HTML.
2.§ Damos un clic dentro del código de la plantilla y presionamos la combinación de teclas
CTRL+F. Dentro de la casilla de búsqueda escribemos la etiqueta
]]></b:skin> y damos
Enter para la búsqueda.
3.§ Encima de
]]></b:skin> pegaremos el siguiente código CSS:
/* Subrayado título */
h3.post-title {
display: inline-block;
}
h3.post-title:after {
content: '';
display: block;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
h3.post-title:hover:after {
width: 100%;
background: #1198cc;
}
Para cambiar el
ancho del subrayado, cambiamos el valor de
height: 3px por el ancho que queramos; para cambiar el
color del subrayado, cambiamos el código hexadecimal de
background: #1198cc por otro color. Aquí les dejo una
cartilla de colores para que puedan elegir un color.
4.§ Finalmente, damos clic en
Guardar plantilla y eso sería todo. Como ven, agregar este efecto es muy sencillo, pero si tienen alguna duda o si desean que haga un video de este tutorial, escríban en los comentarios. Que pasen una bonita semana.
