Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1498507634
Vida do cache: 1498550834
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Hospedagem - 728 x 90

Header

Colocar uma imagem animada no cabeçalho

As vezes queremos incluir uma imagem animada como cabeçalho no blog. Só que no blogger, por padrão, quando incluímos uma imagem no Header, diretamente pelo HTML do template, a imagem fica sem animação, se apresenta de forma estática.
Portanto, caso você queira incluir uma imagem em gif, ou até mesmo uma animação em flash, você terá que incluir a imagem através dos elementos de página, para ver como faz, siga as orientações a seguir.

Entre no painel do Blogger, clique no menu “modelo”, entre na edição HTML do seu blog, NÃO marque “Expandir Modelos de Widgets”, para modificar o código que define o cabeçalho:

Procure por:


<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='TITULO-DO-SEU-BLOG (Cabeçalho)' type='Header'/>
</b:section>

Altere os seguintes trechos:
Onde está escrito locked=’true’ troque por locked=’false’.
onde está maxwidgets=’1′ , troque por maxwidgets=’5′; onde está showaddelement=’no’ , troque por showaddelement=’yes’;

Acho que não preciso dizer mas, em todo caso: É óbvio que você não vai conseguir localizar esta parte: “title=’TITULO-DO-SEU-BLOG (Cabeçalho)”, porque onde está escrito “TITULO-DO-SEU-BLOG” é o título do seu blog, portanto, procure pela 1º linha que você conseguirá localizar a 2º linha logo abaixo (veja imagem demonstrativa acima).

Salve as alterações e vá em “Layout”, você verá que abaixo do cabeçalho existe um campo para Adicionar Gadget.
Só que para você conseguir incluir uma imagem animada, terá que excluir o cabeçalho padrão, para posteriormente conseguir adicionar uma imagem para ficar como cabeçalho no seu blog.
No elemento cabeçalho, clique em “editar” e em seguida clique no botão “excluir”.

Agora que você já excluiu o cabeçalho padrão e já tem a imagem que vai utilizar hospedada, clique em “adicionar gadget” e escolha >> HTML/Javascript e cole o código abaixo:


 <a href="ENDEREÇO-DO-SEU-BLOG"><img src="ENDEREÇO-DA-IMAGEM"></img></a>



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

5 Comentários

  1. Lua Rodrigues disse:

    oi…. adorei o tutorial mas não consegui fazer o meu ficar animado. Eu criei o gif no gif maker, então salvei em minhas imagens e também salvei o link do gif. Ai na hora de colocar este link:

    tentei primeiro com o link que gerou quando eu criei o gif e não deu certo, e depois tentei com o link da imagem. (coloquei abrir com internet explorer, copiei o link e coloquei novamente neste código) mas também não deu certo. Como devo fazer? obrigada!

  2. Charles disse:

    Ola….. ME AJUDEM… eu fiz ficou tudo certo mas não consigo encostar ajustar a imagem….. blog afetado ciaosmequetrefe.blogspot.com

    • Vanessa disse:

      Inclua trecho de código para formatar a largura, altura e os espaçamentos da sua imagem. Pode usar esse código aqui:

      <a href="ENDEREÇO-DO-SEU-BLOG"><img style="margin:XXpx;padding:XXpx;width: XXpx; height: XXpx;" alt="" src="ENDEREÇO-DA-IMAGEM"/></a>
      Não esqueça que vc deve incluir os valores em margin, padding, height e width.

  3. Andreza disse:

    ótimo tutu, parabéns pelo blog, encontrei ótimas dicas aqui!

  4. Amanda disse:

    Maravilhosas suas dicas e tutoriais.

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.