Widget Tweets Recentes personalizado

Algumas pessoas me perguntaram sobre o widget que eu uso aqui no Mundo Blogger, onde aparece os meus tweets mais recentes dentro de um box com um ícone do Twitter, que está localizado na coluna esquerda do footer.
Bom, esse widget foi totalmente customizado por mim, mas vou ensinar como instalá-lo no seu blog.
O funcionamento deste widget é feito através do script Twitter Update, disponibilizado no Blogger.
O que eu fiz foi personalizar completamente ele, criando uma imagem em forma de um box e fazendo que meus tweets apareçam somente dentro deste box.

Se quiser conferir o resultado, basta olhar a coluna esquerda no rodapé aqui no Mundo Blogger.

Quer instalar esse widget no seu blog também?
Então vamos lá!
A instalação é bem fácil.

Vá até a aba "Design"→ Clique em "Adicionar um gadget"→ Escolha tipo "HTML/Javascript".
Copie e cole este código abaixo:

<div id="twit">
<div id="twitter_div">
<h2 style="display:none;" class="sidebar-title">Twitter Updates</h2>
<ul id="twitter_update_list"></ul>
<a id="twitter-link" style="display:block;text-align:center;font-family:Arial;color:#333;width:200px;font-size:8px;text-decoration:none;padding-top:30px;" href="http://www.mundoblogger.com.br/" target="_blank">.</a>
</div>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/USERNAMETWITTER.json?callback=twitterCallback2&amp;count=2" type="text/javascript"></script>
<a id="twitter-link" style="display:block;text-align:left;font-size:8px;font-family:Arial;padding-left:9px;text-decoration:none;" href="http://www.mundoblogger.com.br/2010/09/widget-tweets-recentes-personalizado.html">Instale este widget</a>
</div>


<style type="text/css">
#twit{background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5WCOCYqUqKmhAbRtbl-vgJwd2946MytCDIoJpmj7TQHJjqEyWLVeDIGywFVIfc72H2-b6LRFaXtihWArbwRoabLi1o3apd13dAjVVfNtKoSrO1ZNW4LihwIW7nzZUmuftNpb8vIBNR4Q/s1600/twitter-update-image-by-clau.png) no-repeat;width:200px; height:278px;}
#twitter_div{width:50px; height:145px;padding:15px;}
#twitter_update_list{width:150px; height:80px; margin:2px 5px 0 5px; padding:2px 10px 10px 5px; overflow: auto;text-align:left;font-size:11px;}
</style>

No código acima inclua o seu username do twitter no local indicado (destacado em vermelho).
Em count=2 você pode alterar a quantidade de "Tweets" que você quer que apareça no widget, basta alterar o número 2 para o número que quiser.
No meu caso, eu preferi que aparecessem apenas os 2 últimos tweets, mas você pode alterar essa quantidade.
Só altere os campos que estão destacados em vermelho.
Por favor, não retirem os créditos deste widget!
Afinal de contas, me deu trabalho personalizá-lo completamente de modo que as mensagens se encaixassem direitinho dentro do box que eu criei!


[ATUALIZAÇÃO]
Algumas pessoas relataram que ao instalar este widget a imagem que eu criei não está aparecendo. Pode ser que seja problema de hospedagem, ou problema no meu álbum do picasaweb, então para facilitar, vou disponibilizar abaixo, a imagem que eu criei para que vocês possam salvá-la no pc e hospedaá-la no seu site preferido:


P.s: salvem a imagem na resolução PNG.