PROMOÇÃO - Magazine Luiza - NÃO PERCA!

Encontre no blog...

24/11/2009

Como colocar gifs animados no “Blogger”

blogger-blogspot

Colocando gifs animados, imagens, banners no blog

Atualizado em 21/07/2014

Pelas minhas andanças como blogueiro, uma das maiores dificuldades encontradas, foi como colocar um gif animado em meu Blogger, tanto no post como em qualquer “gadget” nas barras laterais… (veja: Como instalar um widget no seu blogger).

Assim, todos os gifs animados que eu colocava no blog perdiam os movimentos ao serem publicados. Após muitas tentativas e erros, e através de pesquisas em outros blogs, entendi que as imagens hospedadas no Blogger vão automaticamente para uma pasta no Picasa, e que no Picasa os gifs animados não funcionam! (veja: Para onde vão as imagens e fotos do seu blogger!)

A partir dai, siga a dica abaixo, que ajudará você a colocar gifs animados em seu blog, elementos estes que ainda são bem úteis para divulgação e ornamentação do seu template.

1) Entre no Blogger para acrescentar o gadget com o gif animado no seu blog. No menu lateral, selecione [Layout] e clique em [Adicionar um Gadget].

image

Para colocar qualquer Elemento de Página com código de programação, utilize a opção HTML/JAVASCRITP, em [Adicionar um Gadget].

image

2) Como os gifs inseridos automaticamente não funcionam no blogger, primeiro você deverá hospedá-los em um outro servidor, como o TinyPic , que irá hospedar o seu gif animado gratuitamente e no formato original.

Acesse o site: http://tinypic.com

Em Fyle Type, defina se você vai enviar uma imagem ou gif animado do seu computador, selecionando [Image] para fazer o upload do seu PC ou [Url] para adicionar um link do gif animado que você encontrou na internet.

Depois de inserido o arquivo ou link em [Escolher arquivo] ou [Url], defina o Resize (redimensionamento). Como dica, mantenha Default para imagens, e links Url. Se desejar receber o compartilhamento via E-Mail, selecione [Send it Via E-mail] e descreva o e-mail para o envio.

Como exemplo, vamos enviar um gif animado (pie.gif) do PC. Depois de preenchido, clique em  [Upload Now].

image_thumb1

Entre com o código de segurança (coloque as palavras sem espaço entre elas).

image9_thumb

Pronto, agora você vai obter os códigos HTML pronto para  Websites, IMG code para fóruns, URL para E-Mail e o principal, o link direto (Direct Link for Layouts)… (se quiser saber mais sobre o Tinypic leia: Como hospedar imagens e gif animados gratuitamente).

Agora copie o código abaixo de Direct Link for Layouts. No nosso exemplo vamos utilizar o código: http://i53.tinypic.com/2ahs5zt.gif

image

3) Para colocar o gif animado no seu blogger, conforme as dicas acima, utilize o código:

<img src="endereço da imagem">

onde no local de “endereço de imagem” você substituirá pelo código copiado no TinyPic em [Direct Link for Layouts],

Veja no nosso exemplo:

<img src="http://i53.tinypic.com/2ahs5zt.gif">

image

Após a publicação, o gif animado deverá manter os movimentos, conforme o exemplo abaixo:

4) Se desejar um link na imagem, utilize o código:

<a href="endereço do site" target="_blank"><img src="endereço da imagem"></a>

Substitua o “endereço do site” pelo URL do site desejado e o “endereço da imagem” código copiado no TinyPic,

Veja no nosso exemplo:

<a href=http://visualmusicas.blogspot.com target="_blank"><img src="http://i53.tinypic.com/2ahs5zt.gif"></a>

image

Desta forma, clicando no gif você irá direcionar para o site desejado, conforme nosso exemplo abaixo:

