14 marzo 2015

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

Nunca pierdas la esperanza y en los momentos difíciles busca alivio en Dios.Tuitéalo



.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(http://4.bp.blogspot.com/-cw5u5O933NY/VM7qP2HS8RI/AAAAAAAAQwY/2jyWZs0xO6o/s1600/twitter-bird.png) no-repeat 100% 40%;text-decoration:none;}



Estilo 2: Cielito

No esperes más y conviértete en el creador de tu propio destino.Tuitéalo



.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(http://4.bp.blogspot.com/-cw5u5O933NY/VM7qP2HS8RI/AAAAAAAAQwY/2jyWZs0xO6o/s1600/twitter-bird.png) no-repeat 100% 40%;text-decoration:none;}



Estilo 3: Paralelo

Dios te dio la vida para que seas feliz, pero también te dio la libertad para elegirlo. Elige ser feliz.Tuitéalo



.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(http://4.bp.blogspot.com/-cw5u5O933NY/VM7qP2HS8RI/AAAAAAAAQwY/2jyWZs0xO6o/s1600/twitter-bird.png) no-repeat 100% 40%;text-decoration:none;}



Estilo 4: Clear

Define tu meta. Si sabes lo que quieres difícilmente perderás el camino. Tuitéalo



.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(http://4.bp.blogspot.com/-cw5u5O933NY/VM7qP2HS8RI/AAAAAAAAQwY/2jyWZs0xO6o/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(http://4.bp.blogspot.com/-zdDGkrKyR7U/VPd5XEcHn2I/AAAAAAAARhY/Pbi44bZ_E5s/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_usuario

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.

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:

Creer que es posible, es el primer paso para lograr lo que te propongas.Tuitéalo


¿Qué te parece? ¿Te gusta la idea de crear la frase tuiteable sin usar Click to tweet?

 ¡Feliz fin de semana! ;)

Artículos recomendados:

Gracias por compartir tu comentario y hacernos saber tu opinión.