07 janeiro 2013

Cabeçalho com a largura do blog









Ola amores,

Ja estão me pedindo tutoriais pelo grupo no face,e é claro estão todas convidadas a participar dele,para trocarmos idéias e para que eu possa ajudar vocês na criação dos lays.


Esse tutorial é bem longuinho,então vamos logo ao que interessa ok ? Na verdade é bem fácil pode parecer meio confuso mas,é só seguir o passo a passo e ir tentando.Lembrando que as medidas que eu usei no layout do ACNK podem não ser as mesmas do template de vocês,e qualquer duvida já sabem,podem perguntar.





 Passo a Passo 


01. Primeiramente,vamos começar com as imagens,que na verdade são duas,uma delas pode ter as medidas de 1024x400,que logicamente você pode alterar,e pode ser feita no photoscape mesmo,essa imagem do ACNK atual eu fiz la e a qualidade esta excelente.A segunda imagem é opcional,na verdade você só vai precisar dela caso a sidebar (coluna ou colunas do seu blog vá pra cima após o termino do tutorial),caso isso não aconteça continue o passo a passo normal,essa imagem seria transparente onde você pode fazer no photoshop ou procurar na internet,feito isso salve e coloque na gadget de cabeçalho.Para isso: Vá em Layout > Cabeçalho > Faça o "upload" da imagem transparente.


02: Você agora tem sua imagem de cabeçalho feita certo ? Agora vamos colocar ela pra funcionar,se sua imagem for leve (até 300KB) você pode coloca-la da forma mais fácil:


 Vá em: Design > Designer do Modelo > Plano de fundo e faça o upload da sua  imagem, deixe na opção "não dividir em blocos" ou "dividir horizontalmente", as duas ficam legais.No meu caso deixei marcado a caixa "Rolar pela pagina" mas dependendo da imagem fica legal deixar desmarcado então não precisa seguir exatamente essas opções,vá testando e veja qual se enquadra melhor pro seu lay.


Dica: você  pode deixar o restante do seu blog de outra cor,para isso:

Vá até  Design >> Designer do Modelo >> Avançado >> Planos de fundo e na caixinha "Plano de fundo externo" coloque a cor que quiser.


 Outra opção... 


Caso sua imagem seja grande,tenha mais de 300KB você pode coloca-la tambem sem problemas,para isso vamos aplicar um codigo no HTML do seu blog,veja:

1) Vá em modelo > Editar HTML;
2) Aperte Ctrl+F( que é o melhor atalhao) e procure por body { Você irá encontrar um código parecido com esse:
:

body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
}
3) Apague o código acima,que você encontrou,e cole  no mesmo  lugar por esse abaixo:
body, html {
height: 400px;
margin: 0;
padding: 0; }

body {
background: url("URL do cabeçalho") repeat; }

html {
background: #cor; }
Agora substitua os locais indicados em negrito.A largura da sua imagem deve constar em "Height",só altere o numero e coloque na frente o px,assim como esta no codigo acima,depois em "URL do cabeçalho" coloque o endereço da sua imagem ja hospedada,e em background coloque a cor de fundo.


Ufa ! acabamos,rsrs eu disse que era longo,mas espero que tenham entendido como se faz,quaisquer duvida pleeeeease,comentem ou postem no grupo.

Xoxo;*


Comente com o Facebook:

11 comentários:

  1. Adorei o tuto!

    É sempre bom aprender coisas novas!

    Beijos

    cantodecah.blogspot.com

    ResponderExcluir
  2. Adorei o tuto,bem útil haha
    www.golden-mila.blogspot.com

    ResponderExcluir
  3. oi, então tem selinho para você no meu blog http://beautybylu.blogspot.com.br/

    ResponderExcluir
  4. Amei o tutu mais séra que onde esta background: #cor não pode por uma imagem não?
    responde lá no blog!

    simples-garotaa.blogspot.com

    ResponderExcluir
    Respostas
    1. Pode sim flor é só colocar:

      background: url("URL do cabeçalho") repeat; }

      Excluir
  5. Oie, Eu estou fazendo esse tutorial porem estou tendo alguns problemas:

    Qndo deixo 1024 a img se repete; qndo deixo num tamnho maior ela ainda deixa espaço sobrando e n se repete,

    Gostaria de fazer o cabeçalho com o menu desenhado dentro dele.. ha um jeio de fazer lee funcionar? Eu fiz o menu separado porem, ele fica muito afastado do cabeçalho como fazer ele ficar certinho ?

    responda pelo meu email: luana.design@live.com

    ResponderExcluir
    Respostas
    1. Então Lu, a solução é como você mesma disse se você aumenta a imagem ainda falta um pedacinho então nesse caso você tem que ir aumentando a imagem até ela se ajustar entende ? Os tamanhos que eu dei aqui no blog são os padrões,então ou você coloca a largura do seu blg mesmo ou vai alterando o tamanho da imagem até conseguir.

      Em relação a desenhos,você pode baixar pngs que são imagens com desenhos e que tem o fundo transparente,são ótimos para trabalhar em cabeçalhos aqui no blog blog mesmo tenho vários.

      Espero ter ajudado
      Beijinhos;*

      Excluir
  6. Olá querida, fiz o tuto, e coloquei a imagem pelo html, e ela ficou do tamanho do blog (como eu queria). Porém, está aparecendo em vários blocos. Já tentei mudar isso por personalizar modelo, mas não está aparecendo a opção de escolha de alinhamento,etc..
    HELP ME!!! Está horrivel. rs

    ResponderExcluir
    Respostas
    1. vish,nem sei como ajudar assim com você falando,eu precisaria ver.. :( Beijos

      Excluir
  7. No meu não tem essas opções vou tentar implementar de algum modo. De qualquer forma, obrigado!

    ResponderExcluir

© ACNK - 2012-2014. Todos os direitos reservados. Criado por: Natália Kovitch. Tecnologia do Blogger. imagem-logo