Follow Us @soratemplates

segunda-feira, 27 de fevereiro de 2012

Como Usar Cabeçalhos Diferentes no Blog

 Olá e super boas vindas sempre!
Hoje vou mostrar um truque para vocês para acabar com problemas de indecisão ^ ^ Eu sou super indecisa (dizem que é mal de toda libriana), e minha indecisão interfere até quando vou fazer um layout para o blog. Eu sempre faço mais de 5 cabeçalhos, fico em dúvidas sobre qual usar e às vezes não uso nenhum porque crio outro :(
Já que se pode usar mais de um background, se pode usar também mais de um cabeçalho e este será o tutorial de hoje. Para você ter uma noção, veja no site bonniegames.com que o cabeçalho do site muda conforme cada categoria.

Exemplos do site Bonnie Games: Página Inicial, Jogando, Categoria kids
É isso que faremos: usar um cabeçalho para a Página Inicial, outro para quando se lê uma postagem e outro para cada categoria (opcional).
Mas primeiro algumas recomendações:
1. Faça um backup do seu template; assim, se algo der errado você terá a cópia de segurança dele.
2. O ideal para esse tutorial é que você use a imagem do seu cabeçalho nos Elementos da Página do layout do blog. Se seu cabeçalho está no HTML do seu template, pode não funcionar corretamente. Lembrando que para adicionar um cabeçalho pelo blogger acesse Layout, Elementos da Página, clique em Editar no Gadget com o nome do seu blog + (Cabeçalho), depois na parte Imagem, selecione uma imagem do seu PC ou da internet, deixe marcado a opção "Em vez de título e descrição" e desmarque a caixa que redimensiona a imagem (última opção). Depois salve.
3. Escolha as imagens que você vai usar: 1 para ficar na página de início, outra para quando o leitor clicar na postagem e, se quiser, uma imagem para cada categoria.
Agora o tutorial:
- Acesse o Modelo do seu blog, na área de edição de HTML e procure por:
<b:widget id='Header1' locked='true' title='O NOME DO SEU BLOG VAI ESTAR AQUI (Cabeçalho)' type='Header'/>

-Acrescente abaixo disto:
<b:widget id='Header2' locked='true' title='O NOME DO SEU BLOG VAI ESTAR AQUI (Cabeçalho)' type='Header'/>

-Agora procure por </head> e acima disto adicione:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#Header1 {display:none;}
body#layout #Header1 {display:block !important;}
</style>
</b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
#Header2 {display:none;}
body#layout #Header2 {display:block !important;}
</style>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<style>
#Header2 {display:none;}
</style>
</b:if>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<style>
#Header2 {display:none;}
</style>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style>
#Header2 {display:none;}
</style>
</b:if>

-Visualise e se estiver tudo bem, salve. O outro cabeçalho ainda não aparecerá.
-Acesse a parte de Layout do seu blog, em Elementos da Página. Agora você possui lugar para adicionar mais 1 cabeçalho. Adicione a imagem que quiser e ela aparecerá quando você clicar no título de uma postagem.



::Caso queira adicionar 1 cabeçalho por categoria::


-Acesse o modelo do seu blog, em Editar HTML e procure por (caso vc tenha feito o processo anterior; se não fez, substitua o número 2 por 1 na busca):
<b:widget id='Header2' locked='true' title='O NOME DO SEU BLOG VAI ESTAR AQUI (Cabeçalho)' type='Header'/>

-Acrescente abaixo agora isso:
<b:widget id='Header3' locked='true' title='O NOME DO SEU BLOG VAI ESTAR AQUI (Cabeçalho)' type='Header'/>

Para cada categoria que seu blog possuir, você irá atribuir um número a Header; por exemplo, se seu blog tem mais 2 categorias, vai ficar assim:
<b:widget id='Header4' locked='true' title='O NOME DO SEU BLOG VAI ESTAR AQUI (Cabeçalho)' type='Header'/>
<b:widget id='Header5' locked='true' title='O NOME DO SEU BLOG VAI ESTAR AQUI (Cabeçalho)' type='Header'/>

E assim por diante...
-Procure por </head> e adicione acima dele:
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;archive&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
#Header1 {
display: none;
}
</style>
</b:if>
</b:if>
</b:if>
</b:if>

-Abaixo do código anterior, acrescente: (se você não tiver acrescentado outro cabeçalho para postagens mostrado anteriormente, mude o número 3 para 2)
<b:if cond='data:blog.url != &quot;URL DA CATEGORIA&quot;'>
<style type='text/css'>
#Header3 {
display: none;
}
</style>
</b:if>

Novamente, observe o número ao lado de Header; por exemplo, se houvesse mais 2 categorias, ficaria assim:
<b:if cond='data:blog.url != &quot;URL DA CATEGORIA&quot;'>
<style type='text/css'>
#Header4 {
display: none;
}
</style>
</b:if>

<b:if cond='data:blog.url != &quot;URL DA CATEGORIA&quot;'>
<style type='text/css'>
#Header5 {
display: none;
}
</style>
</b:if>

É isso ^^ Espero que eu tenha conseguido explicar o que aprendi aqui e aqui. Beijus<3

11 comentários:

  1. Oiie, tem uma tag para vc lá no Stardolleiras, responda ela se puder. Bjs. Stardolleiras

    ResponderExcluir
  2. Boiei . mas o tutorial é mto bom . kkkkkkkkkkkkk'
    bjoooooooooooooooo :*
    http://mini-fofoquinhas.blogspot.com/

    ResponderExcluir
  3. Obrigada Nitt.Assim que puder eu respondo ok?
    E Absolute Dream, com um pouquinho de calma vc consegue ^^ A princípio eu pensei que era difícil, mas até que é fácil, extremamente fácil :3
    Beijus e muito obrigada meninas!!!

    ResponderExcluir
  4. Ha ha adorei saber que vc também é libriana , sabe estava navegando na net hoje e descobri um blog maravilhoso que tinha esse efeito , fiquei babando e achei que fosse coisa de outro mundo fazer uma arte dessa, e no entanto vejo que não é tão difícil assim . Seu blog é muito legal tem muitas coisinhas adorei mesmo , te conheci no cl , sou afiliada da gizaa , acho que ela fez uma bela escolha em ter vc na equipe do cl parabéns !!!

    Só pra matar sua curiosidade vou te amostrar o blog lindo que eu disse que vi esse efeito: http://garotasgeeks.com/wordpress/

    Um beijinho pra vc pq eu falo demais né rsrsrsrs

    ResponderExcluir
    Respostas
    1. Obrigada e valeu a dica do site ^^
      Eu adoro seus comentários!!!
      Beijinhus <3

      Excluir
  5. Respostas
    1. Assim que voltar a postar no blog vou rever os codigos ok?
      Bjus...

      Excluir
  6. Não consigo achar o primeiro código :/

    ResponderExcluir
    Respostas
    1. Digite o nome do seu blog na caixinha de pesquisa no HTML do seu template :3

      Excluir
  7. Eu entendo de HTML e tal mas num entendi nada desse post hahaha

    ResponderExcluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Google+ - Deviantart