Dividindo o cabeçalho em duas colunas em blogs do Blogger

Olá queridos leitores! Hoje, aprendermos a dividir o cabeçalho de um blog em duas colunas. É um processo longo e deveremos ter atenção Esta divisão é útil para se colocar uma caixa de busca, um banner no cabeçalho, como fiz aqui no blog. Vamos começar!

Atenção: Fizemos os teste e a divisão a partir de blogs com o template nativo e/ou criados pelo Designer de Modelo do Blogger. Caso não consiga encontrar determinados códigos, deverá procurá-los sozinho!

1. Acesse a guia Modelo, clique no botão Fazer backup/Restaurar e faça uma cópia de segurança do seu template clicando no botão Fazer download do modelo completo.

2. Depois, clique no botão Editar HTML e marque a caixa Expandir modelos de widgets.

3. Pressione Ctrl+F para abrir o Localizador do navegador, e procure o código a seguir.

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'/>

Lembrando que, alguns blogs possuem a barra no final deste código, se não encontrar o código acima, adicione a barra no final!

4. Depois de encontrar o código acima, faça as seguintes modificações no código.

• Troque maxwidgets='1' por:  maxwidgets='5';
• Troque showaddelement='no' por:   showaddelement='yes'.

Devendo ficar assim:

<b:section class='header' id='header' maxwidgets='5' showaddelement='yes'>

5. Logo depois, pressione novamente Ctrl+F para abrir o Localizador do navegador e procure pelo seguinte código.

Header1' locked='true

Depois de achado o código, faça as modificações a seguir.

• Troque locked='true por:  locked='false

Devendo ficar assim:

locked='false

6. Clique em Visualizar e se estiver tudo correto, clique em Salvar modelo.

7. Acesse a guia Layout e procure pelo gadget do cabeçalho, depois arraste-o para qualquer lugar. Assim, poderemos trabalhar melhor com o mesmo. Depois, salve.

Clique na imagem para ampliar

8. Volte à opção Editar HTML e marque a opção Expandir modelos de widgets. Depois, pressione Ctrl+F para abrir o Localizador do navegador e procure pelo seguinte código.

<div class='header-outer'>

9. Depois de encontrado, substitua o mesmo pelo seguinte código.

<div class='header-outer'>
<div id='header-left' style='width:50%; float: left; margin:0; '>
<b:section class='header-left' id='header-left' preferred='yes' style='float:left;'/>
</div>
<div id='header-right' style='width:50%; float: right; margin:0; '>
<b:section class='header-right' id='header-right' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>

10. Clique em Visualizar e se estiver tudo certo, clique em Salvar modelo.

11. Acessando a guia Layout, você perceberá que terá um local para colocar gadgets acima das páginas. Isso sera indesejado pois entrará em conflito com as páginas e ficará somente o link. Então para retirá-la, basta procurar pelo seguinte código.

Clique na imagem para ampliar

<b:section class='header' id='header' maxwidgets='5' showaddelement='yes'/>

Depois de encontrar o código, faça as seguintes modificações.

• Troque maxwidgets='5' por:  maxwidgets='1';
• Troque showaddelement='yes' por:   showaddelement='no'.

12. Depois, clique em Visualizar e se estiver tudo correto, clique em Salvar modelo.

Depois, visualize como ficou o seu blog e agora é adicionar o gadget desejado. Lembrando que a caixa de busca não se ajustará automaticamente no local, para isso você deverá personalizá-la com padding e margin no Editar HTML e verificar como ficou. Pronto, é só isso! Abraços e até mais.