Image Map

08/03/2013

Dois backgrounds no blog

Créditos:  - OBS.: Gente, visitem o blog novo (e lindo) da Kelly, o Like Critics, que fala sobre livros, filmes e jogos :3
ursinhos *u*
 E finalmente trago esse tutorial tão pedido! O de colocar dois backgrounds no blog, também conhecido como cabeçalho com a mesma largura do blog.
 O tutorial é super simples, e dá pra usar dos dois modos, mudando os tamanhos. Esse tutorial eu uso muito em layouts, fica super lindo e dá um toque muito mais especial neles! :D
 Pra quem não sabe como é, aqui o print:
o fundo floral é o primeiro background (com o cabeçalho) e depois vem o back de madeira

 Abra o html do seu blog e clique em "Expandir modelos de widget". Depois disso, tecle ctrl+f e procure por:
body {
 Você vai achar um código mais ou menos assim:
body {  font: $(body.font);  color: $(body.text.color);  background: $(body.background);} 
 Apague todo ele e cole o seguinte no lugar:

body, html { height: 300px; margin: 0; padding: 0;  }
body { font: $(body.font);color: $(body.text.color);background: url("URL do 1º background") repeat; }
html { background: url("URL do 2º background") repeat; }

 Aí é só editar esse código. O 300px é a altura do seu primeiro background (pode/deve editar) e os outros estão óbvios, né? Qualquer dúvida só comentar!
 E aí, gostaram? Espero que sim, e que ajude quem estava pedindo. Ah, e caso qualquer outra pessoa tenha um pedido, peça, por favor, pra que eu saiba o que postar! ^u^





OBS.:

43 comentários:

  1. primeirooooooooooooooooo <3

    PC adorei o tutorial eu ja conhecia mais valeu a pena bom que outra pessoas comecem a saber, gostaria que desse uma passadinha la no meu blog ta com novo layout rs um super beijo adorei o post.



    www.levigustavodicas.com

    ResponderExcluir
    Respostas
    1. Obrigada, bom que gostou *---* Pois é, ajuda muito :3

      Excluir
  2. Hahahaha adorei o resultado <3

    Desconstruindo Amélia

    ResponderExcluir
  3. PC, Já conhecia o tutorial. Porém mesmo assim, tenho que ressaltar que seus leitores irão amar o efeito, é simplesmente perfeito, ajuda muito na criação de algo mais profissional! <3

    ACESSO PERMITIDO. <3
    Retribui?

    ResponderExcluir
  4. Adoooooro esse tutorial, atualmente ando usando ele frequentemente nos meus layouts *-* Óooootimo, tuto!

    -Epílogos e Finais.
    -Underground Icons
    - Segue?

    ResponderExcluir
    Respostas
    1. Aaaah, que bom que gosta *----* Eu também :33

      Excluir
  5. Ameeeeeeeei esse layout <33333333

    ResponderExcluir
    Respostas
    1. OOown, brigada >< Fico feliz que tenha gostado :3

      Excluir
  6. Ah *-*
    Vou guardar o tutorial pro meu próximo lay,
    Achei que fazer isso era tipo , missão impossível.
    Amei .

    http://www.natendencia.com/

    ResponderExcluir
    Respostas
    1. Aaah, okok *---* Nossa, hahaha >< Mas bom que gostou :3

      Excluir
  7. Adorei o tutorial, mas tenho uma dúvidazinha: se eu quiser fazer o cabeçalho junto com o bg, como o daqui, eu preciso fazer ele da largura do blog pra não ficar se repetindo, né?
    Kissus!

    i-deiasdeumagarota.blogspot.com

    ResponderExcluir
    Respostas
    1. Sim sim ^3^ Se eu não me engano, eu uso 1500px de largura aqui :3

      Excluir
  8. Muito top esse efeito... Quando eu trocar o lay do blog eu vou colocar ele com certeza...

    Diamante Negro

    ResponderExcluir
  9. Fica lindo o resultado <3
    Beijos :*
    Emfrente-aoespelho.blogspot.com

    ResponderExcluir
  10. Eu tenho uma dúvida, sabe aquelas informações que ficam na parte de cima do blog contato- parceria - selinhos - , eu não sei como colocar no meu blog pois fica tudo na lateral, e perco espaço para colocar outras coisas se puder me ajudar agradeço meu e-mail donadecasatambemsearruma@gmail.com

    http://blogdonadecasatambemsearruma.blogspot.com/
    http://deusguianossospassos.blogspot.com/

    ResponderExcluir
  11. O efeito é simplesmente super fofucho! Amei o tuto,você explica sempre muito bem e é super fácil fazer.
    Beijinhos flor
    universoteengirl-porlarissa.blogspot.com

    ResponderExcluir
  12. Adorei o tutorial, bem fácil e fica lindo, pena que nunca consigo fazer um cabeçalho legal
    beijos

    ResponderExcluir
  13. Adorei o tutorial,bem legal.

    Beijos
    Feliz Dia da Mulher

    ResponderExcluir
  14. Infelizmente não sou boa com cabeçalhos rsrs,achei ótimo o tutorial,feliz dia da mulher para vocês *-*

    http://dienylady.blogspot.com.br/

    http://dienyladyy.blogspot.com.br/

    ResponderExcluir
  15. Eu acho que fica muito fofo!
    Gostei do tutorial, ficou perfect.
    Beijos,
    sonhosde-primavera.blogspot.com.br

    ResponderExcluir
  16. Adorei o tutorial, sempre que eu faço não dá certo, vou tentar novamente, aqui no P.C é sempre mais explicadinho hahah u_u
    Beijos <3

    http://garotasatrevidas-s2.blogspot.com.br/

    ResponderExcluir
  17. Esse tutorial parece mto útil para várias pessoas, mas não gosto mto de personalizar meu blog (pura preguiça!)

    Obrigada e feliz dia da mulher para vc também =)

    ResponderExcluir
    Respostas
    1. Aaah, obrigada, acho, hahaha
      Ok, hahaha >< E obrigada² o/

      Excluir
  18. Eu já conhecia esse tuto, já usei no meu blog, sabendo usar, fica um resultado lindo demais :D
    Adorei o tuto ^.^
    Beijinhos
    Facebook do blog
    conversando-com-a-lua.blogspot.com.br

    ResponderExcluir
  19. super facil e legal!

    @esteffanifontes, do blog Aos Dezesseis Anos
    aosdezesseisanos.blogspot.com.br

    ResponderExcluir
  20. Não conhecia esse tuto, gostei e pode ser útil.
    Feliz dia da Mulher...
    Beijos
    neversaynever-believe.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Ele é o/ Bom que gostou :3
      Obrigada, pra você também ^u^

      Excluir
  21. Estou tão feliz por ter postado este tutorial, super adorei Paulinha *---*
    Beijinhos!
    Eternal-Bella.Blogspot.Com|Precisando de seguidores, ajuda?

    ResponderExcluir
    Respostas
    1. Ooown, que bom que gostou, fico feliz, Bella ^^

      Excluir