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

Compartilhar:
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.
► Postagens Relacionadas:

10 Comentários

Nicolas Danielski disse...

ei como você feiz o cadget ou aplicativo do seu blog?

6 de fevereiro de 2012 às 12:52
João Almeida disse...

Olá Nicolas! Consegui criar este gadget para Windows 7 e Vista através do Blogando com Facilidade. Segue o link: http://www.blogandocomfacilidade.com/2011/07/como-criar-um-gadget-para-windows-7-e.html

6 de fevereiro de 2012 às 18:27
Natan Cardoso Bezerra disse...

Muito bom João, gostei e coloquei em meu blog: http://www.jornalistawrb.com.br/

16 de fevereiro de 2012 às 10:25
João Almeida disse...

Fico feliz que tenha conseguido Natan! Obrigado pela participação.

16 de fevereiro de 2012 às 18:32
Almir Ferreira disse...

Tava tudo indo muito bem, até que não consegui encontrar o no código HTML do meu blog...

21 de dezembro de 2012 às 13:42
João Almeida disse...

A tag do header pode se flexionar de template para template Então, vá procurando no seu template um código parecido até chegar a certeza.

21 de dezembro de 2012 às 15:22
Rafael Reis disse...

Fala João, tranquilo cara?
Consegui colocar a barra de pesquisa em um blog(estou utilizando um de teste).
Mais gostaria de saber também, como colocar botões de redes sociais abaixo da barra, como está aqui em seu blog, se puder fazer um tutorial sobre isso, agradeço.
Ótimo blog, cheio de dicas úteis! Parabéns!

7 de janeiro de 2013 às 21:53
João Almeida disse...

Aguarde o tutorial.. Agradeço pleo comentário!

7 de janeiro de 2013 às 22:34
Giovani disse...

João, eu não tenho esse código no meu html:


O que eu faço?

21 de janeiro de 2013 às 20:10
João Almeida disse...

Procure somente por <div class="header
Acho que você encontra.

21 de janeiro de 2013 às 20:21

Postar um comentário