12 de set de 2011

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.

image

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:

image

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.

0 comentários:

Postar um comentário

Compartilhe sua opinião, deixe um comentário.

Inscreva-se

Inscreva-se e receba nossas atualizações por e-mail.

beruby.com - O Portal que lhe d recompensas por navegar [CONSTRUTOR DE BLOGS] - Aprenda como criar blogs e sites.

Os comentários autorizados neste blog são para fomentar a conversação e intercâmbio de idéias/opiniões entre os usuários. Para poder participar você deve respeitar as normas básicas de convivência e respeito. Os comentários feitos pelos usuários são de sua inteira responsabilidade. O Construtor de Blogs reserva o direito de eliminar qualquer mensagem que considere infringir as normas. Para qualquer dúvida ou sugestão, contacte-nos através de construtordeblogs@live.com

Fica proibido qualquer tipo de cópia de conteúdo sem permisão do blog.

Copyright © 2011 Construtor de Blogs, All Right Reserved. Design by Java Templates Powered by Blogger

  • Visite o nosso canal no Youtube
  • Siga o Construtor de Blogs no Twitter
  • Assine o nosso Feed. É Grátis