Como deixar o fundo do cabeçalho transparente

sexta-feira, 15 de fevereiro de 2013


Oi, gente! O tutorial de hoje é super simples mas acredito que vai ajudar muita gente. Para quem não entendeu é o seguinte: mesmo editando uma imagem com fundo transparente (no PhotoFiltre ou em qualquer outro editor), na hora de colocá-la no blog, ela fica com o fundo branco e não com o background do blog.

Exemplo:


Editei esse cabeçalho de fundo transparente no Photofiltre (ficou horrível, eu sei). No entanto, ao colocá-lo em um blog de teste, ele fica assim:


Se você enfrenta esse mesmo problema, confira o tutorial para resolvê-lo clicando em "leia mais".


1º passo: Vá em Design, depois em Editar HTML, dê Ctrl+F e procure por esse código:

<header>
<div class='header-outer'>
    <div class='header-cap-top cap-top'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    <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='Blog da Dalva (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>
    para facilitar sua busca procure por <header>

Encontrou? Agora apague-o completamente.

2º Passo: dê Ctrl+F novamente mas dessa vez procure por:

<div class='content'>

e cole ANTES DELE o seguinte código:

<center>
<header>
<div class='header-outer'>
    <div class='header-cap-top cap-top'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    <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='Blog da Dalva (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>
</center>

Agora visualize. Se estiver tudo certo, salve. Lembrando que este tutorial é baseado nos novos modelos do blogger, portanto não funciona no mínima. Beijos.

0 comentários:

Postar um comentário