Mas vamos começar por partes: primeiro vamos fazer da imagem clássica do Twitter voando pelo seu site. 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>
Você só precisa alterar o endereço do seu perfil no Twitter que está nesta linha: var twitterAccount = 'https://twitter.com/fabianoroberto';
Depois clique para salvar e pronto.
Como usar outra imagem voando pela tela no lugar do pássaro do Twitter
Essa alteração é simples de 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. Veja as duas imagens abaixo, elas seguem esse mesmo padrão.
Essa outra imagem nós retiramos do código usado no blog: http://pivotattack.blogspot.com que foi usado como exemplo em um comentário feito em nosso tutorial: Como Comentar Blogs e Conseguir mais Visitas.
Então se quiser usar com alguma outra imagem precisará criar a imagem você mesmo, veja aqui alguns sites e programas para editar imagens:
Pesquisa: Qual o melhor programa para criar e editar imagens?
Editor de Fotos e Imagens Online Grátis
Achar e baixar imagens, fotos, icones para Blog
Uma 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.
E veja também como Hospedar Imagens no Blogger
Depois que fizer e 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. Esperamos que gostem!
Muito legal essa dica, obrigada Cynthia.
ResponderExcluirn consegui colocar n apareceu nada :(
ResponderExcluirsnoopdesing
ResponderExcluiracho que seu computador usou o historico de internet... clique F5 para atualizar a sua pagina.
entrei agora no seu blog e vi a imagem do passaro do twitter
Pelo amor de Deus, Fabiano, essas imagens são uma chatice, não faz isso não, amigo, rsrs Abraço.
ResponderExcluirIsaias
ResponderExcluirclaro que isso não é recomendado para todos os tipos de blogs... mas dependendo do tema do blog pode ser uma opção interessante...
além disso já recebi varios emails e comentários perguntando sobre o tema
Muito bom isso Fabiano! Acompanho seus posts desde que comecei a escrever meu blog e vou usar isso também. Obrigado.
ResponderExcluiroi gostaria de te fazer um pedido q pode se torna um otimo turturial!
ResponderExcluirEu ja vi em algums lugares um menu no lugar da barra navbar, que fica como se estivese fixado na parte superior da um otimo efeito mara o blog, e outra coisa ao remover o espaço que sobra entre a base superior e o topo se possivel confere este link do meu blog
http://animangacenterbrasil.blogspot.com/
so para lembrar naum to fazendo propaganda ta pessoal rsrsrs
Tá certo, amigão, eu uso várias coisas postadas aqui, aquilo foi só um desabafo...
ResponderExcluirFabiano
ResponderExcluirolá Fabiano gosto muito do site mais só que esse tutoria eu achei faz uns 3 meses atrais ta meio atrasado nisso =( mais o blog é bom e já me ajudo
Pelo amor de Deus, Fabiano, essas imagens são uma chatice, não faz isso não, amigo, rsrs Abraço.
ResponderExcluir--------------------
Concordo plenamente, mas fazer o que se tem gente que gosta :/
Essa animação do pássaro do Twitter é bonita, mas quando eu cehgo num blog e vejo termino me irritando porque ele atrapalaha muito, tira a té sua atenção. Então resolvi não instalar um desses no meu blog.
ResponderExcluirAcho bem legal, pena que no meu não deu certo!!
ResponderExcluirDepois tento de novo!!
Valeu!!
Concordo com o comentário do Isaias.
ResponderExcluirAcho que esse pássaro voador do Twitter em um blog, acaba incomodando o usuário que está navegando por lá.
Adoreiii!!Obrigada Fabiano
ResponderExcluirApartir de Onde Cola o Codigo Responde Ai ?
ResponderExcluirFabino a dica é bom ter seguidores, mas esse recurso "Eu acho" muito irritante, atrapalha a leitura, enfim. Bom pra quem gosta!
ResponderExcluirRandromedo
ResponderExcluirentre na sua pagina editar html, procure por:
<style type="text/css"> #navbar-iframe { display:block } </style>
onde está display:block; coloque display:none;
jonathan
sei que o código não é nenhuma novidade, mas achei a idéia de poder trocar a imagem bem interessante, além disso algumas pessoas perguntavam sobre o assunto
Valéria_Cris7
veja se não faltou algum detalhe no código... ou pode ser que seu blog usou o historico de internet e por isso não aparece, clique F5 para atualizar a pagina
Eduardok10CDs
é para colocar em um gadget de html/javascript em qualquer parte da pagina
Eu adorei e o passarinho já esta voando no meu blog,fica um charme!Obrigada!bjs!
ResponderExcluirMas isto aplica-se ao wordpress?
ResponderExcluirvou pesquisar sobre como fazer no wordpress
ResponderExcluirO codigo tb da para o wordpress?
ResponderExcluirGostaria de saber como faço para colocar anúncios do adsense dessa forma que vc colocou no inicio da pagina, o meu plano de fundo é amarelo queria colocar os anuncio sem cor de fundo, somente letras mas não sei como, pode me ajudar?
ResponderExcluirValeu cara, muito obrigado, eu queria saber como fazer com que o título do blog fique andando la em cima na guia!
ResponderExcluirNão sabia onde comentar,então vai ser aqui mesmo! Fabiano , é possível a modificação de um background apenas de uma página estática sem alterar a da página principal?
ResponderExcluirSueli
ResponderExcluirmeus anuncios do adsense eu configuro direto na pagina do adsense https://www.google.com/adsense
depois pego o código e coloco como um gadget de html/javascript
quando for configurar seu anuncio escolha uma cor de fundo parecida com a que usa no seu blog
Marcos B.A.
ResponderExcluirveja aqui um código para Barra de Endereço Animada
gserra
é possivel mudar a imagem de fundo somente em uma pagina, mas o html fica meio complicado e pode haver erros, você precisa usar esse código:Conteúdo diferente nas paginas do blog
para colocar o estilo CSS com a imagem de fundo somente para as paginas estaticas
Oi Fabiano !, eu usava blogger , ainda uso, mas agora tenho Blogger, sei meixer no Blogger , mas não Wordpress não , nos wigets, e configur quem pode comentar e moderação, vc tem algum tutorial que ensina a meixer nestas 2 coisas no Wordpress
ResponderExcluirAngelo
ResponderExcluirnão sei responder sobre wordpress... as vezes penso em criar um para fazer testes, mas por enquanto sei como fazer as coisas no Blogger
já vi sua resposta do meu Comentario
ResponderExcluirOh este blog nao diz nada para wordpress.
ResponderExcluirFogo que treta! Pode a paritr de agora ser cenas de wordpress.
Como colocar resumo e leia mais nos post no wp?
Valeu cara, você é muito bom bloguero!
ResponderExcluirObrigado pela dica mas acho que por enquanto no meu blog isso não ficará muito legal, mas essa dica é bem legal e bem fácil!
ResponderExcluirAcho a ideia interessante, mas atrapalha um pouco, porque entrei num blog que tem esse passarinho e as vezes ele para bem em cima do texto que estamos lendo e temos que subir ou descer a tela o tempo todo.
ResponderExcluirObrigado por fazer o tutorial depois vou tentar criar meu proprio personagem, sei bulir em fotoshop gimp etc acho que consigo de boa
ResponderExcluirqual é revolução certa da imagem e a posição dos personagens é que eu fiz esta imagem http://www.baixa.la/arquivos/8607118_imagem.png e ja redimecionei 3 vezes por que estava muito grande mais mesmo assim o personagem ainda continua cortado pela metade, quando ele troca para a imagem descer aparece partes do pes dos personagem de cima como eu faço para descubrir a posição certa de cada personagem é bom lembrar que eu fiz baseado na mesma posição de suais imagens de exemplo
ResponderExcluira imagem padrão(twitter) é no tamanho 256×320
ResponderExcluirhttp://oloblogger.googlecode.com/files/birdsprite.png
vou fazer uma atualização no tutorial para ajudar a criar a imagem
Valeu!! vou tentar sobrepondo em semi transparencia
ResponderExcluirFabiano aonde esta o banner do blog?
ResponderExcluirM@rko$
ResponderExcluirpara trocar a imagem é nesta linha
var birdSprite='http://oloblogger.googlecode.com/files/birdsprite.png';
Maneiro....to usando no meu blog!!! parabens pelo poste!!!
ResponderExcluirLegal... Estava a tempos procurando o código...
ResponderExcluirLegal,eu consegui colocar o pássaro e ficou muito legal.Valeu a dica.
ResponderExcluirmuito bom, tem como direcionar target? clicando no passaro.
ResponderExcluirIASD PAU MIUDO
ResponderExcluirnão tem como alterar o target... faz parte do código que é importado
Bom dia fabiano!
ResponderExcluirComo faço para quando clicar no passoro aparecer meu perfil não o seu?
não consigo mudar.
Vlw.
Isaias Lima
ResponderExcluiré nesta linha que você coloca o nome do perfil
var twitterAccount = 'https://twitter.com/fabianoroberto';
Olá!
ResponderExcluirMuito legal essa dica!
Valeu!
ola fabiano! eu consigui colocar o passaro, mais quando eu coloco para ele entrar no meu blog, ele nao entra, pq?
ResponderExcluirveja se na hora de alterar o link não apagou nada por engano... usou aspas simples para abrir e fechar?..
ResponderExcluiras vezes as pessoas misturam ' com " e dá erro
Muito boa sua dica excelente!!! Funcionou muito bem no meu blog: cinequartotv.blogspot.com
ResponderExcluirbrigaduuu!!!!
Oi
ResponderExcluirAdorei, tudo muito explicado, já to com o linck no meu blog vlw mesmo.
Oi,
ResponderExcluirAdorei a dica, já postei o passaro do Twitter no meu blog, vc explica de um jeito que facilita nossa vida rsrs.
Abraços
Como colocar o ´´Segue me´´ e o ´´Twitte a me´´ em portugues ?
ResponderExcluir@Kassetz normalmente os códigos tem algum parte para configurar o idioma
ResponderExcluirUsar Twitter em Português - Configurar Idioma do Twitter
Poxa gostei de mais disto..... muito legal... ja to usando no meu blog....
ResponderExcluirAbraços pessoal
cara vooç é inteligentee deee maiiiiisss nosssooo Deeeuuss
ResponderExcluirBoa tarde! Tudo bem?
ResponderExcluirPrimeiramente quero parabenizá-los pelo site: Dicas para Blogs, simplesmente amei.
Aprendi muitas coisas por lá..
Uma delas foi colocar o pássaro do twitter voando no Blog, porém há um problema que não consigo solucionar,
mesmo trocando o usuário no código, ao atualizar a página ou entrar novamente no Blog volta o usuário do
Fabiano (Twitter) e gostaria de tirar isso, pois o Blog que coloquei é de uma cantora gospel. Já tentei procurar
o código para apagar mas, não o encontro. POR FAVOR, gostaria que alguém pudesse me ajudar com essa
questão, já mandei até tweet para o Fabiano, mas não obtive resposta.
Se tiverem telefone para que eu possa entrar em contato com vocês seria ótimo, se for TIM melhor ainda.
Desde já agradeço a atenção, fico no aguardo.
Greyci Marcon.
@Greyci Marcon você testou antes de trocar o nome de usuario do twitter?
ResponderExcluirseu computador pode estar usando o historico de internet, porque depois que troca isso no código não tem como ele modificar sozinho
mto bom, mas é só um né? e se eu colocar varia vezes vem mais de um?
ResponderExcluiradoreiiiiiiiiiiiiii lindo
ResponderExcluirsigam o me blog gente que gosta da demi miley ouu selena o nome emanuteles.blogspot.com
Oi, eu gostaria de fazer um pedido, caso eu não queira que ao clicar no pássaro seja redirecionado para o twitter e sim que o post seja marcado como +1 no Google, eu já tenho uma imagem para fazer uma animação diferente da do pássaro do twitter, só me falta fazer essa parte! Agradeceria muito a sua ajuda!!!!
ResponderExcluir@JEANN DFL sua idéia é bem interessante, mas o botão +1 tem um código interno então não tem como usar do mesmo jeito que o passaro do twitter
ResponderExcluirmuito legal adoreiiiiiiiiii parabém pelo site
ResponderExcluirdica mto legal, o meu blog fiko mto + loko...
ResponderExcluirBlog A.P.A:
http://growinginthelife.blogspot.com/
valeu cara as coisas que busco na net so funcinam bem as que pego aqui no seu blog
ResponderExcluirObrigadaa até q enfim consegui algo legal pra por no meu blog amei de verdade!!
ResponderExcluirFabiano, é só fazer a imagem, colocar o html no lugar da outra, salvar e colocar no blog?
ResponderExcluirE voê poderia fazer uma imagen do passaro na cor vermelha? Se possivel envia para jrpn53@hotmail.com
ResponderExcluirJoão Raphael Nunes
ResponderExcluirnós não temos outras imagens. mas você pode fazer com um programa de edição de imagens
Mas como eu faco? Tentei mas ficou ruim
ResponderExcluiro unico jeito é criar a imagem
ResponderExcluirVlw cara vc é fods xD
ResponderExcluirCara vc é bom d+, graças a vc o meu blog ta bem melhor!!!!!=)
ResponderExcluirsó não gostei de ter que mudar o meu endereço do meu perfil pelo dele, parece meio esquisito,
ResponderExcluirvocê deve colocar o endereço do seu perfil no código
ResponderExcluirtem como vc mostrar ai, uma imagem personalizada ?
ResponderExcluirvou adorar. não só eu todos.
Melissa Boaventura Sabino
ResponderExcluira segunda imagem tem um exemplo disso são aqueles bonequinhos.
mas é claro fazer uma personalizada dá trabalho e precisa de um programa para editar imagens
Olá, Fabiano!!! Gosto muito das suas dicas e todo dia venho aqui para conferir um poukinho a mais e ja sei quase tudo sobre blogs só há uma coisa que eu não sei!!!
ResponderExcluirPor Favor me ensina como colocar Titulo clicavél no blogger tipo assim: Coloco um titulo e outro titulo quando clico em cima dele ele abre com toda a postagem me ajuda ai por faovr cara!!!
msn:carlavitoria79@yahoo.com.br
o código para tornar o titulo do post clicavel é
ResponderExcluir< a expr:href='data:post.link' >< data:post.title/ >< /a >
se no seu blog o titulo não é um link deve estar somente assim:
< data:post.title/ >
Mais tipo assim: Aonde coloco o HTML? tem como se me explicar no msn? eu não entendi muita coisa do que se disse
ResponderExcluirTo online no msn todo dia de 12:00 ate 6:00 da tarde
Por favor Fabiano faz um código do pássaro na cor vemelha
ResponderExcluirMuito obg, funcionou perfeitamente.
ResponderExcluirSub-Zero entre na pagina editar html, marque para expandir o modelo e procure por data:post.title depois é só trocar pelo código do outro comentario que fiz
ResponderExcluir@JoaoRaphaelN
veja essa imagem
http://img192.imageshack.us/img192/4051/twittervoandoh.png
Tem um tanto de data:post.title como voi saber qual e o certo para colocar o codigo?
ResponderExcluiré neste trecho
ResponderExcluir<div class='post hentry'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h1 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
Valew, fiz com o do HoneyComb e ficou muito bom, eusouandroid . com
ResponderExcluirai ifcou lindooooooooooooooo gente vcs arrazam com este blog parabeeeeeeeeeeeeeens
ResponderExcluirvocê poderia fazer um do facebook tb, tipo um foguete ou sei la pleasee
ResponderExcluirdesculpe, mas não fazemos imagens
ResponderExcluirAdorei o post, pena que não possa ser usado em Tumblr, será que dá?
ResponderExcluirpor enquanto ainda não tenho esse código para usar no tumblr
ResponderExcluireu coloquei o codigo, mais não esta funcionando
ResponderExcluirconsegui, troquei o endereço da conta do meu twitter pelo retwet.
ResponderExcluirObrigada pela ajuda, vou estar sempre acompanhando seu blog.
Muito sucesso pra vc
ok
ResponderExcluirzika d+
ResponderExcluirvocê podia me mandar outro modelo do pássaro pra mim por favor? é que o programa que eu tenho não da pra fazer isso.
ResponderExcluirvarias pessoas pediram para fazemos imagens de passaros ou outros fotos, mas não podemos fazer porque seria impossível atender a todos, mas você pode fazer com um programa para editar imagens
ResponderExcluirIae Fabiano! intão quero saber como posso mudar a cor do passaro? gostaria de deixar vermelho!
ResponderExcluirpara mudar a cor precisa fazer outra imagem
ResponderExcluirnão tem como alterar isso com códigos
Ola eu queria saber todos os codigos tem que ser do twiter exemplo na parte que clicamos no nome cai no twiter tem como cair em outro lugar exemplo face ou nossos blogs mesmo ? e na ora da imagem eu só usei o tiny e tentei o primeiro codigo que aparece no fim e o ultimo e as imagenns nao deram fiquei mo tempão fazendo a montagem ate ai deu certo podia tirar minhas duvidas!!!! preciso meu blog vai fica massa com a imagem que eu fiz todos devem ficar se perguntando isso ajudaaaaaaaaa!!!!
ResponderExcluirpf me ajude preciso de dois pedido de ajuda o 1 é que tem como alterar o nome pra cair em oputro lugar sem ser do twiter? exemplo blog ate o google mesmo da pra fazer isso? e 2 a imagem tentei no tiny re nao deu certo a imagem não apareceu e só poder ser mesmo do twiter ou podemos pegar do twiter mesmo e lembrando ta complicado na ora que de pagar se tem que fazer posts falando de onde a de onde apaga eu nao entendi da onde apaga pra colar o novo codigo podia me ajuda muito obrigado e preciso dessas duvidas tiradas pf obrigado
ResponderExcluiré possivel trocar o código para o facebook ou qualquer outro link
ResponderExcluirmas tem que ser uma coisa por vez e realmente o grande problema é fazer as imagens para encaixar no código
Ola por favor eu sei que você não pode ficar fazendo imagens mais faz pra mim pf eu sei mechex com os codigos mais nao sei como faze podia fazer com essa imagem pf só essa vez e se pode fazer só mais 2opisões e seu codigo nem o que tem la nao funciono ok
ResponderExcluirfaça um novo post explicando melhor ou uma video aukla pois assim nao da pra entender ok melhore pois assim ta ossso
ResponderExcluiresse código não tem o que demonstrar.
ResponderExcluirpara colocar no blog é só trocar o endereço do link e da imagem no código e colocar no blog como um gadget de html/javascript.
para usar outra imagem precisa fazer outra imagem seguindo o modelo que mostramos, mas isso vai depender de qual programa você usa para editar imagens
cara você no vídeo não explico nada olha vamos ao seu erro 1 na seu link não fala da onde a onde tem que apaga pra fazer a substituição 2 na ora do nome também na onde a que devemos apagar cara duvido seja fácil eu sou ótimo em HTML mais você não ta sabendo explica e não ta tirando minhas duvidas olha quando for me responde fala assim se pega de tal lugar e apaga ate tal lugar na ora que for no nome que vai cai explica também e outra você disse que meu editor pode da erro eu to usando o PhotoScape e já consegui fazer a montagem do meu personagem e ta do tamanho que você indico que é de 256×320 na hora de hospedar a imagem eu usei o tinypic que nem você indico no seu post e lembrando você esqueçel de falar qual dos links usamos pois se todos sabem que o tiny oferece 4 links então qual usamos explique melhor ta bom e por favor melhores esse post ta complicado só na ora do código que deu erro e mesmo usando seu próprio código que você oferece não deu certo ajuda e tire todas as minha duvidas por favor ok!!
ResponderExcluira imagem do código vai nesta linha:
ResponderExcluirvar birdSprite='http://oloblogger.googlecode.com/files/birdsprite.png';
nós mostramos no tutorial depois da imagem mesclada que usamos como demonstração.
o problema foi que o javacript do código foi removido, mas não temos como recuperar
vou procurar um código para substituir esse e publicar um tutorial em breve
ResponderExcluirpochaa,,
ResponderExcluirno meu nao pegou.
não apareceu nada.
e tambem cliquei em f5 para atualizar mas novamente não apareceu nada.
:(
gente olhem não deu nada affs tentei ate mudei o jeito e nem usei o tinypic e deu tudo errado tutorial péssimo ai que raiva despediçei meu tempo a nem não gosto disso
ResponderExcluiresse código apresentou um problemas e assim que possivel vamos publicar outro para substitui-lo
ResponderExcluirFabiano , eu coloquei o código no html ,mas quando eu vou visualizar o meu Blog não aparece nada :\ e eu ja atualizei a página várias vezes . . . :\
ResponderExcluirNAO APARECE NADAAAAAA AJUDA
ResponderExcluirparece que o arquivo javascript que controlava esse código foi excluido, por isso está gerando erro.
ResponderExcluirinfelizmente não temos como arrumar isso.
Não consegui colocar, eu fiz tudo certinho, só que mesmo atualizando (apertando f5) não apareceu nada :(
ResponderExcluirpena que nao da pra coloca script no comentario se nao iria coloca a do mario aqui voando na tela e nao é do twitter é a do facebook XD
ResponderExcluireu mesmo criei
o meu não deu certo
ResponderExcluirnão fica nada voando tentei até sem editar colocando o link do seu twitter mesmo nao deu
ResponderExcluirtente esse outro código
ResponderExcluir<script src='http://widgets.way2blogging.org/blogger-widgets/w2b-tripleflap.js' type='text/javascript'>
</script><script type='text/javascript'>
var twitterAccount = "seu nome no twitter";
var tweetThisText = "";
tripleflapInit();
</script>
Hey Fabiano.
ResponderExcluirColoquei o código no meu blog ( www.oneanotherword.blogspot.com.br )e não vi resultado nenhum. Oque eu devo fazer ?
Obs : O perfil que coloquei não é meu... é um outro.
Vlw cara aqui funciono com esse codigo
ResponderExcluir