Agora que toda a explicação básica já se foi, os próximo tutoriais do Seja Criativo serão um pouco extensos. A intenção é mostrar ao máximo o que você deve saber para conseguir criar o seu próprio layout, dando base para que você conheça cada pedacinho possível de editar.

Uma das perguntas que vire e mexe alguém me manda é sobre o código do Header (Cabeçalho) do Layout: "como deixar da largura da tela?" ou "como mudar a posição?", entre outras dúvidas. Hoje vou mostrar para vocês um pouco sobre o código e o que você precisa conhecer para conseguir altera-lo sozinho.

Onde você poderá encontrar o código vai depender da base que você está usando, neste tutorial vamos usar o Template Mínima (download), por ser um código mais simples e fácil de manipular, principalmente para quem está aprendendo.

1º Passo: Decidir o que você quer fazer!

Existem diversas formas de editar o seu cabeçalho, por isso antes de começar a editar o código é importante ter em mente o que você quer. Depois disto você poderá seguir um das dicas abaixo:

Usar o editor do blogger

Esse é um dos modos mais simples e rápidos de modificar, apesar de não permitir grandes alterações. Para editar sem precisar modificar nenhuma linha de código do HMTL do seu layout, o blogger dá a opção de incluir imagem no próprio painel. Para isso basta acessar:


Não esqueça que para que a imagem fique centralizada, ela deve ter o tamanho definido no CSS ao cabeçalho. Por padrão, no Template Mínima, sem alterações, o tamanho é de 660px de largura. Então lembre-se que se você quiser uma imagem maior, deverá alterar a largura do seu cabeçalho no código.

Editar direto no código

Antes de qualquer alteração, faça um backup do seu layout!

As linhas de código abaixo são responsável pelo cabeçalho. Se você quiser muda-lo de posição, como por exemplo, deixar que ele ocupe todo a largura da página, basta alterar o local do código. De um jeito mais fácil de explicar:

<div id="header-wrapper">
<b:section class="header" id="header" maxwidgets="1" showaddelement="no">
<b:widget id="Header1" locked="true" title="Teste de tutoriais (Cabeçalho)" type="Header">
</b:widget>
</b:section>
</div>

Sem alterações, no Template Minima você vai encontrar o código do Header após as linhas:

  <div id='outer-wrapper'><div id='wrap2'>

Ou seja, o seu cabeçalho terá a largura do Outer-Wrapper.  Se você quiser que o Header tenha a largura da tela, mas permaneça acima da área da postagem e da sidebar, você precisa alterar a posição do código deixando da seguinte forma:


<div id="header-wrapper">
<b:section class="header" id="header" maxwidgets="1" showaddelement="no">
<b:widget id="Header1" locked="true" title="Teste de tutoriais (Cabeçalho)" type="Header">
</b:widget>
</b:section>
</div>

  <div id='outer-wrapper'><div id='wrap2'>

Ainda sobre a posição, você pode colocar em várias partes do layout. Por exemplo: deixa-lo em cima apenas da sidebar ou da área da postagem. Para isso basta seguir a regra anterior, copie a parte do código que pertence ao cabeçalho e mova-o para a posição que você deseja.

Excluir o cabeçalho

Dentre todas as alterações que você pode fazer, uma delas é remove-lo do seu layout. Mas se você já deu uma olhada no Painel do Blogger, deve ter percebido que ele não permite que você exclua o cabeçalho. Para isso você precisa alterar uma linha de código. Vá em:






Após localizar a linha, altere o seguinte trecho: locked='true' para locked='false'. Isso vai permitir que, ao retornar no Painel, você exclua o cabeçalho.

Personalizar o CSS

Feita a alteração da posição você pode seguir para o CSS. Nele você vai incluir todos os estilos que o seu cabeçalho deve ter: tamanho, background, posição, borda, etc. Para começar a editar você precisa localizar a linha #header-wrapper e seguirá todos seletores que permitem personalizar o cabeçalho.

Nâo vou listar tudo o que vocês podem fazer no CSS, pois há uma variedade enorme. Então vou deixar alguns links úteis para quem quiser conhecer um pouco mais de CSS:

• Deixe o seu código mais limpo e reaproveitável
• Sintaxe e seletores CSS
• Especificidade de seletores CSS
• Onde está o CSS no novo editor HTML do Blogger
• Trocando o cabeçalho do blogger
• Modificar o seu template (Cabeçalho)
• Tudo sobre CSS (Melhor site para ter como base!)

É isso! Qualquer dúvida, por favor, deixem nos comentários ou mande um email pela página de contato.