(Visualize também em nosso blog de teste: http://visualdicas2000.blogspot.com/)

Teste gif animado

Observações: o código target="_blank" garantirá que a página seja aberta em uma nova janela ou aba… Se desejar que a página abra na mesma janela, substitua pelo código target="_self"

Para acrescentar o código HTML da imagem diretamente na postagem do blog, leia os nossos artigos:

Como inserir códigos HTML nas postagens do Blogger
Como inserir códigos HTML nas postagens do Wordpress

até mais…


image

Como hospedar imagens e gif animados gratuitamente

77 comentários:

Kleytynho disse...

Valew.... uma dúvida quase insanável foi sanada... huahauhau

fale disse...

quero botar um link no gif animado que acabei de posta no meu blog para que ao clicar nele va direto para o meu endereço de email.
Vc sabe como faço isso?

Formação Profissional - Cursos e Treinamentos disse...

fale,

Acredito que o melhor a fazer é você criar um formulário de contato e colocar o link dele no seu gif animado. Assim você evita divulgar o seu e-mail para todo mundo e fica um trabalho muito mais profissional...

Veja como criar um formulário de contato bem legal para o seu blog:
http://visualdicas.blogspot.com/2009/11/coloque-um-formulario-bem-legal-no-seu.html

Mas se mesmo assim você quiser colocar o link de e-mail, substitua href="endereço do site" target="_blank" por href="mailto:endereco@dominio.com" e quando o leitor acessar este link, irá abrir o Outook Express com o seu e-mail no campo destinatário...

espero ter ajudado...

Thiago Rules disse...

valew isto me ajudou

IMOVEIS SUPERACHEI disse...

Perfeito.... valeu pela dica!

patriciadodferreira disse...

muito obrigado!! consegui colocar o gif!!!

Maitê♠ disse...

O meu está em Português então eu me perdi na parte do direct link to image

É o que se vê ;) disse...

Eii, valeu vioo!
Muito ótima sua explicação.

Beijo

Letti disse...

Obrigadaaaa amei meu gif e confesso que tava mesmo com dificuldade. Muito obrigada :)'

Liv´s From Lórien disse...

Obrigadaaaaaa!!!!Deu certinho, postei no iamgeshack e botei o link direto no blogger como imagem!

José Marcos disse...

Puxa, apanhei para aprender como fazer isso.
Embora já tivesse colocado a imagem gif no ImageShack, não sabia o link certo que devia inserir no Blogger.
Obrigado pela ajuda!

Álien a fera disse...

Já estou ficando viciado por aqui.
Seu tutorial foi perfeito,e resolveu o meu problema,já coloquei meu GIF lá.
Se possível dê uma passadinha kkk

Atenciosamente
Álien a fera

Cristiane Lucena disse...

Tutorial eficiente! Obrigada mesmo pela dica valiosa. Deu tudo certo. Muito bom!

awv.nascimento disse...

Graçias..... Um Abraço!!!

bbelfreedon disse...

APANHEI UM POUQUINHO MAS COSEGUI.VALEU MUITO BOM SEU TUTORIAL

Carol disse...

Segui o passo a passo, mas qndo coloco o post no ar não dá certo!!! Será pq?? Fiz extamente como nas instruções!!! Tem algum delay pra começar a funcionar??

Visual Dicas - Cursos e Treinamentos disse...

Olá Carol,

Não precisa de nenhum comando para começar a funcionar.

Passa o link do post, ou o link do arquivo .gif para verificarmos o que aconteceu...


Aguardo...

Igreja Evangélica Pentecostal do Brasil disse...

o meu não funcionou não e fiz tudo como foi orientado. sei não viu...

Carol disse...

Oiiii...segue o link do post!!! Muuuuito obrigada!!!

http://plumemotion.blogspot.com/2011/05/eu-indico-cinemagraphs-por-jamie-beck.html

Visual Dicas - Cursos e Treinamentos disse...

Olá Carol,

Os arquivos .gif que você estava utilizando eram imagens estáticas (as imagens dinâmicas .gif ficavam inseridas no código CSS do blog original).

Consegui desmembrar as imagens e postar no nosso blog de teste:

http://visualdicas2000.blogspot.com/2011/05/gif-animado-no-blogger-links.html

Escolha a imagem, clique com o botão direito sobre ela e selecione [Salvar imagem como].... Depois siga o procedimento deste artigo. Se preferir, insira a imagem diretamento do seu PC para o post, pois o Picasa está aceitando imagens animadas agora...

Se ainda tiver dúvidas, pergunte, ok?

Espero que de tudo certo!

Idéias do Franco disse...

Não consegui postar o gif que eu criei no meu computador...fiz td como o tutorial explica mais não consegui! Fico a espera de resposta!abraço

Visual Dicas - Cursos e Treinamentos disse...

Olá Franco,

Envie o link do gif para eu verificar...

Abraços e obrigado pelo contato...

Danielly disse...

Cara.. to tentando postar o cabeçalho do meu blog como gif animado, mas nao to conseguindo ja tentei de todo jeito e a imagem nao fica animada... sera q vc poderia me ajudar.. meu msn é especial_beijo@hotmail.com

Denise e Luiz Brindes!!! disse...

Olá! O Gif que criei no imageShack aparece normal, igual a uma imagem normal em JPEG, o que deve ser?
Quando visualizo no windowns está como gif.

Visual Dicas - Cursos e Treinamentos disse...

Olá.. Denise e Luiz, se possível passe o link para verificarmos..

Paulinha (: disse...

O meu gif não ficou animado! ):

Ricardo Enrique Silva disse...

Oi segui tuas dicas mas meu gif fica estático, se puder ajudar fico grato

Visual Dicas - Cursos e Treinamentos disse...

Paulinha e Ricardo Enrique,

Passem o link do gif de vocês para eu poder analisar melhor o que pode ter acontecido...

Abraços,

Frederico Leão disse...

Como configuro o arquivo gif no photoshop para que não haja perda de qualidade na imagem? Para fugir daqueles pontinhos nos meio-tons. Existem valores que possamos delegar para uma melhora da imagem? Se por um acaso houver, ajude-me por favor pelo email: fredericoleao@gmail.com

Frederico Leão

Gabriel disse...

Muito bom
tava procurando a um tempão
boa explicação
valew

Acessa meu blog
http://blogdasmaquinaspesadas.blogspot.com/

Icaro D.G.Z disse...

Eu segui todos os passos certinho

Mais minhas gifs continuam paradas no blogger

Oque eu devo faser?

Visual Dicas - Cursos e Treinamentos disse...

Olá Ícaro,

Você deve observar a fonte de onde você copiou seus gifs...

Um gif animado é formado por várias imagens.

Pelo que observei no seu blog, a imagem gif que vc. postou é uma imagem estática (tem apenas 1 imagem) e não dinâmica, ou seja, animada....

Verifique isso, ok?

Abraços,

kakaw disse...

oi...eu fiz tudo como vc disse mas ele fica parado na funciona..
por favor me ajude;.;
esse é o link direto dele
http://img827.imageshack.us/img827/5281/gif2jz.gif

esse é o link apenas
http://imageshack.us/photo/my-images/827/gif2jz.gif/

tentei de todas as maneiras..meu blog é do blogger!
bem se precisar de algum informaçÃO A MAIS e so me pedir vou olhar aqui todos os dias esperando um apoio seu..
é muito importante pra mim;

Visual Dicas - Cursos e Treinamentos disse...

Olá Kakaw,

A imagem que você adicionou é uma imagem estática, e portanto não tem movimento.

As vezes as imagens dinâmicas são protegidas ou integradas. De onde vc. copiou esta imagem?

Me passe o link da fonte de onde você copiou a imagem... Assim poderemos analisar melhor o que está acontecendo!

Abraços,

THÉO OLIVEIRA disse...

eu fiz o gif e postei no image.. mas quando coloco no blog ela fica parada são uns patrocinios do blog já segue o link para se você puder ver oque está errado.
link...

http://imageshack.us/photo/my-images/197/unled1qk.gif/

fico no aguardo da sua ajuda.
abraços...

Visual Dicas - Cursos e Treinamentos disse...

Olá Théo,

A imagem que você hospedou no ImageShack está estática...

Verifique o arquivo .gif que está dinâmico (animado) e funcionando corretamente e envie novamente para o ImageShack...

