Desde que eu voltei com o blog, vocês têm pedido para eu ensinar a fazer essa faixa rosa e verde que cobre todo o blog, e hoje eu vou mostrar. Esse tutorial já é conhecido na web, mas talvez vocês não tenham se dado conta de que eu uso ele. Vejam a imagem:
Entederam? Eu uso um primeiro background que tem a faixa, e é da mesma altura do cabeçalho, assim as imagens se completam. E o segundo background que eu uso é o cinza simples, que cobre todo o resto do blog. Legal né? Veja agora o código que você deve usar para fazer isso.
1°) Vá em modelo > Editar HTML.
2°) Aperte Ctrl+F e procure por body { Você irá encontrar um código assim:
body {3°) Apague tudo e coloque no lugar este código:
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
}
Altere o número em vermelho (300) pela altura em pixels do primeiro background. Depois é só substituir as urls das duas imagens nos locais indicados.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; }
Gostaram? Esperem que ainda não acabou! Fiz três conjutos de backgrounds para vocês usarem nesse tuto. Peguem a vontade, mas quando usarem dediquem um espacinho do seu blog para por os créditos ao cherry bomb. ;)
Conjunto 1
Conjunto 2
Conjunto 3
Antes de terminar, só lembrando que a segunda batalha de blogs já está online lá no face do blog, e vocês já podem escolher o destaque desta semana.
Por hoje é isso! Feliz dia das mães ^^
Kissus,
Liah
Adorei!
ResponderExcluirhttp://cherry-stephane.blogspot.com.br/
Amei a dica amoore!
ResponderExcluirwww.cereja-com-morango.blogspot.com
Brigada! Eu estava precisando mesmo!
ResponderExcluirDê uma olhada de como ficou:
memories-diario.blogspot.com
Postar conjunto masculino pf
ResponderExcluirAgradeço deste já
http://blogger-boysattitudes.blogspot.com.br/
Amei! Vou usar esse tutorial no meu próximo layout!
ResponderExcluirhttp://timemachine-br.blogspot.com.br/
Muito lindo *-* No meu próximo lay to pensando em colocar *.*
ResponderExcluirhttp://garotasmalvadas.blogspot.com.br/
Amei, era o que eu estava procurando a tempos!. Obrigada Liah! <3
ResponderExcluirAdorei os tutos e as combinações, vou usar isso no meu próximo lay :33
ResponderExcluirhttp://thecherrypunk.blogspot.com/
Adoreeeeeei *---*
ResponderExcluirEu não tinha achado que era 2 backgrounds, e sim que o cabeçalho era assim e que com algum código ficava poor toda tela ^^
Estranho, seu cabeçalho são várias imagens O.o
Garota do olhar sincero
Ah eu já sabia desse tuto, até já usei lá no blog. Acho que o efeito fica muito lindinho, vale a pena ^.^ Beijos ♥
ResponderExcluirGarota de All Star
Amei o tuto' já vou fazer no meu blog ><'
ResponderExcluirComo vc colocou essa borda no post igual folha de caderno?' faz um tuto?' pf *.*'
Já conhecia o tutorial, acho o resultado super fofo *-*
ResponderExcluirhttp://blog-sweetpoison.blogspot.com/
Já vi em algum lugar esse tuto...
ResponderExcluirAcho que foi no velho Menina Nerd! (rs) Muito bom.
E eu ju-ra-va que essa barrinha era parte do cabeçalho! Nem me liguei que era um back, rsrs
Obrigada pela visita lá no blog :3
Rebel Cinderella
Hhmmm, que legaal....gostei do tuto...
ResponderExcluirah, ja postei o resultado do look que escolhi, veja se vc acertoou...
Bjss
http://espacofemininoaqui.blogspot.com.br/2012/05/e-eu-fico-com-o.html
oi eu queria um tutorial : como colocar imagem no nome do blog obrigada
ResponderExcluirAiin Liah, que bom que vc voltou a postar, smepre entrava aqui no blog pra ver se vc tinha decidido voltar, haha'. Fiz um lay novo no blog com 2 backgrouds no blog também, e eu consegui pq vc me ajudou ^^ ... enfim, ve se vc gosta do meu lay
ResponderExcluirbjookas ^^
http://tictacgirls.blogspot.com.br/
Demais, como sempre *--* Amei!
ResponderExcluir[uprisingteen.blogspot.com.br]
Oii, eu queria saber como que coloca o nome do blog na area da postagem igual nesse blog http://tumblr2bloggerlayout.blogspot.com.br/ se você me ensinasse como é que se coloca, ou me passar o link da onde vc tirou esse tuto, porque eu procurei em todo lugar e n achei
ResponderExcluirObrigada *
http://paradise-bieber.blogspot.com.br/
Adorei o tutorial, Liah você arrasa SEMPRE! Adoro seu blog. Depois eu vou tentar. Adorei você ter voltado com o blog.
ResponderExcluirLayla
www.blogsaiudoforno.blogspot.com
Esse comentário você lê e apaga ~porque ele vai se auto destruir em 1h, kkk~. Então, meu blog já vai fazer um ano em julho, e eu queria fazer uma série de entrevistas com pessoas que são especiais para o blog, e queria saber se você quer participar! Sei que você não vai muito lá, mas o Chery Bomb sempre foi a inspiração do meu blog, e você é a minha blogueira favorita, eu ia adorar se você participasse! Se você quiser, me avisa lá no blog que eu vou mandar as perguntas, e como eu só vou postar no fim de junho/começo de julho, vou poder te mandar depois de pronto para você ver antes de eu postar. Quer participar? Espero que sim!
ResponderExcluirLayla
www.blogsaiudoforno.blogspot.com
Amei a dica! Com certeza vou usar no próximo design do blog, só não entendi muito bem como que funciona. Mas fica lindo!!!
ResponderExcluirKissus ----> Blog Bola de Chiclete.com
Lindos os conjuntos,adorei o post já tinha visto mais só você tem o jeitinho Cherry de explicar U.U
ResponderExcluir;D ----> Uma Rebelde
Liah! Lembra de mim? rsrs... Eu preciso de uma ajudinha sua. Am, como você colocou aquele título dizendo WELCOME e o outro VOLTE SEMPRE?? Aquela fitinha é muito fofa, e eu queria aprender como é que faz. Me dá uma ajudinha?? Se não quiser dizer em público, envie para o meu e-mail (ramos.fernanda14@gmail.com). Ficaria muuuito agradecida se você me desse essa ajudinha... Beijão
ResponderExcluirQuerida faz um tutorial de como deixar o titulo dos gadgets igual os seus !
ResponderExcluirAmei a dica, com certeza vou usar no meu proximo lay :D
ResponderExcluirhttp://themudancas.tk/
Com certeza seu blog é um dos melhores que existem, Adorei o post.. vou tentar fazer depois. beijos.
ResponderExcluirhttp://theworldteenager.blogspot.com.br
Ah!! Eu também uso vários backs no cabeçalho hehe
ResponderExcluirPrincipalmente por conta na animação que exige camadas diferentes, jurava que a sua era faixinha era do header, amei!
bjãoo
Gratias consequat, Liah ius?
ResponderExcluirOscula Ana
http://jemi-believeinme.blogspot.com
:p
Amore é primeira vez que venho a seu blog, gostei muito dessa ideia, só que to tendo dificuldade pra fazer por causa dos pixel, não sei o numero exato. Pode me ajudar? Obg. *-*
ResponderExcluirAah cherry preciso muito da sua ajuda, tá uma confusão o meu blogue agr! que que eu faço?? o.O
ResponderExcluirA Meu deus me surprendeu esse tuto , gente é muito bom ooo
ResponderExcluiramei amei brigada Liah te amo ...
cookiecupcake-off.blogspot.com
By Joyce
Eu amei esse tuto e muitoo, mas estou tendo uma certa dificuldade para faze-lo ;s e eu queria pedir uma coisinha...será que você pode fazer, tip,o um vídeo ensinando a fazer esse tutorial? obg *-*
ResponderExcluirxoxo'
amor nossa a primeira vez que vejo seu blog ele é lindo d++
ResponderExcluirsegue o meu tbm?
http://coisademeninabonita.blogspot.com.br/
Amei vou usar com certeza um deles mais com créditos tá liah?
ResponderExcluirTambém existe outra forma para fazer isso, costumo colocar o background da página no body e criar o header-wrapper onde acrescento o outro background, que seria o que ficaria por baixo do header rs
ResponderExcluirBjs!
www.punkreader.com | design.punkreader.com
Ola liah como eu faço par junta o topo com a postangem porque não to conseguindo http://atrevidinhamesmo.blogspot.com.br/ vai um tutorial me ensinando?
ResponderExcluiramei e usei ! Parabéns eu visito seu blog todo dia, graças a você a Candy meu blog está lindo ! Beijokas
ResponderExcluirviciadaemlogar.blogspot.com
viciadaemblogar.blogspot.com*
ResponderExcluiresse tutorial foi do http://blog-garotadescolada.blogspot.com.br/2011/06/colocando-dois-backgrounds-no-blog.html ??? né !
ResponderExcluirNão deu :( sempre que eu coloco vai para o fundo inteiro do blog!
ResponderExcluirrevolutionstartshere-oficial.blogspot.com.br
Nossa,muito legal.Vou tentar fazer *--*
ResponderExcluirComo eu sei quantos pixels tem o meu primeiro fundo?
ResponderExcluirO MEU NÃO DEU.....
ResponderExcluirtenho uma dúvida quando eu aperto ctrl f aparece um negocio la em cima da tela e eu coloco lá codigo e não aparece nada
ResponderExcluirComo fazer uma igual ao seu percebi que não tem só 2
ResponderExcluirPor favor, quem puder, poderia tirar a minha dúvida ? É o seguinte: eu fiz tudo certinho passo-a-passo, até aí, Ok. Só que os itens que costumavam ficar abaixo do cabeçalho (cabeçalho, barra lateral, etc) Ficaram tudo em cima dos backgrounds. O que eu faço? Desde já agradeço! (:
ResponderExcluirOi Liah! Me apaixonei pelo tutorial e peguei o conjunto dois, estou tentando executar para colocar no blog... Por enquanto ele está funcionando perfeitamente no blog de testes.
ResponderExcluirBeijos,
Cami.
www.vitima-fashion.blogspot.com
Adorei fofa já estou usando o de corações, e pode deixar eu vou criar uma pagina de créditos e seu nome com certeza vai estar lá ok?
ResponderExcluirbjs
www.queen-of-girls.blogspot.com
legal estou usando entra la:
ResponderExcluirmeu-finalfeliz.blogspot.com
Podia colocar mais fundos!
ResponderExcluirAmei estarei usando no meu próximo layout http://goods-sweets.blogspot.com.br/
ResponderExcluirLi-ah!!! *-*
ResponderExcluirTô louca aqui!!! Muuitooo obrigada!
Ralei um pouquinho pra adaptar pro que eu precisava porque o código do meu template já toodo modificado mas agora vai ficar ótimo!!
O blog ainda não tá pronto. Pus só no de testes mas esse tuto salvou o meu layout.
Bri-ga-da-çoo!! =*
Liiiindo demais! *-*
ResponderExcluirhttp://blognadaprafalar.blogspot.com.br
Eu tentei usar, mas o background ficou até na metade do blog, como faz pra ele ficar só no cabeçalho?
ResponderExcluirNão funcionou :(
ResponderExcluirConsegui! Adorei, ficou super bonitinho!
ResponderExcluirPeguei a 1ª imagem do conjuntinho 2, ok?
Beijos, Carol!
Part Of Me
Como eu coloco o menu dentro dessa barrinha,igual aqui :http://www.chadefutilidade.com/
ResponderExcluir?
Adorei o tutorial =D
Funcionou :)...
ResponderExcluirBlog Depois da Meia Noite
usei esse tutorial amei, ficou lindo, a pena é que fica com muito espaço do lado do blog, tem como retirar esse espaço?
ResponderExcluirAh fica mesmo lindo um dia ainda quero usar em algum dos meus layouts!!
ResponderExcluirÉ por isso que eu falo que você me inspira Liah!!
Beijos
Valeu amoõoooooooooooooooooor \o/
ResponderExcluirAmei. Brigadãaaaaaao (:
Kiss (&'
Fantastico tutorial!
ResponderExcluirAdorei! Bem simples. Obrigada :)
ResponderExcluirBJS
Minha Vida Fora de Série (perfil)
Amei e estou usando no meu blog, é lindo de morrer. Obrigada viu *-*
ResponderExcluirMEU BLOG: Stefany e Ponto
TWITTER: Twitter Stefany e Ponto
FANPAGE: Fanpage Stefany e Ponto
Meu Deus, eu não consigo de jeito nenhum! O background 1 fica se repetindo até a metade do blog! Eu não sei oque fazer! Já fiz esse tuto milhões de vezes, mas nunca dá certo! Oque eu faço, Liah ? Beijos <3
ResponderExcluirEu estou usando no meu blog ^.^
ResponderExcluircr4zy-world.blogspot.com.br
Valeu, o meu ficou lindo! Só teve alguns imprevistos, mas depois ficou perfeito!! Obrigada
ResponderExcluirAmei amorê!
ResponderExcluirOlha como meu blog ficou!!
ResponderExcluirmiss-teensami.blogspot.com
Olá Cherry usei o segundo conjunto...
ResponderExcluirhttp://lojacoisasdalia.blogspot.com.br
amei amei amei
ResponderExcluirolha como ficou no meu blog
http://cajuhmakeup.blogspot.com/
Adorei! Mas tem como usar esse código em conjunto com aquele para gadgets no cabeçalho?
ResponderExcluirBeijitos
Caracas amei esse blog *-*,me ajudooo de mais,e meu blog ta tão perfeitinho >.< Obg,obg mesmo <3
ResponderExcluirLiah como eu coloco o 1° backgrounds na altura que esta nessa foto sua ? o meu esta ficando lá no inicio da pág. ;/
ResponderExcluir-> http://adocemenina1997.blogspot.com.br/
Ficou assim -> http://blogtestedocemenina1997.blogspot.com.br/
ResponderExcluirPor alguma coisa estranha eu não achei a html. tem como você me ajudar?
ResponderExcluirPorque o html mudou!
ResponderExcluirMe ajudou muito!!
ResponderExcluirOlá! será que pode ensinar como colocar a faixa do home? esse seu é lindo rosa com pontinhos brancos, vejo uns lindos coloridos, do Google e simples só dar para trocar de cores ser puder ajudar agradeço bjs.
ResponderExcluirOlá! eu fiz tudo certinho, só que a imagem do cabeçalho 1 se repete por todo blog, você sabe me dizer o motivo? pode me ajudar? eu usei a imagem floral azul com rosa,o rosa ficou com listras rosa por todo blog.
ResponderExcluirpor favor preciso saber o motivo obrigada.
http://www.ficarbem.com/
Oi tudo bem?
ResponderExcluirNão consigo achar body { no meu blogger. Por que?? Você pode me ajudar???
Affs.. vocês me ajudam demais! Como não amar?
ResponderExcluirLindos!Deu super certo!obgg
ResponderExcluirAjudou bastante!! Adorei!!!
ResponderExcluirhttp://pequenomundodosblogs.blogspot.com
seu post me ajudou a dar uma nova cara para meu blog e gostaria tbm de convidar você e suas leitoras e visitarem emeu blog e seguir lá
ResponderExcluirhttp://vicio-das-meninas.blogspot.com.br/
Oi Lyah, eu coloquei mais o primeiro bg fica repetido :( já tentei ''no repeat'' mais aí o primeiro bg não aparece :| se você puder me ajudar agradeço, kissus! ^^
ResponderExcluir