Fazendo um cabeçalho com fundo transparente

     A pedido de algumas leitoras, vou ensinar hoje a fazer um cabeçalho com fundo transparente. O que muuuitíssimo fácil. Primeiro você tem que baixar ou o Paint.net ou o Photo filtre studiox (basta procurar no google para baixar). Vou primeiro explicar no photo filtre:

>Primeiro abra o programa, e clique no botão Transparent color.

>Vai aparecer uma caixa de confirmação, você clica em "yes". Quando aparecer deixe a formatação da forma que está e clique em OK. 

>Daí, você vai regulando a transparência até chegar do jeitinho que você quer. Quando chegar a esse resultado, você salva e coloca no blog normalmente.




#Agora, vou explicar como fazer isso no Paint.net:


>Primeiramente, você abre o programa e faz o cabeçalho normalmente
>Logo, você clica na varinha mágica que fica no canto da tela.

>Daí, você move a varinha até a imagem. Se a transparência tiver como você quer, salve e vai aparecer uma caixa de confirmação e você clica em ok (não mexa em nada!!!!!).


De qualquer modo (se você fizer o cabeçalho no Paint.net, ou no photofiltre) a imagem vai ficar assim:

P.s.: são esses quadradinhos branco e cinza que "representam" a transparência!


     Calma que ainda não terminou!!!!! Depois que você salva no blog, e tudo mais, pode acontecer de o cabeçalho ficar assim: 

     BUÁÁÁÁÁÁÁ!!! Logo você que demorou taaanto para fazer o cabeçalho e acontece isso! Por que? Por que???? Calma, que eu te ajudo! 


Faça o seguinte:


>Entre em editar HTML do blog. 
>Procure pelo código (basta pressionar ctrl f):

<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>

>Encontrou? Então, apague-o completamente!

>Agora, pressione ctrl f  novamente e procure por:

<div class='content'>

>Achou? Então 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>

     
     Visualize, se estiver tudo certinho pode salvar. Beijinhos e espero ter ajudado amores!!!