A imagem tem que estar em movimento lá no servidor, independente de você ter colocado no blog ou não. Veja o nosso exemplo http://img412.imageshack.us/img412/8669/bannerxgames.gif

Clique no link e você vai ver que a imagem está com animação...

Até mais...

THÉO OLIVEIRA disse...

Aimagem que eu poste no image.. é essa mesma de sse post http://theooliveira.blogspot.com/2011/09/blog-post_304.html

porque que quando coloco ela lá ela fia estática se aqui funciona normalmente?

Visual Dicas - Cursos e Treinamentos disse...

Olá Théo,

Realmente o site ImgeShack não está hospedando imagens animadas gratuitamente. É necessário fazer o upgrade para o premium e desembolsar um valor mensal.

Encontrei um outro site gratuito, http://tinypic.com... Fiz um teste com a imagem animada que você passou, veja o resultado http://i54.tinypic.com/2n1vn10.gif

Vou fazer mais alguns testes com o site TINYPIC, e alterar o post.

Obrigado pela dica amigo!

Abraços,

THÉO OLIVEIRA disse...

Sem querer acabei ajudando tambem ,mas eu é que agradeço sua ajuda parabens pelo blog
Eu sempre recmendo ,té mais ,e estou visitando sempre valeu

Visual Dicas - Cursos e Treinamentos disse...

Oi Théo Oliveira,

Sua ajuda foi fundamental...

Já fiz a atualização do post com o site TinyPic. Como disse anteriormente, o site ImageShack não aceita mais gifs animados gratuitamente. Mas se alguém tem gifs já hospedados no ImageShack, não se preocupe que eles serão mantidos gratuitamente, ok?

Mais uma vez, muito obrigado cara... Seja sempre bem vindo!

Pauline IMDS disse...

Mto Obrigada!!
Vc me ajudou Bastante!!
;)

Amanda disse...

Valeeeeeuuuuuuuu!!!!
Muito útil essa dica!
Eu tava mesmo precisando ;)

Amanda disse...

Eu fiz e deu certinho!!!!

GraffTche disse...

Ola otimo blog! Agora por favor me diga como eu posto um gif no CABEÇALHO do blogger , meu link eh este http://makeagif.com/i/7pGKJ1 valeu

Darlo Brito disse...

Ótimo tutorial! Foi o único site que encontrei que me tirou a dúvida e ajudou.
Muito obrigado!

crepusculo/harry ppoter disse...

amei o blog me ajudou muito se o dono deste blog quiser ver o trabalho que ele me ajudou a fazer entre no meu blog de harry e crepusculo (ficou muito melhor devo tudo a ele ) http://mundodevampirosebruxos.blogspot.com

Áridi criações disse...

Angelo cara, meus parabens, você não inagina o tempo que eu perdi a procura de solução. valeu mesmo.

bibydok disse...

Muito bom. Resolvi um problema que tinha há já algum tempo. Muito obrigado.

chimbica28 disse...

cara vlw mwsmo fera vc é nota 10000000000000000 isso ai moleke

Ellen Cristina disse...

Consegui valeu!!!

Arth Informática disse...

Gosto muito dos artigos de ótima qualidade do seu Blog. Quando for possível dá uma passadinha para ver nosso Curso de Informática Online. Lucas

Rodrigo-noticias disse...

vlw mano !

Ralf Almeida disse...

Não gera nenhum codigo!!! Eu seleciono o gif no meu pc, e faço tudo como no tutorial dai enrrola, e começa tudo de novo. O que eu faço. Lembrando que no pc fica o gif normal.

FABIO disse...

assim fica fácil ,valeu bem simples a explicação

ƒlávio griŋdcore disse...

Muito bem explicado, curti! E o blog é excelente, já sei onde voltarei, caso tenha mais dúvidas bloguísticas!

Citei sobre seu post no meu blog:

http://umraroincomum.blogspot.com.br/2012/04/e-se-fosse-1-e-agora-fudeu.html

Não sabia que era impossível postar gifs no Blogger, à não ser que fosse através de outros sites. Descobri isso hoje! Hahahahah

Obrigado mesmo!

FILMES, DOCES E AÇÃO! disse...

