Plano de fundo no Blogger animado em gif graffiti

Esta é uma novidade !  Vamos fazer um plano de fundo (background) para o Blogger/Blogspot em imagem .gif usando como tema o Graffiti.  Ou mesmo, criar um plano de fundo que muda de cor ou imagem.  Use a sua imaginação.

Clique no meu Blog de Testes para ver como fica.

Para isto, escolhi três imagens do Google Imagens de pinturas em Graffiti. Veja abaixo:


Primeira Parte:

No Paint do Windows, alterei o tamanho delas para 1500 x 1000 pixels.  Para esta alteração, carregue a imagem no Paint e dê um "Ctrl + w" no seu teclado.  Marque a opção "pixel" e defina a largura e altura.  Faça isto com todas as imagens e salve-as.

Baixe o programa PhotoScape para criar a imagem .gif.  Abra o PhotoScape e clique em "Animação GIF".

No PhotoScape abra o arquivo onde estão suas imagens.

 Escolha uma a uma as imagens e com o botão esquerdo do mouse arraste-as para a parte acima do grande retângulo central.

Pronto.  Agora você já pode ver como o seu gif se comporta.  Altere a velocidade no menu da direita.  


Mas o mais importante será a definição do tamanho. No mesmo menu, defina o tamanho para 1500 x 1000 pixels.

Definindo o tamanho.  Clique em "OK".
Salve agora a imagem .gif
Segunda Parte:

Hospedar a imagem no TinyPic ou ImageShack (eu prefiro) para obter o link.  No Google, digite TinyPic ou acesse o link do ImageShack acima.  Você terá que fazer login no que escolher, então guarde bem o e-mail e a senha que usou, vai com certeza precisar hospedar alguma imagem mais tarde. Acesse o site e faça o upload da imagem.


Copie o quarto link como indicado na próxima imagem e deixe-o no seu Bloco de Notas.

Inserindo a imagem.gif no Blogger como plano de fundo.

Vá em "Modelo", "HTML".  Clique em "Prosseguir".  Dê um "Ctrl + f" no teclado. Na janela que se abriu, cole   body {     e dê um "enter".
Agora todo o cuidado e atenção !  Como no quadro abaixo, você irá inserir o link da imagem no html do seu Blogger.  No código, insira somente as linhas em negrito.  Lembre-se que este link é o das minhas imagens. Substitua pelo link das suas.  Mas se quiser, use as minhas imagens.


body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
background: url(http://i48.tinypic.com/15ow080.gif) no-repeat;
background-attachment:  fixed;
}

Visualize o Blogger, se deu tudo certo, clique em "Publicar".

Clique em "Atualizar" e pronto.

Quer conhecer tudo sobre personalização do Blogger ? Acesse este link abaixo e facilite a sua vida. Tudo em um só lugar. É só abrir o eBook e fazer tudo em pouco tempo e de uma só vez. Ainda posso ajudar você via WhatsApp.


Um comentário:

wellington disse...

valeu de uma olhada ai no meu blog
http://poizegamessoftwares.blogspot.com.br/

Related Posts Plugin for WordPress, Blogger...