3 de jan. de 2011

Como colocar um pássaro retwitter no blog

Que tal um lindo passarinho azul voando sobre a página do seu blog? Legal não é? Pois é,  e ainda se torna divertido, pois quando a página é rolada, o pássaro vai até onde a página parou, ficando visível ao usuário.

Colocando no seu blog, seus leitores não estarão mais sozinhos no site! Estarão com ele, o companheiro pássaro azul!


Então, se interessou?


 



Vamos instalar!

Logado no blogger, vá em
"Design" - "Ediar HTML" , marque a caixinha "Expandir modelos de widgets".


Agora procure pela linha <data:post.body/>  (ctrl+f para procurar).

Obs: "Clique nas imagens para ve-las em tamanho maior".
Logo acima dessa linha cole o código abaixo.
<b:if cond='data:blog.pageType == "item"'><script src='http://oloblogger.googlecode.com/files/tripleflap.js' type='text/javascript'></script>
<script type='text/javascript'>
var birdSprite=&quot;http://oloblogger.googlecode.com/files/birdsprite.png&quot;;
var targetElems=new Array(&quot;img&quot;,&quot;hr&quot;,&quot;table&quot;,&quot;td&quot;,&quot;div&quot;,&quot;input&quot;,&quot;textarea&quot;,&quot;button&quot;,&quot;select&quot;,&quot;ul&quot;,&quot;ol&quot;,&quot;li&quot;,&quot;h1&quot;,&quot;h2&quot;,&quot;h3&quot;,&quot;h4&quot;,&quot;p&quot;,&quot;code&quot;,&quot;object&quot;,&quot;a&quot;,&quot;b&quot;,&quot;strong&quot;,&quot;span&quot;);
var twitterAccount = &quot;http://twitter.com/imadyh&quot;;
var tweetThisText = &quot;Leyendo: <data:post.url/>&quot;;
tripleflapInit();
</script>
</b:if>

O código vai ficar assim como na imagem:




Na parte destacada em vermelho  no código ( http://twitter.com/imadyh), coloque o seu twitter e depois salve!
 

Obs. O pássaro será visto apenas nas postagens.

Recomendações


Para evitar a perda do código javascript e da imagem do pássaro, baixe os arquivos abaixo.
 
Baixar Código Javascript: tripleflap.js <- 
Baixar Imagem: birdsprite.png <-

Hospede-os em seu servidor, e subtitua no código. Na parte destacada de azul, coloque a URL do código javascript, e na parte em verde, coloque a URL da imagem.


Fonte: www.lifeconsulting.multiply.com
               www.cblogger.net

11 comentários:

Unknown disse...

Olá.
Por favor eu preciso de uma ajuda este código eu coloquei nos meus blogs e não funcionaram. Deixei um comentario no Códigos Blogger e a resposta foi:se vc colocou conforme orientação tem que dar certo. Fis e refis e nada, mudei para o Firefox, tirei o cabeçalho do Blogger, pois o passaro quando apareceu ficou só na imagem do cabeçalho.Agora o código tá lá quem sabe se o passaro resolve aparecer. Se vcs podem me ajudar eu ficarei muito grata. Ficarei no aguardo de um breve contato.
Obrigado.

Imadyh disse...

Olá! Quero ajudar. Dei uma incrementada neste post, se ainda não conseguir. Me deixe novo comentario, ou me envie um email. Contendo os passos que você fez, e o que não conseguiu. Abraços!

Unknown disse...
Este comentário foi removido pelo autor.
Imadyh disse...

Quero ajudar você. Como vê implementei o código do passáro aqui,ele está funcionando.
Você poderia criar um outro blogger de teste, com um template minima, e tentar coloca-lo nele, para ver se funciona.Faz o seguinte se puder me envie uma cópia do template que você está usando, vou tentar coloca-lo nele.

Roger disse...

Apareceu a seguinte mensagem:
Corrija o erro abaixo e envie o seu modelo novamente.
Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
Mensagem de erro em XML: The reference to entity "d" must end with the ';' delimiter.
Como resolve-lo ?.

Unknown disse...

Boa noite, meus lindos amigos, olha vcs nem vão acreditar, mas no meu blog Simples/Natural(que vcs são seguidores)meu lindo bird blue esta ativo.Minha alegria é imensa, eu apaguei o código do Código Blog e coloquei o de vcs, mesmo que seja o mesmo, mas não sei funcionou. Agora elê esta no outro blog:http://wwwavivarcel.blogspot.com/, esta com o mesmo problema. Realmente pode ser problema com html do Blogger In Draft.Por gentileza façam uma visita, e outra coisa em página tem mimos, eu ofereço para vcs.
Gente obrigado de todo coração.
Bjos.

Imadyh disse...

Oi querido!
Quero ajuda-lo.
Acredito que você tem um template com alguns códigos diferentes, já aconteceu comigo a mesma mensagem de erro ao tentar instalar outros widgets.
Temos que contornar isso. Mas para ajuda-lo preçiso que você me envie exatamente o trecho do template onde colocou os códigos.
Assim eu analiso e vejo como mudifica-los para você.

Roger disse...

Mudei de ideia a respeito do pássaro.
Se puder me ajudar a inserir uma imagem em flash no lugar do título do meu blog seria mais proveitoso.
Tentei várias dicas e a mensagem é a seguinte:
Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
Mensagem de erro em XML: The reference to entity "d" must end with the ';' delimiter.

O endereço do blog é:
http://lage-martins.blogspot.com/
Muito obrigado.

Roger disse...

~Como não consegui inserir uma animação em flash no cabeçalho do meu blog,acabei encontrando uma solução que acabou me satisfazendo tb.
Como não conseguia inserir imagem em flash e tb não conseguia eliminar o cabeçalho,fui em editar
html e coloquei o títulp do blog na mesma cor da página o que fez que ele "desaparecesse".
Mas ficou o espaço do cabeçalho em branco.
Se vc puder me dizer o que deverei apagar em editar html para que o cabeçalho original do blog desapareça,ficarei agradecido.
Se preferir favor enviar por email:marmarsam@hotmail.com

Obs:Tentei lhe enviar todo o código,mas foi barrado !!!.
Obrigado.

Imadyh disse...

Olá! Desculpe lamento não ter respondido antes. Confere este link: http://imadyh.blogspot.com/2011/02/flash-no-blogger.html e vê se te ajuda.
Você fez backup antes de fazer as alterações que fez? Se fez restaure, e tente este tutorial. Me envie o código do seu template e te ajudo a resolver.

Roger disse...

Não estou conseguindo enviar o código pq é muito grande e o seu blog não está aceitando.
Se puder lhe enviar p/ email,mande o seu endereço para:marmarsam@hotmail.com
Obrigado.

Postar um comentário

Deixe seu comentário aqui
Para exibir sua foto, escreva o seu comentário e clique em "Visualizar" e em seguida clique em "Adicionar Foto de Perfil"(Só é exibido quando o comentário é publicado como Conta do Google). Para editar seu perfil Clique aqui.