Obrigada!! Eu conseguir colocar o gif!!

Background's Files disse...

não consegui ! na hora de colocar na TinyPic deu erro !

Elaine Camel disse...

Oi! Ótimo tutorial. Eu coloquei vários gfs e ficou perfeito em um blog místico que eu estou fazendo. Mas, no meu blog do jogo The Sims, meus post é com imagems, e nas configurações, esta na opção "mostrar HTML literalmente" se eu mudar para "interpretar HTML digitado, não aparece os gfs. Eu tive que postar o gif como imagem. Mas, diz que perde o efeito. Será que tem como eu colocar um código Html junto com a postagem das imagens. Não sei se deu pra entender. Mas, de qualquer forma agradeço.

Angelo Luis Ferreira disse...

Olá Elaine,

Para que o seu blog interprete a linguagem HTML nas postagens, você deverá utilizar o editor correto.

Se você usa o painel do blogger para postar, clique no link HTML que aparece ao lado do link Escrever.

Se você utiliza o Windows Live Writer, clique no botão Código Fonte...

Mais para frente, vamos escrever um tutorial mostrando como utilizar o HTML nas postagens...

Visual Dicas

***Giselly Bravo*** disse...

Valeu pelas informações deu tudo certo!!! obaaa!!!

http://cosmeticosecia-blog.blogspot.com.br/

Um abraço!


Jennifer Moreira Siqueira disse...

nuussa valeu me ajudo muito nunca iria conseguir adivinhar XD

internetservices disse...

hello very good article thanks for this muhasebe programı

Renata Borges Lacerda disse...

Obrigada. Ficou ótimo! Dica rápida e fácil!
Abraço

http://decorebadesign.blogspot.com.br

A BARATA DA VIZINHA NA MINHA CAMA disse...

Ola saudações, me chamo Alexandro! Fiz uma pesquisa sobre como colocar GIFs animados em blog? E suas explicações são legais, porém acontece que encontro dificuldades em: primeiro baixar as imagens animadas para o pc, e depois transferi-las para o blog? E depois de muitas tentativas quando eu posto que vou testar abre todo site, ao invés de somente o Gif . Solicito humildade quer me oriente se possível de como eu possa proceder o que eu posso fazer para obter sucesso. Meu e-mail é abaratavizinha@gmail.com

Janaína Campos disse...

Valeu a dica! =)

Lucas Brito disse...

Ótimo tutorial me ajudou bastante. vlw

Janine Cavalheiro disse...

O TinyPic n está funcionando.... Tem algum outro site q faça o mesmo trabalho?

Angelo Luis Ferreira disse...

Olá Janine,

O TinyPic está funcionando sim! Acabei de testá-lo.

Tente de novo....

Visual Dicas

Ahri Boladona disse...

Olá, fui colocar um gif no meu blog e ele não apareceu. Segui todos os passos direitinho e ficou apenas o título escrito.
Poderia me ajudar?

Angelo Luis Ferreira disse...

Olá Ahri,

Passe o link do gif para eu testar...

Aguardamos!

Visual Dicas

Yzaah Jackson disse...

obg me ajudou muito

PLUGNEWS disse...

APARECE A IMAGEM MAS SEM A ANIMAÇÃO...

Visual Dicas disse...

Olá plugnews.

Passe o link da imagem no e-mail visualdicas@gmail.com para fazermos um teste.

Aguardamos.

Horas de Partilha disse...

Olá, Angelo. Impecável. Já testei um widget e ficou perfeito. Obrigada. Sem querer abusar pode explicar como posso fazer para colocar uma imagem gif num post e a imagem aparecer sem ser através de uma palavra hiperligada? pretendia que a imagem aparecesse no post.

webhayalim.com disse...

very good article Ön muhasebe programı

Gilmar de Oliveira disse...

Obrigado!

Sah Blog disse...

Muiiiito Obrigada!! :*

Postar um comentário

Gostou do Post? Então espalhe!

Quem está curtindo...

Encontre no blog...

Gostou? Então espalhe!

Twitter Delicious Facebook Digg Stumbleupon Favorites More