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:
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.
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.
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 */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.
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;
}
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.
