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:

Iana Paulinhaaaa-World Girl-Official 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

Teka Bruce 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/

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

daniele - blog sweet pop disse...

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

Nanny disse...

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

www.diariodananiih.blogspot.com

Kissüs ♥

@ilovetubes 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á..!

Teka Bruce disse...
Este comentário foi removido pelo autor.
Teka Bruce 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

Patriny 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

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

Blogueira Fã♥ 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 e Joana disse...

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

aspastelones.blogspot.com

Beijoos

Grazy disse...

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

Deisi disse...

ÓtimooO tuto flooor *-*

Kiss ♥


http://fanideisi.blogspot.com