13 março 2014

Cabeçalho ocupando toda a largura do blog


Hey vocês, estou muito feliz de voltar a atualizar o CP! Hoje eu meio que acordei cedo, coisa que não acontece muito, mas uma vez na vida e outra na morte né? Essa semana eu tinha ido na papelaria comprar capa pra colocar no livro e o que acho? Cadernos do One Direction!! Eu olhei como eles são e achei as folhas e tudo mais muito lindo, não é tipo, aqueles cadernos rosinhas, é meio vermelho com vinho, aquele tema de sempre da 1D, e o melhor é que vem com um poster! E eu não pude comprar porque eu já to com três cadernos de dez materias e eu não to precisando de mais, e a papelaria fica perto da minha casa e meio que me arrependi de não comprar meu material escolar ali heuhauhruhus. Bom, enfim, a nossa querida leitora Sofia Azevedo pediu este tutorial, que já tem aqui no blog, só que invés de cor no fundo do blog colocar imagem, então este tutorial vai ser como uma repostagem e o tutorial já postado sera apagado. Bom, tem duas maneiras de fazer este tutorial, e o tutorial que a Sofia quer está no segundo tutorial, vamos ver?

1° Tutorial: Faça a imagem do seu cabeçalho, o tamanho você que vai ter que descobrir pois cada monitor tem um tamanho diferente, mas no meu antigo layout o tamanho que usei foi este, logo depois faça uma imagem transparente do mesmo tamanho da sua imagem de cabeçalho.
Vá em Layout > Cabeçalho e coloque a imagem transparente.


Depois vá em Modelo > Personalizar > Plano de Fundo e coloque a imagem de cabeçalho.
Logo após ela carregar ajuste as opções como mostra a imagem a baixo, coloque em "Não dividir em blocos" ou "Dividir horizontalmente" e marque a opção "Rolar com a página".


E agora para mudar a cor do fundo ainda no Personalizar vá em Avançado > Planos de Fundo e escolha a cor que quiser na parte "Plano de fundo externo".


2° Tutorial: Este vai ser por HTML, vá em Modelo > Editar HTML clique na caixinha e depois aperte CTRL + F e procure por body { irá parecer um código mais ou menos assim:



Substitua o código acima por este:



Mude o 400 pela a altura da sua imagem de cabeçalho, em URL do cabeçalho você coloca a url do seu cabeçalho e em URL do background você coloca a url do seu bg, ou seja, do fundo do seu blog. Se você quiser que a imagem do cabeçalho ou a do background não se repita substitua repeat por no-repeat. Se precisar de algum site para hospedar as imagens de BG e Cabeçalho, vou indicar dois sites: [www] [www]

É isso, espero que tenham gostado do tutorial, qualquer dúvida é só comentar. Lembrando que temos vagas para afiliação, se quiser mais informações sobre como se afiliar ao CP veja o primeiro post do blog. Kisses.

13 comentários:

  1. Oi deh obrigada pelo post me ajudou muuuito! eu queria fazer parte da lista de afiliados! Amo o seu blog!
    Beijios!

    ResponderExcluir
    Respostas
    1. O seu blog não tem os requisitos necessário pra se tornar afiliado do CP ;/ sorry!

      Excluir
  2. Tudo bem Deh eu sei que o meu blog não é tão bom assim...
    Beijinhos

    ResponderExcluir
  3. Eu precisava muito desse tuto *-* Mas eu tentei as duas formas e não consegui T^T
    Me ajude!
    Beijos!
    Garota Lezada

    ResponderExcluir
    Respostas
    1. Hey, eu testei os dois tutoriais e consegui fazer tudo certinho ;/
      Qualquer dúvida é só perguntar ^^'

      Kisses.

      Excluir
  4. Este comentário foi removido pelo autor.

    ResponderExcluir
  5. Oi Deh! Sabe um tuto que eu queria super super? Como colocar a blogueira no blog! Vc pode me ajudar??????
    Beijinhosss

    ResponderExcluir
  6. Gostei bastante do tudo, queria seguir seu blog, mas não consigo :l beijos!

    simsegredei.blogspot.com.br

    ResponderExcluir
  7. Oi Deh!Eu vir pedir para seu blog ser colaborador do meu to criando.
    Aqui está o link:http://lauzinhaolavo.blogspot.com.br/

    ResponderExcluir
  8. Pois é, sempre tem uma primeira vez ! Também sou muito preguiçosa, é meio difícil que eu acorde cedo, mas às vezes acontece, fazer o quê :P
    Achei esse(s) tutorial(ais) muito fácil(eis) de se aplicar; vale a pena, o resultado fica lindo !

    ~kiss
    CS ♥

    ResponderExcluir
  9. Otimo tuto, sempre quis saber como coloca-lo .... Explica muito bem. Se puder seguir meu blog fico agradecida. PS: Estarei sempre acompanhando
    Kissus da Isa
    By || Doce bunny ||

    ResponderExcluir
  10. Não gostei muito do tuto Deh foi mal mais tá mal explicado faz de novo prfa!

    ResponderExcluir