1 de mar. de 2013

Tutorial: Dois Backgrounds no Blog

Hey, angels :) What's up?

Quero avisar pra vocês que amanhã trarei um tutorial bem bacana que nunca me imaginei fazendo: como criar um layout. Nessa postagem irei também especificar um pouco mais: como deixar esse layout básico rocker.

Mas hoje o assunto é outro. Vocês já devem ter visto várias vezes o background de icons em blogs, certo? Bom, ensinarei a colocá-lo nesse post. Curiosos? É só continuar lendo. Vamos lá?

Vá em Modelo > Editar HTML. Usando Ctrl + F, busque pela tag body { . Vocês irão encontrar algo mais ou menos assim:
body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
}
Pois apaguem tudo e substituam pelo código abaixo:
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; }
Vocês devem alterar as partes em negrito. O que elas significam? Bom, "300px" é basicamente a altura do seu primeiro background. Você irá colocar a URL dele onde diz "URL do 1° background". Para finalizar, é só pegar o link do último background é colar no lugar de "URL do 2° background".
Pronto! Aprendi com o Cherry Bomb. Sei que bastante gente conhece esse tutorial, mas é sempre bom ensinar, certo? Pode ser útil.

Precisando de Backgrounds com Icons?
- Clique aqui
- Clique aqui

Ou peça na área de comentários ou ask.fm do blog, especificando tema e cor da barrinha.

Bom, por hoje é só.
Espero que tenham gostado.
Beijos,

Mrs. Nightshade.

6 comentários:

  1. Oi, vim te incomodar :3
    Pode ensinar a fazer o gadget com as bordas e títulos arredondados que nem o do Mrs. Nightshade ?

    Vlw !

    Bjs

    ResponderExcluir
    Respostas
    1. Incomodo nenhum :3 Adoraria fazer um tutorial sobre isso, mas infelizmente o blog em que encontrei o tutorial não permite reblogar conteúdo.

      Beijos!

      Excluir
    2. Que pena, será que não dava para me passar o nome do blog ? Apenas o nome, deixa que eu procuro o tuto. Desculpe pelo incomodo mais uma vez, beijos.

      Excluir
    3. Posso te passar o link do tutorial, é mais fácil pra você :3

      http://camilasdesigns.blogspot.com.br/2012/05/personalizando-sidebar-modelo-viagem.html

      Não é incomodo nenhum :D

      Beijos!

      Excluir