Imagem gif no cabeçalho do Blogger/Blogspot

Vamos colocar uma imagem .gif no cabeçalho do Blogspot / Blogger.  

Esta imagem .gif, pode ser criada para uma animação de uma logomarca ou mesmo um efeito diferente no título do seu Blogspot / Blogger.

Em primeiro lugar, você vai precisar criar a sua imagem .gif.  Pode criá-la no Paint do Windows ou equivalente.

Como é uma imagem .gif você precisará criar várias delas até você conseguir o efeito final.  Será como um filme.  Vários quadros sobrepostos que você vai escolher a velocidade de exibição.

Para o teste, criei estas três:





Veja como ficou no meu Blogger de testes.

Ferramenta de Testes

Feito isto, abra o PhotoScape.  Se não tiver este programa, baixe-o.  É gratuito e muito bom para edição de imagens.

Com o PhotoScape aberto clique em "Animação .gif ".



Clique no nome do arquivo do seu computador onde estão as imagens.  Localizando-as, com o botão esquerdo do mouse, arraste-as até o espaço em branco acima do grande retângulo central.

Feito isto, é o momento de configurá-la.  Você já estará vendo a imagem no retângulo central.  No lado direito, há os controles de configuração.

São eles:

"Mudar efeito" - Neste, você deverá testar todos, até encontrar um que melhor demonstre o efeito desejado.

"Alterar velocidade" - Altera para mais ou para menos.  Vá testando.

"Tamanho" - Escolha geralmente o da primeira foto.  Ou altere como precisar.


No menu direito do programa, clique em "Salvar".

Hospedar a imagem .gif

No Google, digite TinyPic. Acesse o site clique em "Escolher arquivo" e em seguida faça upload da sua imagem .gif .  Após carragada, copie o 4° link ( Direct link for layouts ) e cole-o no Bloco de Notas do Windows.

No Blogger


Antes de começar esta parte, vá em "Layout" e clique no gadget do cabeçalho do seu Blogger e veja se há opção de excluí-lo.  Caso haja, faça a exclusão.


Vá em "Modelo", "HTML", "Prosseguir", "Ctrl+f" no seu teclado, cole o seguinte código:

.<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>


Localizando-o no código Html do seu Blogger, mude "1" por "5"  e 'no' por 'yes' .  Clique em "Visualizar" e dando tudo certo, "Atualize".


Agora, cole o próximo na janela do "Ctrl+f" .   Localizando-o no Html do seu Blogger, mude 'true' por 'false'  

<b:widget id='Header1' locked='true' title='Título do seu Blogger (Cabaçalho)' type='Header'/>
</b:section>

Clique em "Visualizar" e dando tudo certo, "Atualize".

Vá em "Layout" e na parte onde estava o cabeçalho, clique em "Adicionar um gadget" e na janela que se abriu, clique em "Html/JavaScript" .  Fazendo as modificações conforme abaixo, cole o código.

<a href="URL do seu Blogger"><img src="URL da imagem .gif"></img></a>

Salve e pronto.  

2 comentários:

Mavic Maia disse...

nao deu certo, nao consegui deletar o cabecalho, e na hora do CTRL+F nao ddeu certo... o que faço?

Fazendo Blogspot disse...

Clique dentro da caixa do HTML e depois o Ctrl + F.

Abraço,

Antonio Sardenberg

Related Posts Plugin for WordPress, Blogger...