Colocar o Pássaro do Twitter e Qualquer Imagem Voando no Blog
Como colocar o pássaro do Twitter voando em seu blog, Ou qualquer imagem que desejar pode se movimentar na tela enquanto as pessoas navegam pelo seu blog, este é um efeito bem interessante e fácil de usar. Mas é claro se quiser outra imagem precisará de um programa para editar a imagem e depois hospedar essa mesma imagem para usar no código.
Para fazer isso entre na pagina layout, adicionar gadget, HTML/javascript e cole esse código:
<script src="http://oloblogger.googlecode.com/files/tripleflap.js" type="text/javascript"></script>
<script type="text/javascript">
var birdSprite='http://oloblogger.googlecode.com/files/birdsprite.png';
var targetElems=new Array('img','hr','table','td','div','input','textarea','button','select','ul','ol','li','h1','h2','h3','h4','p','code','object','a','b','strong','span');
var twitterAccount = 'https://twitter.com/fabianoroberto';
var twitterThisText ='';
tripleflapInit();
</script>
Nessa parte altere o endereço do seu perfil no Twitter que está nesta linha: var twitterAccount = 'https://twitter.com/fabianoroberto';
E so clicar em para salvar e pronto.
Para fazer outras Imagens se Movimentarem:
Tem que editar a imagem que deseja em um quadro Mais ou Menos como esse abaixo
Parece complicado mais é uma alteração bem simples de se fazer no código, mas antes disso você precisará criar uma imagem com o desenho, personagem ou foto que desejar, mas com diversas imagens parecidas lado a lado. Na verdade você precisa 5 linhas com 4 imagens uma do lado da outra em cada linha e salvando com fundo transparente.
Se quiser usar com alguma outra imagem precisará criar a imagem você mesmo,Procure alguns sites e programas para editar imagens:
dica que pode ajudar a fazer a imagem personalizada é usar um programa que permita transparência. Crie uma imagem no tamanho 256×320 e salve a imagem padrão do pássaro do twitter (http://oloblogger.googlecode.com/files/birdsprite.png) depois monte sua imagem usando a do twitter semitransparente por cima, assim ficar mais fácil posicionar corretamente os desenhos dentro da imagem e quando terminar é só retirar a imagem do twitter.
O exemplo abaixo que sobrepondo as imagens os desenhos se encaixam perfeitamente.
E veja também como Hospedar Imagens no Blogger
Apos hospedar a imagem só precisam alterar essas linhas no código:
var birdSprite='http://oloblogger.googlecode.com/files/birdsprite.png'; colocando o endereço da imagem que desejar.
Nesta outra linha: var twitterAccount = 'https://twitter.com/fabianoroberto'; coloque o endereço do twitter ou qualquer outro site ou pagina do seu blog que desejar
E colocar no seu blog da mesma maneira que o código original com a imagem do twitter: Pagina layout – adicionar gadget – HTML/javascript.
Sabemos que essa segunda opção usando imagem personalizada voando pela tela dá trabalho, mas não tem outro jeito de fazer porque o código já foi desenvolvido nesta base de tamanho e padrão de imagem.
Como colocar o pássaro do Twitter voando em seu blog, Ou qualquer imagem que desejar pode se movimentar na tela enquanto as pessoas navegam pelo seu blog, este é um efeito bem interessante e fácil de usar. Mas é claro se quiser outra imagem precisará de um programa para editar a imagem e depois hospedar essa mesma imagem para usar no código.
Para fazer isso entre na pagina layout, adicionar gadget, HTML/javascript e cole esse código:
<script src="http://oloblogger.googlecode.com/files/tripleflap.js" type="text/javascript"></script>
<script type="text/javascript">
var birdSprite='http://oloblogger.googlecode.com/files/birdsprite.png';
var targetElems=new Array('img','hr','table','td','div','input','textarea','button','select','ul','ol','li','h1','h2','h3','h4','p','code','object','a','b','strong','span');
var twitterAccount = 'https://twitter.com/fabianoroberto';
var twitterThisText ='';
tripleflapInit();
</script>
Nessa parte altere o endereço do seu perfil no Twitter que está nesta linha: var twitterAccount = 'https://twitter.com/fabianoroberto';
E so clicar em para salvar e pronto.
Para fazer outras Imagens se Movimentarem:
Tem que editar a imagem que deseja em um quadro Mais ou Menos como esse abaixo
Parece complicado mais é uma alteração bem simples de se fazer no código, mas antes disso você precisará criar uma imagem com o desenho, personagem ou foto que desejar, mas com diversas imagens parecidas lado a lado. Na verdade você precisa 5 linhas com 4 imagens uma do lado da outra em cada linha e salvando com fundo transparente.
Se quiser usar com alguma outra imagem precisará criar a imagem você mesmo,Procure alguns sites e programas para editar imagens:
dica que pode ajudar a fazer a imagem personalizada é usar um programa que permita transparência. Crie uma imagem no tamanho 256×320 e salve a imagem padrão do pássaro do twitter (http://oloblogger.googlecode.com/files/birdsprite.png) depois monte sua imagem usando a do twitter semitransparente por cima, assim ficar mais fácil posicionar corretamente os desenhos dentro da imagem e quando terminar é só retirar a imagem do twitter.
O exemplo abaixo que sobrepondo as imagens os desenhos se encaixam perfeitamente.
E veja também como Hospedar Imagens no Blogger
Apos hospedar a imagem só precisam alterar essas linhas no código:
var birdSprite='http://oloblogger.googlecode.com/files/birdsprite.png'; colocando o endereço da imagem que desejar.
Nesta outra linha: var twitterAccount = 'https://twitter.com/fabianoroberto'; coloque o endereço do twitter ou qualquer outro site ou pagina do seu blog que desejar
E colocar no seu blog da mesma maneira que o código original com a imagem do twitter: Pagina layout – adicionar gadget – HTML/javascript.
Sabemos que essa segunda opção usando imagem personalizada voando pela tela dá trabalho, mas não tem outro jeito de fazer porque o código já foi desenvolvido nesta base de tamanho e padrão de imagem.