•Atualizações do Twitter no blog com Efeito

É notório que o Twitter cresce a cada dia mais, e como todos sabem, a maioria dos usuários usam o Twitter para divulgar conteúdos de seus blogs.


Muitos blogueiros utilizam um widget do Twitter para postarem suas "Twitadas" no blog, onde as atualizações aparecem automaticamente na sidebar, e os leitores acompanham em tempo real as 'updates' do seu twitter.

O próprio Twitter disponibiliza um widget para isso. Eu achei isso interessante, mas, como uma boa "curiosa" que sou, resolvi dar uma analisada nos widgets disponibilizado pelo twitter.

Encontrei um onde as atualizações do twitter aparecem no seu blog com efeito rotativo. E foi o que achei mais interessante.







Neste Widget, aparece o seu avatar do Twitter no topo, e todas as mensagens que você recebeu ou enviou no dia.

Só que o código deles é todo em inglês, então eu fiz algumas alterações no código, traduzindo-o totalmente e implementando algumas "cositas mas", que no original não tinha.

O widget original foi criado por Dustin Diaz.

O código que vou postar aqui para vocês foi modificado por mim, com base no código original.



Se você quiser inclui-lo também em seu blog, vá até 'Layout' → 'Elementos de página' → Clique em 'Adicionar um elemento de página'→ Escolha tipo 'HTML/Javascript'.



Copie e cole o código abaixo:





texto planoprint?

01 <script src="http://sites.google.com/site/mundodarkness/tweet-update-rotativo.js"></script>



02 <script>



03 new TWTR.Widget({



04 version: 2,



05 type: 'profile',



06 rpp: 5,



07 interval: 4000,



08 width: 'auto',



09 height: 300,



10 theme: {



11 shell: {



12 background: '#000000',



13 color: '#ccc4cc'



14 },



15 tweets: {



16 background: '#000000',



17 color: '#e0dce0',



18 links: '#787a78'



19 }



20 },



21 features: {



22 scrollbar: false,



23 loop: true,



24 live: true,



25 hashtags: true,



26 timestamp: true,



27 avatars: false,



28 behavior: 'default'



29 }



30 }).render().setUser('NOME-DO-SEU-TWITTER').start();



31 </script>









Personalizando as cores do widget no código:



Você pode alterar as cores de fundo e cores do texto de acordo com o estilo do seu template.



Para personalizar as cores de fundo do widget basta alterar os valores referentes no trecho abaixo:

shell: {

background: '#000000' -> cor do plano de fundo

color: '#ccc4cc' -> cor do texto





Para personalizar as cores onde aparecem o texto e os links das atualizações, basta alterar os valores referentes no trecho abaixo:



tweets: {

background: '#000000'-> cor do plano de fundo

color: '#e0dce0'-> cor do texto

links: '#787a78'-> cor dos links



Em: rpp: 5

você pode alterar a quantidade de "Twitadas" que você quer que apareça no widget, basta alterar o número 5 para o número que quiser.



Não esqueça de incluir no código o nome do seu Twitter, no local indicado, caso contrário não funcionará.



A demo deste widget pode ser conferida aqui.





Este código foi modificado e traduzido a partir do código original disponibilizado pelo próprio Twitter, em inglês.





Se preferir, confira outro widget Twitter update na sidebar (sem o efeito rotativo), onde as 'updates' aparecem na sidebar de forma simples sem efeito algum.