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.

Tweets Recentes

Demo

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

Vá até o menu “layout” ? 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://api.twitter.com/1/statuses/user_timeline.json?screen_name=USERNAMETWITTER&include_rts=1&exclude_replies=true&callback=twitterCallback2&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(http://4.bp.blogspot.com/_3eh_nW6DoIE/TIl2-ZZHkXI/AAAAAAAABFs/xlNqMjTcJNs/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>

Esta gostando deste Artigo? Então receba nossas notícias por e-mail! 


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.

Artigo atualizado em dezembro/2012.

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Tags:
Comentários
  1. Nathalia
    • Vanessa
  2. luiz barros
    • Vanessa
  3. thalison jardim
  4. ? Júlia Madureira
  5. .:: Clau ::.
  6. Almas para o Reino
  7. .:: Clau ::.
  8. Nany
  9. Elizabeth Passos
  10. .:: Clau ::.
  11. Ian Filipe
  12. Ferreira
  13. Portal H3 Habbo
  14. Sybylla
  15. .:: Clau ::.
  16. S.
  17. Gontijø
  18. Dê Lima
  19. .:: Clau ::.
  20. Guh Sama¹³
  21. Isabella F.
  22. Edu Gueds
  23. .:: Clau ::.
  24. Edu Gueds
  25. Nerd Flanders
  26. Lukas
  27. .:: Clau ::.
  28. Lukas
  29. .:: Clau ::.
  30. drikeity
  31. raficha
  32. .:: Clau ::.
  33. comandoblogger
  34. .:: Clau ::.
  35. Dantas Neto
  36. allanpoe4
  37. cafeblogueiro
  38. Will
  39. .:: Clau ::.
  40. Jamis Henrique
  41. .:: Clau ::.
  42. .:: Clau ::.
  43. mundodadanca1
  44. .:: Clau ::.
  45. .:: Clau ::.
  46. Rickzinhocps
  47. Fabiano Roberto