5 Estilos Minimalistas para las Frases Tuiteables + Tip para Crear Frases Tuiteables sin usar Click To Tweet
Ya había prometido algunos estilos para las frases tuiteables, así que antes de pasar a otro tema y dejar ésto en el baúl del olvido, lo comparto hoy para que puedas usar alguno que te guste si es que estás creando frases tuiteables en el blog.
Cómo usarlo
Simplemente pones el CSS del estilo que elijas, en sustitución al otro código CSS que mencionaba en el paso previo.
Recuerda que el CSS sólo hay que ponerlo una vez en tu plantilla, y lo haces desde el Diseñador de plantillas, yendo a Avanzado > Añadir CSS.
Puedes editar a tu gusto el CSS. He resaltado de azul algunos valores que pueden interesarte, como color de bordes, color de fondo, etc. Si quieres mover el icono del pajarito verticalmente (hacerlo más para abajo o menos) busca: 40% y edita ese valor, entre más alto sea más se va a ir para abajo.
Almacena la imagen del pajarito por ti mismo, y sustituye su URL que he resaltado de verde. Si no sabes como obtener la URL de la imagen que almacenas desde Blogger, échale un vistazo a esta entrada.
Siéntete libre de enviar cualquiera de las frases a Twitter y no necesitas mantener la mención.
Estilo 1: Boxy
Estilo 2: Cielito
Estilo 3: Paralelo
Estilo 4: Clear
Estilo 5: Dramático
Para este último estilo, si quieres cambiar el color de fondo de la burbuja, solo edita el valor:#4a4a4a y que aparece dos veces en el CSS.
Guía para editar el CSS. Los valores se pueden editar.
En "
Ejemplos de propiedades y valores usados:
color:#4a4a4a la propiedad color define el color del texto. El valor en este caso es #4a4a4a.
border-color:#4a4a4a la propiedad "border-color" sirve para definir el color del borde, en este caso el valor es #4a4a4a.
border:1px solid #dadada la propiedad "border" define el grosor del borde (1px) el estilo (solid) y el color: (#dadada). Si quisiera el borde punteado, en lugar de "solid", sería: "dotted". Si lo quisieras discontinuo, en lugar de "dotted" sería: "dashed".
background-color:#4a4a4a la propiedad "background-color" sirve para definir el color de fondo. En este caso el valor es: #4a4a4a.
Para editar los colores consulta una tabla de colores web. Todo el CSS es válido y ya está comprimido. Dejé el ";" en el último valor de cada regla (aunque no es necesario) para evitar problemas si es que alguien no se da cuenta, si agrega más propiedades.
Tip: Crear una frase tuiteable usando la URI de Twitter
Como ya lo había explicado, para crear la frase tuiteable requerimos de la herramienta de click to tweet, para poder crear un enlace que contenga el enlace al respectivo post. Éso facilita la tarea, y no hay que editar nada.
Pues bien, si quieres crear la frase tuiteable sin usar la herramienta, también lo puedes hacer. Así que ya no dependerás del servicio, uno nunca sabe cuando esos servicios puedan retirarse. Solo usa la siguiente linea para crear el enlace que enviará una frase a Twitter, incluyendo tu nombre de usuario para que se haga la mención.
Edita los datos como se indica en el texto que he resaltado de color amarillo. Donde dice: "Nombre de usuario", pones tu nombre de usuario de Twitter.
Esa URI creada la colocarás donde dice: "Dirección Web" al usar la herramienta "Enlace" del editor de entradas de Blogger.
Y solo para que puedas probar por ti mismo que funciona, he aquí una frase tuiteable que he creado, sin usar la herramienta Click to Tweet, que a diferencia de las anteriores, si incluye el enlace a la entrada:
¿Qué te parece? ¿Te gusta la idea de crear la frase tuiteable sin usar Click to tweet?
¡Feliz fin de semana! ;)
Cómo usarlo
Simplemente pones el CSS del estilo que elijas, en sustitución al otro código CSS que mencionaba en el paso previo.
Recuerda que el CSS sólo hay que ponerlo una vez en tu plantilla, y lo haces desde el Diseñador de plantillas, yendo a Avanzado > Añadir CSS.
Puedes editar a tu gusto el CSS. He resaltado de azul algunos valores que pueden interesarte, como color de bordes, color de fondo, etc. Si quieres mover el icono del pajarito verticalmente (hacerlo más para abajo o menos) busca: 40% y edita ese valor, entre más alto sea más se va a ir para abajo.
Almacena la imagen del pajarito por ti mismo, y sustituye su URL que he resaltado de verde. Si no sabes como obtener la URL de la imagen que almacenas desde Blogger, échale un vistazo a esta entrada.
Siéntete libre de enviar cualquiera de las frases a Twitter y no necesitas mantener la mención.
Estilo 1: Boxy
.frase{display:inline-block;width:90%;margin:10px;border:3px solid #4a4a4a/*color del borde*/;padding:18px 20px 5px;overflow:hidden}.frase a{display:block;float:right;color:#2B3437;margin:25px 0 12px 0;padding:0 25px 0 0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGOrtCKVqmHmtp-5Vr8xkHT9EnBjtsB_B_fCdvS-UTlswoqgUZfZf1t_TJJcNU2V1w7yU6QNRzQ7zu9kzPOc7lpCHQnxi8KMLT2fVED9uZHRXOoGz7ZMZwUPshu649n99pYxgWkP_385Q/s1600/twitter-bird.png) no-repeat 100% 40%;text-decoration:none;}Estilo 2: Cielito
.frase{display:inline-block;width:90%;background-color:#DDF7F0;margin:10px;border:1px solid #D4E9E4;padding:18px 20px 10px;overflow:hidden;}.frase a{display:block;float:right;color:#2B3437;margin:25px 0 15px 0;padding:0 25px 0 0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGOrtCKVqmHmtp-5Vr8xkHT9EnBjtsB_B_fCdvS-UTlswoqgUZfZf1t_TJJcNU2V1w7yU6QNRzQ7zu9kzPOc7lpCHQnxi8KMLT2fVED9uZHRXOoGz7ZMZwUPshu649n99pYxgWkP_385Q/s1600/twitter-bird.png) no-repeat 100% 40%;text-decoration:none;}
Estilo 3: Paralelo
.frase{display:inline-block;width:90%;margin:10px;border-top:2px solid #151515;border-bottom:2px solid #151515;padding:18px 20px 8px;overflow:hidden;}.frase a{display:block;width:97%;text-align:right;margin:10px 0 0 0;padding:0 25px 0 0;color:#2B3737;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGOrtCKVqmHmtp-5Vr8xkHT9EnBjtsB_B_fCdvS-UTlswoqgUZfZf1t_TJJcNU2V1w7yU6QNRzQ7zu9kzPOc7lpCHQnxi8KMLT2fVED9uZHRXOoGz7ZMZwUPshu649n99pYxgWkP_385Q/s1600/twitter-bird.png) no-repeat 100% 40%;text-decoration:none;}
Estilo 4: Clear
.frase{border:1px solid #dadada; display:inline-block;margin:5px;overflow: hidden;padding:18px 20px 8px;width:90%;}.frase a{display:block;float:right;color:#2B3437;margin:30px 0 10px 0;padding:0 25px 0 0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGOrtCKVqmHmtp-5Vr8xkHT9EnBjtsB_B_fCdvS-UTlswoqgUZfZf1t_TJJcNU2V1w7yU6QNRzQ7zu9kzPOc7lpCHQnxi8KMLT2fVED9uZHRXOoGz7ZMZwUPshu649n99pYxgWkP_385Q/s1600/twitter-bird.png) no-repeat 100% 40%;text-decoration:none;}
Estilo 5: Dramático
Solo hay dos opciones: hacer las cosas o hacer las cosas bien. Tú eliges.Tuitéalo
.frase{position:relative;padding:20px 20px 8px;display:inline-block;background-color:#4a4a4a;color:#fff;}
.frase:before{content:"";position:absolute;left:0;bottom:-16px;width:0;height:0;border-style:solid;border-width:18px 18px 0 0;border-color:#4a4a4a transparent transparent transparent;}.frase a{display:block;float:right;margin:25px 0 15px 0;padding:0 28px 0 0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDGwQd7hBrDv4e4HMGXWUU8KvRGYNRGsMDicj5BmR8V46KHtb8df2MEEqFz3mvuxqRsmPJYo6aMx47s1gbcrnUP0PQxL1f8rsZip2UOas1lCTfJNFkN8XDdHH4pz6HS37_PcEWhHnMgGD_/s320/Twitter_logo_white.png) no-repeat 100% 60%;text-decoration:none;color:#87def1;}
Para este último estilo, si quieres cambiar el color de fondo de la burbuja, solo edita el valor:#4a4a4a y que aparece dos veces en el CSS.
Guía para editar el CSS. Los valores se pueden editar.
En "
.frase" definimos la apariencia del contenedor o cajita de la frase(que es por medio de una clase). En ".frase a" definimos la apariencia del enlace. Ejemplos de propiedades y valores usados:
color:#4a4a4a la propiedad color define el color del texto. El valor en este caso es #4a4a4a.
border-color:#4a4a4a la propiedad "border-color" sirve para definir el color del borde, en este caso el valor es #4a4a4a.
border:1px solid #dadada la propiedad "border" define el grosor del borde (1px) el estilo (solid) y el color: (#dadada). Si quisiera el borde punteado, en lugar de "solid", sería: "dotted". Si lo quisieras discontinuo, en lugar de "dotted" sería: "dashed".
background-color:#4a4a4a la propiedad "background-color" sirve para definir el color de fondo. En este caso el valor es: #4a4a4a.
Para editar los colores consulta una tabla de colores web. Todo el CSS es válido y ya está comprimido. Dejé el ";" en el último valor de cada regla (aunque no es necesario) para evitar problemas si es que alguien no se da cuenta, si agrega más propiedades.
Tip: Crear una frase tuiteable usando la URI de Twitter
Como ya lo había explicado, para crear la frase tuiteable requerimos de la herramienta de click to tweet, para poder crear un enlace que contenga el enlace al respectivo post. Éso facilita la tarea, y no hay que editar nada.
Pues bien, si quieres crear la frase tuiteable sin usar la herramienta, también lo puedes hacer. Así que ya no dependerás del servicio, uno nunca sabe cuando esos servicios puedan retirarse. Solo usa la siguiente linea para crear el enlace que enviará una frase a Twitter, incluyendo tu nombre de usuario para que se haga la mención.
https://twitter.com/intent/tweet?text=Aquí_va_la_frase+URL_DE_LA_ENTRADA+@Nombre_de_usuarioEdita los datos como se indica en el texto que he resaltado de color amarillo. Donde dice: "Nombre de usuario", pones tu nombre de usuario de Twitter.
Esa URI creada la colocarás donde dice: "Dirección Web" al usar la herramienta "Enlace" del editor de entradas de Blogger.
No olvides "probar el enlace" para verificar que funcione correctamente, antes de publicar la entrada ;)
Y solo para que puedas probar por ti mismo que funciona, he aquí una frase tuiteable que he creado, sin usar la herramienta Click to Tweet, que a diferencia de las anteriores, si incluye el enlace a la entrada:
¿Qué te parece? ¿Te gusta la idea de crear la frase tuiteable sin usar Click to tweet?
¡Feliz fin de semana! ;)
necesitas buscarlo y eliminarlo, y ese código lo encuentras al expandir plantillas de artilugios, en la edición de HTML de la plantilla:
