15 de outubro de 2011

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

19 comentários:

World Girl-Oficial disse...

Que legal *-* eu faço no photoscape mais assim tbm fica legal!! bjs http://ianapaulinhaaaa.blogspot.com/

Maria Vitória disse...

Obrigada pelas dicas!
Sigam meu blog:

http://docedegarotahm.blogspot.com

Anônimo disse...

Valeu ,me ajudou muito fui pelo photo filtre.
Veja a reforma que eu fiz e me dê sua opinião sincera :

http://planetpoppunk.blogspot.com/

Unknown disse...

Oii, adoreii o blog, obrigada por visitar o meu, ja estou te seguindo!

Bjos ;*

fofoquinhainocente.blogspot.com

Grazieli e Deisiele | GD disse...

Oii flor!
Seu lay ta lindo *-*
Beijos Seguindo,viu!


GD|http://grazieliedeisiele.blogspot.com

I'm a cat disse...

Fica lindo, né? mas fazer o que? o problema é esse, obrigada por me ensinar :)

Nαnny disse...

Fofo seu blog , Retribuindo a visita e seguindo , segue la ?

www.diariodananiih.blogspot.com

Kissüs ♥

Anônimo disse...

antes que só baixava as fotos transparentes! mais isso parece ser mais fácil =D
estou indo seguir amr, e obrigado por comentar no meu blog ilovetubes.blogspot.com
então, segue lá..!

Anônimo disse...
Este comentário foi removido pelo autor.
Anônimo disse...

Aceito fazer parceria com você.
planetpoppunk.blogspot.com

Julia Queiroz disse...

Adorei a dica flor,
obrigada por me seguir,e ja estou retribuindo .
heartcake-hc.blogspot.com

Mariana disse...

Obrigada pelo comentario!Quem dera mesmo se a gente pudesse sair por aí com aqueles vestidos lindos!haha.
seguindo!
http://itcomespinhas.blogspot.com

tudo de bom! disse...

Oi amei aqui! é lindo seu blog! Vim aqui por indicação do blog as pastelones! E gostei muito viu?Seguindo, segue de volta?:D

Paty Marcelle disse...

Oie linda. Queria te fazer uma pergunta. Você uso photo filtre para fazer layout? Ele é bom pra isso?
Eita já foram duas. rsrsrs
Posta mais coisas sobre tutoriais de layout, ajudaria muita gente, rsrsrs.
Beijinhos

Unknown disse...

Olá,vim conhecer seu cantinho,gostei muito e já estou super seguindo!
Parabens pelo Blog e muito sucesso!

Se quiser me visitar,fique a vontade e se quiser seguir,também! :)
Beijinhos!

http://umamulherbemvestida.blogspot.com

Unknown disse...

Oii já to seguindo segue algun do meu blof por favor*-*
*http://atrevidinha-girlatrevidinha.blogspot.com/
*http://fcamamosturmadamonicajovem.blogspot.com/
*http://loveisatkmforever.blogspot.com/

*-*

Ester disse...

Logico que eu quero fazer uma parceria com vc!!
Mas como funciona o esquema de parceria de vcs??

aspastelones.blogspot.com

Beijoos

Grazieli disse...

Oiinnn ♥
Adoreiii o tuto^^
Todo blog stá lindoooo!
Ameiii♥
#Seguindooo aki*-*
Bjs!Fik com Deus!

Deisiele disse...

ÓtimooO tuto flooor *-*

Kiss ♥


http://fanideisi.blogspot.com