Como dividir o cabeçalho do Blogger ao meio.

---

Olá leitores do Construtor de Blogs. Hoje vamos lhes mostrar um tutorial bem legal: Dividindo o cabeçalho do blogger ao meio. A divisão pode servir para várias coisas como inserir um anúncio, uma caixa de pesquisa ou qualquer outro gadget.

Lembrando que este tutorial funcionou apenas na interface antiga do blogger. Eu não consegui salvar a edição de HTML no Blogger in Draft (nova interface do blogger). Caso você use a nova interface, mude para a antiga enquanto realiza o tutorial.

*Nota – Os tutoriais postados aqui, no Construtor de Blogs, são baseados na nova interface do Blogger, o Blogger in Drafts. Se você ainda não conhece a nova interface, clique aqui. E para aderir a nova interface visite o www.draft.blogger.com e clique em Tornar Padrão.

Backup:

Antes de fazer qualquer alteração em seu modelo, faça um Backup. No novo blogger clique no Menu Suspenso > Modelo > Backup/Restore > Fazer download do modelo completo.

Este procedimento é de extrema importância, pois preserva o modelo original caso alguma coisa saia errado.

 

Tutorial:

Agora que você já fez o Backup, mude para a interface antiga do Blogger e clique em Design > Editar HTML. Procure por estas linhas de código:

<div class='fauxborder-left header-fauxborder-left'>

<div class='fauxborder-right header-fauxborder-right'/>
<div class='region-inner header-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Novo Design Blogger (Cabeçalho)' type='Header'/>
</b:section>
</div>
</div>
<div class='header-cap-bottom cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
</header>

Substitua o código acima por este:

<div class='fauxborder-left header-fauxborder-left'>  

<div class='region-inner header-inner' style='width:49%; float:left'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Designer do Modelo (Cabeçalho)' type='Header'/>
</b:section></div>
<div class='fauxborder-right header-fauxborder-right' style='width:49%;float:right;height: auto;'>
<b:section class='banner' id='banner' maxwidgets='1' showaddelement='yes'>
</b:section>
</div>
</div>
<div class='header-cap-bottom cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
</header>

<div style='clear:both;'/>

Salve tudo e veja se tudo deu certo.

Depois de salvo, o seu modelo deve ficar assim:

Talvez seja preciso algumas configurações na nova divisão. Para isso você deve inserir o código abaixo em Design > Design de modelo > Avançado > Adicionar CSS.

Código: #banner{margin: 20px 20px 0px 0px;}

Dúvidas? deixe um comentário para nós.