Último tweet en Blogger

Cuando tenemos una cuenta de twitter, es conveniente que los usuarios sepan de la existencia y la actividad de ésta. Mostrar el último tweet en el blog es una forma muy útil para que sepan que regularmente utilizas esta red social.

Esta variable es una modificación mía a partir de los plugins oficiales.

Vista previa del gadget:

¿Cómo insertarlo en Blogger?

Paso 1: Insertandolo en la columna lateral (sidebar):

Vamos a ''Diseño/Edición HTML'', en donde marcamos ''Expandir plantillas de artilugios'' y buscamos la siguiente línea:

<div id='sidebar-wrapper'>

Debajo de esta, pega el siguiente código:

<div id='twitter_div'>
<h2 class='sidebar-title' style='display:none;'>Último Tweet</h2>
<ul class='sb-tools' id='twitter_ultimo_tweet'/>
<p class='textoseguirtwitter'><a href='http://twitter.com/cloudx18'>Sígueme en Twitter</a></p>
</div>
<script src='http://twitter.com/javascripts/blogger.js' type='text/javascript'/>
<script src='http://twitter.com/statuses/user_timeline/cloudx18.json?callback=twitterCallback2&amp;count=1' type='text/javascript'/>

Paso 2: Agregando los estilos:

Ahora, buscamos la siguiente sección:

]]></b:skin>

Encima de ésta, pegaremos los siguientes atributos:

/* Últimos Tweets */
#twitter_ultimo_tweet li{
padding-left: 55px;  /* aumentar o disminuir si la imagen se sobrepone */
color: #111;
display: block;
margin-left:-30px; /* Margen izquierdo*/
margin-right:5px; /* Margen derecho */
}
#twitter_ultimo_tweet li { background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif3rQ9W7VyQctEZFzTeYTFSDNXLZcf6FN91iv04iaJIp6eL6Z03EznYmmpNKT8cq3f0R4G5XFl6Di_lDNbUVTqo8z4hsiV5g5-cX2N_kQJKXz2B51EE8wgeZRzd09aQ-y4ZNt4seiduPo/s0/twitter_48.png) top left no-repeat;  /* Imagen lateral */
.textoseguirtwitter { padding: 3px 0 0 65px; }

div.sb-list { margin-left: 10px; }
.sb-list div { border-bottom: 1px dotted #ddd; margin: 9px 0; padding: 0 8px 9px; }
.sb-tools li { display: block; min-height: 34px; }

.sb-tools a span {
  color: #86180A;
  display: block;
  font-size: 12px;
  padding-bottom: 3px;
  text-transform: uppercase;
}
.sb-tools a:hover span { color: #C54E0B; }

Ajustamos los margenes, espaciados, etc para que quede acorde a nuestra sidebar. Posteriormente guardamos los cambios: