Colocando imagem animada no cabeçalho



A paz de Cristo amadas ! (:
Como vocês estão ?  Eu estou bem graças a Deus ! ^^
Antes de qualquer coisa, gostaria de pedir encarecidamente que vocês Curtam a Fan Page do GOC em 
(www). Todos os dias eu atualizo a página e posto fotos, frases e mais um monte de coisas que nem sempre é possível  postar aqui no blog. Siga-nos também no Twitter em  (www).
Bom, sem mais delongas, já tem algum tempinho ( ou melhor, muito tempo ) que eu não posto tutoriais aqui no blog. Navegando pela internet a procura de novidades para o novo layout que estou preparando ( para mudar novamente o GOC ), encontrei este tutorial que eu nunca tinha visto e resolvi trazer pra vocês. Clique em Continuar Lendo e vamos fazer:
Descobri que por padrão, quando inclui-se alguma imagem mo Header, diretamente pelo HTML do template, a imagem fica sem animação, ou seja, se apresenta de forma estática.
Caso você queira incluir uma imagem .gif ( imagens de animações ), ou até mesmo uma imagem em flash, você deverá inclui-la através dos Elementos de Página. Siga as orientações a seguir:

[01] Vá em Design >> Modelo >> Editar HTML. Deixe DESMARCADA a opção " Expandir Modelos de Widgets "
[02] Dê CTRL+F e procure pela seguinte tag:

<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>



[03] Altere os seguintes trechos:
Clique na imagem para ampliá-la 

[04] Altere os seguintes trechos: 

Onde está escrito locked='true', troque por locked='false'.
Onde está escrito maxwidgets='1', troque por maxwidgets='5'.
Onde está escrito showaddelement='no', troque por showaddelement='yes'

O que vou dizer agora é muito óbvio: Você NÃO vai conseguir  localizar o seguinte trecho: "title='TITULO-DO-SEU-BLOG (Cabeçalho)", pois, onde está escrito: "TITULO-DO-SEU-BLOG" é o título de seu blog. Dããn!, portanto, procure pela primeira linha que você conseguirá localizar a segunda linha da tag, logo abaixo. ( Não entendeu ? Visualize a imagem logo acima ). 

[05] Salve as alterações e vá em "Layout", você verá que logo  abaixo do cabeçalho existe um campo para "Adicionar Gadget ". 

[06] Exclua o cabeçalho padrão. Para isso, clique em "Editar" e em seguida no botão "Excluir". 


Clique na imagem para ampliá-la


[07] Agora que você já excluiu o cabeçalho padrão e já tem a imagem que quer usar hospedada em algum site de hospedagem, clique em "Adicionar Gadget" e depois em HTML/JavaScript e cole o seguinte código abaixo:

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

 Clique na imagem para ampliá-la


[08] Clique em "Salvar" e depois em "Salvar alterações". Pronto! 


Bem fácil né ? '-'
Dúvidas ? Só comentar !
Antes de me despedir, queria só lembrá-las de Curtir e Seguir o GOC nas outras Redes Sociais. ^^
Beeeeijinhos , a paz de Christ !

7 comentários

  1. Muito bom esse tutorial :)
    http://fasesdegarota.blogspot.com.br

    ResponderExcluir
  2. Amei tutu
    e super facil e pratico
    e resultado e lindo

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

    *Espero sua visita*

    ResponderExcluir
  3. Ótimo tutorial ! Amore , muito obrigada por seguir o Diário Capricho
    (meu blog) ♥
    Você pediu para a Kaline (postadora)
    seguir aqui , mais como o blog é meu
    e você o seguiu claro que teria de seguir um blog tão lindo como o seu !
    Então eu estou seguindo no lugar da
    Kaline tudo bem ?


    Bjs
    Fique co Deus !
    Diário Capricho → Perfil

    ResponderExcluir
  4. aaaaaaah adoroo amoor *-------------*
    http://blahoestraich.blogspot.com

    ResponderExcluir
  5. Ah, amei o tutorial.
    Realmente, eu nunca tinha visto.
    E que tal trazer uns gifs nos próximos posts? #FicaADica
    Já estou seguindo, linda.
    Beijos!
    Pingente de Borboleta

    ResponderExcluir
  6. Eu tenho uma imagem animada no cabeçalho lá no blog, mas não coloquei dessa maneira. É sempre bom aprender maneiras alternativas de fazer as coisas, não é? shushausua Adorei o tutorial, já salvei nos favoritos *o*

    Beijoos, Dedessa Carvalho <3
    http://lovellysummer.blogspot.com.br/

    ResponderExcluir
  7. Minha imagem ficou torta tem como centralizar ela ?

    ResponderExcluir

~ Obrigada por comentar ! (:
Volte seempre ! ♥

-Não aceitamos tags e selinhos.

Layout por Maryana Sales - Tecnologia Blogger