sexta-feira, 20 de abril de 2012

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
Compartilhe:

Quem escreveu esse post?


Foi a Roberta, que adora tudo o que for kawaii, macio, fofo, de chocolate e com morango no topo. Se ela não estiver online por aqui, você pode encontrá-la também em...


Caso queira adicionar um emoticon/emoji ao seu comentário, copie o link de uma das imagens abaixo:

15 comentários

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

REPLY

Holaa (: tu blog es hermoso (:

Me afilias?

http://www.tuuuespacio.blogspot.com

REPLY

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.

REPLY

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

REPLY

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

REPLY

Obrigada;)
Beijo.

REPLY

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

REPLY

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

REPLY

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

REPLY

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^)

REPLY

ai que lindo esse gifs nos comentarios!!

:j: :v:

REPLY

Que bom que gostou!:v:Beijus<3

REPLY

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!

REPLY

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

REPLY

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...

REPLY

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 - Google+ - Deviantart

Reino Kawaii . 2018 Copyright. All rights reserved. Designed by Blogger Template | Free Blogger Templates