9.3.14

Tutorial: Cabeçalho que ocupa toda largura do blog

image
d-o-y-o-u-l-o-v-e-m-e? do you?
Yooo cupcakes de mi vie,
Desculpem não ter respondido os comentários semana passada, eu estava tri? ocupada!
Aproposito, vou ter prova terça e quarta nessa semana, vou estar tri? ocupada de novo!

Gabrielle me pediu por e-mail que fizesse esse tutorial, ela vai criar um blog e quer saber como fazer esse cabeçalho no que ocupa a parte de cima toda

Então clique em leia mais para conferir


O que é?
Nada mais é do que um background com uma imagem maior que ao normal



Ingredientes:
(isso não é bolo não, Carolina)

• Uma imagem, desenho, whatever de largura 1300px e a altura, você escolhe! no meu eu coloquei 731
Obs: a largura da imagem vai de blog para blog, depende muito da largura da tela do seu computador também, esse é o tamanho da minha imagem, talvez não seja o tamanho certo do seu blog... para dar certo você tem que estar disposta a fazer isso por horas se preciso
Uma imagem transparente de 1000 de largura e o tamanho que você escolheu de altura,
se não tem clique aqui

"Pra que a imagem?" 
Sem o cabeçalho a área das postagens e dos gadgets vão subir e tapar a sua imagem.
mas se você quiser isso pode tentar, dependendo fica legal

Dica:
se você for colocar o nome do blog, coloque na imagem de fundo antes e quando por a imagem transparente por código no image maps e não for colocar as páginas na imagem transparente, faça um "quadradinho" bem no cantinho e coloque o link do seu blog, ninguém vai desconfiar! ;) duvido que alguém ache o meu "quadradinho"

para quem não sabe usar o novo image maps, posto um tutorial e edito aqui

Como colocar?

Vá em Modelo > Editar HTML > Formatar Modelo > Ctrl + F > procure por body {

se você nunca mexer nessa parte estará assim:
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
}

se você já tem dois backgrounds no blog estará mais ou menos assim: 


body, html {
height: TAMANHO DO SEU PRIMEIRO BACKGROUNDpx;
margin: 0;
padding: 0;  }
body {
font: $(body.font);
color: $(body.text.color);
background: url("SEU PRIMEIRO BACKGROUND") repeat; }
html {
background: url("SEU SEGUNDO BACKGROUND") repeat; }


NUNCA MEXEU: apague o seu código e ↑ cole esse código que está aqui em cima ↑
Se já mexeu apenas apague o tamanho do primeiro background, colocando a altura EXATA da sua imagem e mude pelo o primeiro background pelo link da sua imagem

E se você quiser mudar o segundo background por uma cor, apague de "url" ate "repeat" e coloque o número da cor que você quer por, recomendo essa lista 

beijos no core

6 comentários :

  1. Obrigada por postar!!! ღ Até que não é tãããõoooooooooooo dificil assim mas paciência é tão raro em que acho que vou ficar com um normal mesmo >o< !!

    ResponderExcluir
    Respostas
    1. para mim vale muito a pena fazer esse tipo de cabeçalho, eu to ate acostumada com ele, mas faça do jeito que você quiser ^^ tenho certeza que vai ficar bom

      Excluir
  2. Oi flor passando para fazer uma visitinha,fiquei uns dias sem postar pois minha bebe estava internada e agora estou visitando meus afiliados para dizer que estou viva kkk.
    Gostei muito do tutorial acabei de fazer um template free com o cabeçalho assim e confesso que gostei muito do resultado e estou pensando seriamente em fazer assim no meu,é só eu ter um tempinho que farei.

    Beijos

    www.dicasnoblog.com.br

    ResponderExcluir
    Respostas
    1. obrigada pela visitinha, eu também sumi kkkk
      eu espero que você use esse tipo de cabeçalho eu sou apaixonada por ele
      e eu sempre quis ver um layout free com ele, nunca vi *--* isso é muito legal
      melhoras para sua baby :/

      Excluir
  3. Esse tutorial é muito útil! Não costumo usar cabeçalho mas no meu próximo layout vou tentar fazer um assim <3

    CRYSTAL MERMAID ☾ || goodies e afins

    ResponderExcluir
    Respostas
    1. Tomara que dê certo <3

      Excluir

Você pretende comentar?
Saiba que eu fico muito grata e feliz ^^ mas por favor, seja educado e compreensível. Se de alguma forma meu post te feriu ou o meu blog, vá ao e-mail. Críticas são sempre bem-vindas, mas acredito que o lugar delas também é no e-mail.

E eu optei por moderar comentários, não por causa de problemas como os de ofensas, mas para que fique mais fácil saber quando houve comentário. Espero que entenda se você não gosta dessa opção. Acredite, eu também não gosto.
Obrigada por ter vindo aqui.

"Heart" yourself

Ame-se ♥
oohmontana@gmail.com
twitter:@s0meth1ngs, @seehbubble
facebook: Carol Lendino

Status

Nome: Sem Óbice
Criado: 28/12/13
Volta do hiatus: 28/12/15
Tema:G-Friend on twitter; n°: 4

Disclaimer:
Grande parte das coisas aqui não pertencem ou foram criadas por mim, grande maioria foi criada por alguém e, na maior parte das vezes, editas por mim. Se feri alguém, pretendendo creditar ou excluir, como o dono preferir. Não resite em me avisar por e-mail: oohmontana@gmail.com. Espero compreensão.

The End

Isso é tudo, pessoal! Volte sempre que quiser,
beijos no core, rivais no amor


Créditos e agradecimentos aqui