Tweets com Background no Blog

Olá! Tudo bem ^-^ Boas vindas a todos sempre!
Hoje vou mostrar para vocês como colocar um gadget que irá mostrar seus últimos tweets com background personalizado, assim como o que uso aqui, que aprendi a fazer graças ao site =>Nymphont<= (créditos) e que fica assim:
 
Vamos lá!
1. A primeira coisa a ser feita é personalizar uma imagem; eu usei o pássaro do twitter deste pacote aqui, que tem mais modelinhos de passarinho, e o Photoscape, que tem muitos modelinhos de balões fofos. Se quiserem, podem usar a imagem que uso:
 
Hospede a imagem em algum site para depois pegar a URL dela.
2. Agora, acesse seu template na área de edição de HTML e procure por ]]></b:skin>; quando encontrar, adicione ACIMA o código:
#twitter_div {
text-align : left;
display : block;
width : 277px;
height : 205px;

background-image : url(URL DA IMAGEM);
background-repeat : no-repeat;
background-position : 0% 0%;
font : normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
line-height : 1.4em;
color : #624e5b;
}

#twitter_update_list {
margin : 0;
padding : 20px 20px 5px 20px!important;
list-style-type : none;
text-indent : 0;
line-height : 1.4em;
}

#twitter_update_list li {
margin : 3px 0!important;
padding : 5px!important;
}
a#twitter-link {
float : right!important;
text-align:right!important;
padding : 0 25px;
}
#twitter_div a, #twitter_div a:visited {
color : #ff5f9d;
}
#twitter_div a:hover, #twitter_div a:active, #twitter_div a:focus {
color : #624e5b !important ;
}
As áreas destacadas são as principais para editar. Em text-align : left, defina a posição do texto para esquerda ou direita (right); width e height se referem ao tamanho da imagem (largura e altura); background-image é onde se adiciona uma imagem de fundo; em font você escolhe o tipo, tamanho e estilo; e color se refere as cores do texto e dos links.

3.Agora procure por </body> e adicione ACIMA estes scripts:
<script src='http://twitter.com/javascripts/blogger.js' type='text/javascript'/>
<script src='https://api.twitter.com/1/statuses/user_timeline/TWITTER_ID.json?callback=twitterCallback2&amp;count=1' type='text/javascript'/>
Onde está escrito Twitter_ID, substitua pelo seu nome de usuário do twitter sem o @. Visualize seu template e se tudo estiver certo salve. Mas você ainda não vai ver o resultado do tutorial ok?

4. Se deu tudo certo, vá até seu Layout, em Elementos da Página e adicione um novo gadget Html/JavaScript com este código aqui:
<div id='twitter_div'><ul id='twitter_update_list'></ul><a href='http://twitter.com/TWITTER_ID' id='twitter-link' title='follow me!'>follow me!</a></div>
Novamente troque Twitter_ID pelo seu nome de usuário sem o @; onde está escrito follow me! você pode alterar pelo texto que quiser. Salve o novo gadget e visualize seu template. O resultado será algo como:
É isso; simples neh ^ ^
Beijus<3






Postar um comentário

15 Comentários

  1. Hi, your blog is so cute!
    Nice to meet your blog:)
    Happy week!

    ResponderExcluir
  2. Holaa (: tu blog es hermoso (:

    Me afilias?

    http://www.tuuuespacio.blogspot.com

    ResponderExcluir
  3. Thanks and welcome! Kisses...
    Tu espacio: Hola :3Voy a abrir de nuevo las afiliaciones en mayo. Voy a tomar tu solicitud en consideracion visitare a usted. Gracias! Besitos.

    ResponderExcluir
  4. So cuuute picture <3
    xx
    http://icepandora.blogspot.com

    ResponderExcluir
  5. Uau! seu blog é muito lindo! já estou seguindo tá :3
    você pode seguir o meu também ?
    http://fannikawaii.blogspot.com.br/
    bjs^^

    ResponderExcluir
  6. Anônimo03 maio

    ah,não deu certo no meus blogs!!
    o que posso fazer?

    ResponderExcluir
    Respostas
    1. Oi flor.(*¯︶¯*)
      Não deu certo? Em qual parte? Vc colocou sua ID sem @ e retirou o espaço do último código?
      Beijinhus. (>^ω^<)

      Excluir
    2. Anônimo06 maio

      eu botei esse dai mais tentei de dois jeitos : botei de #/?/laragoncalves e depois botei so o nome laragoncalves mais nenhum deu certo.

      Excluir
    3. Bom, vou verificar aqui de novo quando meu PC estiver pronto.No caso, quando se coloca apenas o nome sem o @ na frente,dá certo.
      Depois vou rever os códigos ok? Bju (^3^)

      Excluir
  7. Anônimo08 maio

    ai que lindo esse gifs nos comentarios!!

    :j: :v:

    ResponderExcluir
  8. Que bom que gostou!:v:Beijus<3

    ResponderExcluir
  9. Testei esse código, fiz exatamente como diz o tuto mais não aparece a frase que vc twitta, só aparece a imagem e eu usei essa tua mesmo pra testar e aparece o nome 'follow me!'.
    Vou aguardar pra qnd vc concertar, bjoO!

    ResponderExcluir
    Respostas
    1. Hmmm...vou verificar o código aqui novamente ok.
      Bjus...

      Excluir
    2. Problema resolvido! Era o segundo código, que vai acima de /body que estava com um script antigo, que funcionava na época em que postei esse tutorial.
      Qualquer problema, me avise ok?
      Beijus...

      Excluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart

up