domingo, 26 de junho de 2011

Widget Tweets Recentes personalizado

O blog do Vinícius vai te ensinar a fazer um Widget Tweets Recentes para colocar no seu site ou no seu Blog!!!

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://canaldamicrosoft.blogspot.com" 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=5" 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://canaldamicrosoft.blogspot.com/p/twitter.html"> Instale este widget</a>
</div>
<style type="text/css">
#twit{background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ6mbs-5cnIqHN269oL7eFVqbGEssZcd2ESqqZl_RFJ8XxFjFEfCVsZ8f0I3WFRV4kk-9qwr9qPnC4_5LQ8q8Yy-6ejggrkYfmtfHxYGsFXlkmY1cILU3Byxm7vXG1eLBYjv3Zg7Puxz93/) no-repeat;width:472px; height:500px;}
#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=5 você pode alterar a quantidade de "Tweets" que você quer que apareça no widget, basta alterar o número 5 para o número que quiser.

No meu caso, eu preferi que aparecessem apenas os 5 ú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!

Vou deixar aqui como ficou a imagem para voçês talvez quiserem hospedar em qualquer site!!!


0 comentários:

Postar um comentário

Comentários