Al leer el título, tal vez pienses que suena como a magia o fantasía, aunque en realidad no lo es. Simplemente se trata de sacar provecho del CSS que Blogger nos envía, y en este caso, me refiero específicamente al CSS del botón de enviar del formulario de contacto.
Este botón está asociado a dos clases en CSS, ¡así que puedes elegir entre dos estilos diferentes!. Si no sabes que es una clase te recomiendo echarle un vistazo a esta entrada que habla sobre las clases. Lo más interesante, es que puedes personalizar por ejemplo los enlaces de tu blog sin usar CSS adicional, o usar muy poco.
Si agregamos la(s) clase(s) al código de un elemento en la plantilla, como a un enlace, se aplicarán los estilos de éste. Por ejemplo, podemos personalizar el enlace a la entrada completa, me refiero a aquel que se agrega cuando usas el salto de linea del editor de entradas de Blogger y que de forma predeterminada dice "Más información". Recuerda que tú puedes editar ese texto desde Diseño, ingresando a las opciones de configuración de la entrada.
Bueno, para no confundirte o liarte mucho con tanto rollo, mejor veamos cómo crear dos estilos diferentes para otros enlaces en tu blog ;)
Si sigues los siguientes pasos, el enlace de leer más tendrá la apariencia que puedes ver en la imagen de abajo:
Nota: El color de texto que tenga el enlace (por defecto, el poner el puntero del ratón encima y el enlace visitado), dependerá de cómo esté declarado en la plantilla el color de los enlaces. Todo eso tú lo defines desde el diseñador de plantillas. Por otro lado, el subrayado aparecerá si así está definido que suceda, al poner el puntero del ratón sobre éste.
Si quieres personalizar el color del texto del enlace, por ejemplo ponerlo de otro color y desaparecer el subrayado del texto puedes usar algo como esto:
Y que puedes agregar desde el diseñador de plantillas, usando la opción de Añadir CSS, que encuentras al final, cuando seleccionas Avanzado.
Por otro lado, si te gusta el botón azul del formulario de contacto, esto es para ti ;) Podemos usar este estilo una y otra vez en los enlaces del blog fácilmente y agregando unas cuantas lineas de CSS.
Notas Finales
Este botón está asociado a dos clases en CSS, ¡así que puedes elegir entre dos estilos diferentes!. Si no sabes que es una clase te recomiendo echarle un vistazo a esta entrada que habla sobre las clases. Lo más interesante, es que puedes personalizar por ejemplo los enlaces de tu blog sin usar CSS adicional, o usar muy poco.
Si agregamos la(s) clase(s) al código de un elemento en la plantilla, como a un enlace, se aplicarán los estilos de éste. Por ejemplo, podemos personalizar el enlace a la entrada completa, me refiero a aquel que se agrega cuando usas el salto de linea del editor de entradas de Blogger y que de forma predeterminada dice "Más información". Recuerda que tú puedes editar ese texto desde Diseño, ingresando a las opciones de configuración de la entrada.
Bueno, para no confundirte o liarte mucho con tanto rollo, mejor veamos cómo crear dos estilos diferentes para otros enlaces en tu blog ;)
Opción 1. Personalizar el enlace que dice "Más información" (botones grises)
Si sigues los siguientes pasos, el enlace de leer más tendrá la apariencia que puedes ver en la imagen de abajo:
En este caso no agregaremos ni una sola linea de CSS, aunque al final de los pasos, he agregado una nota para que puedas cambiar el color del texto y eliminar el subrayado si así lo quieres, usando muy poco CSS. Dicho lo anterior vemos cómo lograrlo:
Pasos
Pasos
- Desde el panel de Blogger, selecciona Plantilla luego Editar HTML.
- Una vez que hayas accedido al editor, haz click en el botón que dice: Plantilla de formato, y luego, pulsa las teclas Ctrl + F simultáneamente.
- Hecho lo anterior, habrás activado el cuadro de búsqueda del editor. Ahora pega el siguiente texto en el campo: jump-link y pulsa la tecla Enter.
- Una vez que te encuentres en el código en cuestión, ubícate en la linea que está debajo, me refiero a la que empieza así: <a href='data:post.url + ..., y agrega esto, que he coloreado de azul:
class='contact-form-button'
La linea que te menciono deberá quedar así:
<div class='jump-link'>
<a class='contact-form-button' href='data:post.url + "#more"'title='data:post.title'> <data:post.jumpText/>
</a>
</div>
...
- Verifica en vista previa y si todo luce bien, guarda los cambios.
¡Y listo!, habrás personalizado el enlace de leer más sin agregar una sola linea adicional de CSS en tu plantilla.
Nota: El color de texto que tenga el enlace (por defecto, el poner el puntero del ratón encima y el enlace visitado), dependerá de cómo esté declarado en la plantilla el color de los enlaces. Todo eso tú lo defines desde el diseñador de plantillas. Por otro lado, el subrayado aparecerá si así está definido que suceda, al poner el puntero del ratón sobre éste.
Si quieres personalizar el color del texto del enlace, por ejemplo ponerlo de otro color y desaparecer el subrayado del texto puedes usar algo como esto:
.jump-link a{
color: #0c0c0c; /*color de texto*/
text-decoration: none;
}
Y que puedes agregar desde el diseñador de plantillas, usando la opción de Añadir CSS, que encuentras al final, cuando seleccionas Avanzado.
Opción 2. Personalizar el enlace de Más información con botones azules
Por otro lado, si te gusta el botón azul del formulario de contacto, esto es para ti ;) Podemos usar este estilo una y otra vez en los enlaces del blog fácilmente y agregando unas cuantas lineas de CSS.
Siguiendo con nuestro ejemplo, agregaremos ese estilo al enlace de Mas información. Dicho enlace tendrá esta apariencia una vez que hayas hecho lo que mas a adelante te diré.
¿Te gusta la idea? Entonces, echa un vistazo a los siguiente pasos para ver cómo lograrlo ;)
Pasos
Pasos
- Estando en el panel de Blogger, selecciona Plantilla, luego haz click Editar HTML para acceder al Editor.
- Una vez que hayas accedido al editor, haz click en el botón que dice: Plantilla de formato, y luego, pulsa las teclas Ctrl + F simultáneamente.
- Hecho lo anterior, habrás activado el cuadro de búsqueda del editor. Ahora pega el siguiente texto en el campo: jump-link y pulsa la tecla Enter.
- Una vez que te encuentres en el código en cuestión, ubícate en la linea que está debajo, me refiero a la que empieza así: <a href='data:post.url + ..., y agrega esto:
class='contact-form-button contact-form-button-submit'
La linea que te menciono deberá quedar así:
<div class='jump-link'>
<a class='contact-form-button contact-form-button-submit' href='data:post.url + "#more"'title='data:post.title'> <data:post.jumpText/>
</a>
</div>
... - Verifica en vista previa y si todo luce bien, guarda los cambios.
- Finalmente tendrás que usar un poco de CSS para poner el texto de color blanco y evitar que se subraye el texto, para ello, seleccionas la pestaña Plantilla, luego vas a Personalizar> Avanzado> Añadir CSS y en el cuadro pegas el siguiente CSS.
.jump-link a{
color: #fff;
text-decoration: none;
}
- Desde ahí podrás ver el aplicado lo anterior, luego, guarda el cambio haciendo click en el botón "Aplicar al blog".
¡Y listo!, habrás personalizado el enlace de leer más agregando solo una regla de CSS en tu plantilla.
- Los botones se crean usando algunas propiedades de CSS3, que solo son soportadas por navegadores modernos, incluyendo Internet Explorer 10. En en versiones anteriores de Internet Explorer, no se verán algunos efectos, como las sombras al poner el puntero del ratón encima, y al hacer click sobre éste, en el caso de la segunda opción.
- Este tutorial ha sido creado para todos aquellos que usan las nueva (aunque ya no tanto) plantillas de Blogger, me refiero a las del diseñador de plantillas.
Espero sea útil, y que el tutorial sea de tu agrado. No dudes en comentarme cualquier cosa y si te gusta y crees que puede serle útil a alguien, ¡compártelo! ;)
