Reino Kawaii

 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