Colocando ultimas do Twitter em outros blogs

Ainda não vi um tutorial do tipo em nenhum dos blogs que visitei. Gostaria de pedir a ajuda de todos para divulgar este post pois creio que será de grande ajuda não só aos blogueiros do UOl blog como os que utilizam todos os tipos de páginas que aceite html, visto que o post de hoje pode ser incorporado a qualquer página web.

Para quem sabe e gosta de HTML, entenderá que com o código que ja vem no Blogger ou Blogspot é possível modificá-lo e inseri-lo em sua página personalizada.

Falarei de três formas de inserir uma div ou gadget de ultimas postagens do Twitter no seu blog ou site. Lembre-se de fazer testes com outros blogs que não sejam o seu de trabalho e fazer sempre o backup do seu modelo.

Para fazer um campo da mesma forma que você vê aqui no Arruma Blog ao lado (até final de 2009 se o blog não mudar) siga os passos:

- Indo em Layout, depois HTML, expanda os modelos de widgets. Procure por:

]]>

Se você não usar Blogspot ou Blogger, localize o final da tag /Style de seu CSS, que é válido para Uol Blog também.

Dê uma quebra de linha [aperte Enter no seu teclado] e cole o código a seguir:


<br /> .twittop{<br /> margin:5px 0px 0px 0px;<br /> height:30px;<br /> background:#141313 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxpXbLjVyDbGDFE2d1mTrMMOmBvC4At_90IQeLaR9VFsiD2pwTTEIGwCGg46bgKFQ6VGr_DpwFZOFGVxkyaKVStNwvuhYqdd_12VFqJGjnXXMpKcBoR300Fl4f6Wr5J7H7TKDMlCnHJlU/s1600/twitop.jpg) no-repeat;<br /> width:335px;<br /> <br /> }<br /> #twitter_div{<br /> width:333px;<br /> float:left;<br /> height:100%;<br /> padding:0px 0px;<br /> margin:0px 0px;<br /> background:#fff;<br /> border-left:1px solid #fff;<br /> border-right:1px solid #fff;<br /> border-bottom:1px solid #fff;<br /> font-family:Tahoma,Century gothic,verdana, Arial, sans-serif;<br /> }<br /> <br /> ul#twitter_update_list{<br /> <br /> list-style:none;<br /> padding: 0px 0px;<br /> margin:0px 0px;<br /> <br /> }<br /> ul#twitter_update_list li{<br /> font-size: 11px;<br /> list-style:none;<br /> padding: 5px 5px;<br /> margin:0px 0px;<br /> line-height:18px;<br /> background:#B5D3DD url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvpyjYXWv55AiJvgDzeWmfXsznUh3ojmxqlAxqzlnFlcurZa5trQDF4FxVBQ8FirksRJi9xOvNU0jGq4xgRQi1vMRD0uDo4ZtWC-3LHC29ItdlptZKTSlDUn0GYpXNdISRr-LsjFNPHsA/s1600/twit.jpg) repeat-x;<br /> border-bottom:1px dotted #ccc;<br /> color:#222;<br /> }<br /> <br /> ul#twitter_update_list li:hover{<br /> font-size: 11px;<br /> list-style:none;<br /> padding: 5px 5px;<br /> margin:0px 0px;<br /> line-height:18px;<br /> background:#dcdcdc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_naSAv9npxAE3J1yWFT088l7__T9dwXScm1SBdR9ks0N61z4vWeaQIkn2mGxjV_oi0trk2RowUxgOE0f4Q-n4qjIgM2amY5jeaKgtNwVO4XivxnEe_eZUkU9U92Z1bwmmzrVobTgLXtw/s1600/twith.jpg) repeat-x;<br /> border-bottom:1px dotted #ccc;<br /> <br /> }<br /> <br /> #twitter_update_list li a:link, #twitter_update_list li a:visited{<br /> <br /> color:#0066FF;<br /> <br /> }<br /> <br /> #twitter_update_list li a:hover{<br /> <br /> color:#0099FF;<br /> <br /> }<br /> <br />

OBS:Você pode mudar as cores que se encontram no código para ficar bonito no seu blog, elas normalmente iniciam com a tag # seguida de números como por exemplo: color:#0099FF;
Você também pode mudar o tamanho da horizontal e vertical mudando o código width:333px; pelo tamanho que você deseja.

Agora copie este outro código e cole se desejar dentro de um Gadget de HTML/Javascript no local onde você deseja que ele fique. No caso do Arruma Blog ele foi inserido diretamente no HTML da página. Lembre-se de mudar a palavra SEUNOME para o seu perfil no twitter. Não mude nada nesta parte. Se você não usa blogspot ou Blogger, escolha o local onde ele ficará e cole diretamente no local.


<br /> <div class="'twittop'"><br /> </div><br /> <div id="'twitter_div'"><br /> <br /> <ul id="'twitter_update_list'/"></div> <script src="'http://twitter.com/javascripts/blogger.js'" type="'text/javascript'/"> <script src="'http://twitter.com/statuses/user_timeline/SEUNOME.json?callback=" count="5'" type="'text/javascript'/">

Pronto, agora você ter um gadget dos seus ultimos posts totalmente personalizado.

Funcionalidade: - Ao passar o mouse sobre alguma publicação do twitter, o mesmo mudará a cor. - Ele busca sempre as publicações mais recentes. - Uma imagem ficará no topo da div indicando o que é aquilo (você pode e deve mudar a imagem em inglês no 1º código). - E pode personalisar o código da forma como desejar.

Para você inserir o outro modelo de Novas do Twitter em seu blog ou site, siga os passos:

- Indo em Layout, você pode criar um Gadget de HTML/Javascript e colar diretamente o código:
<div id="twtr-profile-widget"> </div> <script src="http://widgets.twimg.com/j/1/widget.js"></script> <link href="http://widgets.twimg.com/j/1/widget.css" type="text/css" rel="stylesheet"> <script> new TWTR.Widget({ profile: true, id: 'twtr-profile-widget', loop: true, width: 210, height: 250, theme: { shell: { background: '#3082af', color: '#ffffff' }, tweets: { background: '#ffffff', color: '#444444', links: '#1985b5' } } }).render().setProfile('rafaelramosf').start(); </script> <div class="'clear'/">

Este é mais simples, ele pode ser colocado diretamente no local onde você deseja que ele apareça, visto que seu CSS é incorporado no código e você pode personalisar as cores da forma como desejar. Por padrão ele está como azul. Não se esqueça de mudar onde está escrito SEUNOME pelo seu perfil no Twitter.

A ultima forma que funciona normalmente com os serviços de blog do Google é o gadget oficial do Twitter para o Blogger e seus sites, que é bem parecido com o código de cima.

Você segue o link abaixo e insere o Gadget em seu blog ou site. http://twitter.com/goodies/widgets

Aqui você encontra muitas coisas úteis e personalisáveis como o Gadget de seguir várias pessoas que você admira. Se por acaso os códigos não funcionarem podem comentar.Retire os BR de quebra de linha dentro das caixas de textos que se iniciam por <>