Coloque o Mascote do Twitter pra Voar no su Blog

Que o Twitter virou mania todo mundo já sabe! Que todo mundo quer mais seguidores é certeza!

Mas que todos os seguidores tem um mascote do Twitter personalizado voando pra lá e prá cá no site já é outra história!

Piu, PIu, PIU…

O passarinho do Twitter é bem bonitinho, só que todos os que encontramos na Internet são imagens paradas… Cai entre nós, passarinho foi feito pra voar não é verdade? E justamente por isso trago a vocês um interessante recurso que vai fazer o passarinho do Twitter voar no seu site ou blog!

Abaixo você observa os movimentos do passarinho:

Veja como é fácil botar esse passarinho para voar

_

Para sites Html, Asp, Php:

Basta inserir o código a seguir num lugar apropriado dentro do código interno do site e alterar apenas o usuário do Twitter.

_

Para blogs WordPress:

1º Acesse seu painel de administrador; 2º Vá em Widgets dentro da aba Aparência; 3º Arraste um texto Html para o ultimo lugar dentro coluna lateral de seu blog e insira o código abaixo; 4º Altere o usário do Twitter, salve e veja como ficou!

<script src="http://oloblogger.googlecode.com/files/tripleflap.js" type="text/javascript"></script> <script type="text/javascript"> var birdSprite='http://www.seusite10.com.br/images/birdspriteOFICE.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 = 'http://www.twitter.com/seusite10'; var twitterThisText =''; tripleflapInit(); </script>

OBS: No código acima você precisa alterar apenas o endereço do Twitter que está destacado em azul, assim sempre que verem o passarinho voando em seu site e clicarem nele serão direcionados para seu Twitter!

É Simples Assim…

… Mas que Tal ir Mais Além?

Vou ensinar você a criar um mascote personalizado e exclusivo que será apenas seu!

Preparei dois vídeos ensinando como fazer, o primeiro é o tutorial que ensina a técnica porém corta as cenas da criação que são exibidas num clipe musical no segundo vídeo. Ambos os vídeos estão em HD.

_

_

_

_

Técnica de Criação de um Mascote Twitter Personalizado

1. Acesse um site de sprites e salve a imagem que contém os movimentos de seu personagem favorito, dê preferência a imagens com o fundo transparente em PNG. Eu recomendo o seguinte site para baixar spriteshttp://www.retrogamezone.co.uk/

_

A imagem de 934×1129 pixels em PNG logo abaixo foi utilizada no tutorial.

_

2. Em seguida realize o download do arquivo PSD mencionado no vídeo para ter como base para seu projeto.

_

_3. Abra o arquivo PSD (Compatível com Photoshop CS4 em diante) e ajuste o tamanho da tela de pintura para o mesmo da imagem (em pixels).

4. Recorte as cenas da imagem de sprite mais compatíveis com os movimentos do passarinho e posicione-as sobre ele._

_

5. Apague a camada do passarinho e deixe todo o fundo transparente.

_

6. Agora dimensione novamente o tamanho da tela de pintura para o original inicial que e de 256×320 pixels.

_

7. Salve a imagem em formato PNG.

_

8. Hospede a imagem criada na internet, pode ser em seu site ou em outro serviço online que realiza esse trabalho como, por exemplo, o www.imageshack.us.

_

9. Copie o link de hospedagem da imagem e cole-o sobre o link anterior destacado em verde no código abaixo.

<script src="http://oloblogger.googlecode.com/files/tripleflap.js" type="text/javascript"></script> <script type="text/javascript"> var birdSprite='http://www.seusite10.com.br/images/birdspriteOFICE.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 = 'http://www.twitter.com/seusite10'; var twitterThisText =''; tripleflapInit(); </script>

_

10. Salve e pronto! Você já pode apreciar o seu mascote exclusivo.

_

Se tiver dificuldades em criar o personagem, assista a aula que ensina em mais detalhes os procedimentos de criação. É isso ai pessoal, com esses mascotes do Twitter seu visitante não tem como escapar e nem como dizer que não viu o botão de ‘follow’ no Twitter!

via  - www.seusite10.com.br