Pues bien, este enlace, como otros enlaces que haya en tu plantilla los podemos personalizar fácilmente, dándoles la apariencia del botón del formulario de contacto de Blogger, con una variante que más adelante te explicaré.
Esto lo podemos conseguir, ya que Blogger nos envía cierto código CSS, para manipular la apariencia del botón del formulario de contacto y se vea así de mono como puedes ver.
Lo interesante aquí, es que no es necesario agregar mas código a tu blog, o solo unas cuantas lineas. El CSS que te menciono, no incluye ninguna imagen, así que los botones se crean solo con código CSS.
Bueno, para no confundirte o liarte mucho con tanto rollo, mejor veamos un ejemplo, y en este caso, veremos cómo crear dos estilos diferentes para el enlace de "Mas información" ;)
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 solo unas cuantas lineas de CSS. Dicho lo anterior vemos cómo lograrlo:
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 (estilo característico de Google)
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
- 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.
Notas Finales
- Los botones se crean sin usar ninguna imagen, solo 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! ;)
No hay comentarios:
Publicar un comentario