En un artículo anterior, expliqué cómo integrar Twitter con un blog, usando un Twitter Badge. Pues bien, como se trata de un gadget, lo más probable es que quede integrado de la misma forma como un agregador de RSS o una columna de categorías. Y ¿qué pasa si lo quiero arreglar un poco más?. Pues veamos.
¿Qué necesito?
Para esta demostración necesitarás:
- un blog, preferentemente montado en un servidor propio, ya que algunos sistemas gratuítos como Wordpress y LiveJournal restringen los derechos de modificar las hojas de estilo.
- el código fuente del Twitter Badge (se obtiene tal como se explica en este post)
- la hoja de estilos del blog, que para este caso será tomada directamente de un blog en Wordpress en un servidor desconocido
.
Analizando el código del badge
Nota: para que esto funcione, debemos usar la versión en HTML. La versión en Flash no funciona con esto.
Para comenzar, obtenemos el código del badge, que debiera ser algo así:
<div id="twitter_div">
<h2>Mi Twitter</h2>
<ul id="twitter_update_list">
<a href="http://twitter.com/mi_usuario" id="twitter-link" style="display:block;text-align:right;">follow me on Twitter</a></ul>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/mi_usuario.json?callback=twitterCallback2&count=5"></script>
Dentro de este código tenemos tres etiquetas con identificador (id): <div id=”twitter_div”> (en verde, correspondiente al contenedor del badge), <ul id=”twitter_update_list”> (en rojo, correspondiente a la lista de actualizaciones) y <a … id=”twitter-link” …> (en azul, correspondiente al estilo del link).
TwitterBadge en normal
Esto significa que debemos agregar a la hoja de estilos del blog tres identificadores más: #twitter_div, #twitter_update_list y #twitter_link.
Por cierto: en el código el nombre de usuario fue cambiado por “mi_usuario”, con el fin de proteger a los inocentes 
.
El resultado de la inserción del badge debiera ser como la imagen de la derecha.
Editando la hoja de estilos
Una vez detectado dónde tienes que intervenir para modificar la apariencia del badge, agregas el siguiente código al final de la misma:
/* Twitter Badge */
#twitter_div {
background-color: black;
padding: 10px 20px;
border: 2px grey solid;
color: white;
font-size: 10px;
}
#twitter_update_list ul {
padding: 5px;
}
Con esto agregamos color de fondo y modificamos el color de la tipografía. Debiera verse más o menos así:
TwitterBadge con CSS simple
¿Y eso no más se puede hacer?
Noooooo… es posible seguir haciendo modificaciones. En un próximo artículo te mostraremos cómo agregar un tapiz de fondo y dejarlo prácticamente con la misma apariencia de un widget hecho en Flash.
Stay tunned.
Loading ...