16/12/2012

Tutorial:Como deixar o fundo do cabeçalho transparente?

Oi meninas tudo bom ? Então vim ensinar voces um tutorial que aprendi La no Blog Menina nerd
Vamo conferir?[as imagens peguei la]
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.

Nenhum comentário: