Tweety - Un widget para hacer que tus citas se vean como tweets (Tutorial)

Descubre cómo darle este look a las citas en tus posts.

Mientras escribía el post sobre "volver a la casilla de salida", quise añadir un par de frases celebres y tuve una idea interesante.
¿Y si pudiera hacer como si estuviera citando un tweet de este señor?

Pase de esto:

"Sé el cambio que quieras ver en el mundo."
- Mahatma Gandhi

A esto:

• Mahatma Gandhi
• @Hakuna_tus_chakras

Sé el cambio que quieras ver en el #mundo.

Mucho mejor, ¿no? ¡Vamos a ver como hacerlo!

El código

¿Como usarlo?

Los pasos de este mini tutorial los explicare usando blogger, aunque si usas cualquier otro servicio de blogging deberias poder implementarlo mas o menos del mismo modo.

1. Añadir el código CSS al theme de tu blog

Desde el dashboard de blogger, ve a Plantilla > Personalizar

Luego ve a la pestaña Avanzado > Añadir CSS

En la ventanilla de la derecha (3), pega el código CSS del widget:

2. Añadir el widget HTML a un post

Para implementar el pequeño widget, haz una nueva entrada en el blog y entra en la edición de HTML:
E inserta el widget HTML:

¡Felicidades! Con esto ya has añadido tu primer widget básico.
Ahora dedicaré unas lineas a describir las clases que he usado para este widget.

El código paso a paso

<div class="tweety-quote">

Contenedor del widget

<div class="tweety-header">

Contenedor de la cabecera del widget, donde irá la imagén e información del perfil

<div class="tweety-img">

Contenedor de la imagen de perfil

<img alt="tweety-img" class="tweety-landscape" src="http://www.zengardner.com/wp-content/uploads/mahatma-gandhi1.jpg" /><br />¡Aqui empieza la magia! Deberás buscar en google o donde quieras la imagen que quieras usar como imagen de perfil y ponerla entre las comillas de src=" ". Preferiblemente usa imágenes apaisadas, aunque si fuera necesario usar una vertical,  con cambiar la clase: class="tweety-landscape" por class="tweety-portrait", el CSS ya se encargará de ajustar la imagen a este nuevo formato.

<ul class="tweety-info">

Contenedor para la información de usuario

<li class="tweety-user">Mahatma Gandhi</li>

Nombre de usuario

<li class="tweety-profile">@Hakuna_tus_chakras</li>

Perfil de ususario

<div class="tweety-content">Sé el cambio que quieras ver en el <span class="tweety-link">#mundo.</span></div>

Aqui pondras el contenido que quieras mostrar

<span class="tweety-link">#mundo.</span>

Si vas a usar hashtags o menciones, envuelvelos en esta clase para darles el color de un "link".

Y bueno, esto es todo por ahora. Espero que a alguien le pueda ser de utilidad.