Os tutoriais e templates aqui apresentados são voltados para os Modelos de layout (lançados em 2006). A eficácia das dicas aqui apresentadas não foram testadas nos novos modelos de templates do Blogger (2010).

02 setembro 2008

Como fazer um template para o Blogger III Background

Bom, agora que já entendemos o que são as variáveis e aprendemos a criar algumas novas, vamos aprender a dar estilo a Body, que é o corpo do nosso documento, da nossa página, e que contém todos os outros elementos.


Procure no código do seu blog de testes este trecho:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

A primeira propriedade que aparece para body é background, que é o fundo de um elemento html. Originalmente no template Mínima o valor é a variável $bgcolor. As propriedades background e seus valores possíveis são:

background-color: (cor do fundo)

Valores:

  • código hexadecimal: #FFFFFF
  • código rgb: rgb(255,235,0)
  • nome da cor: red, green, white, etc
  • transparente: transparent

background-image

  • url(link da imagem)

background-repeat

  • no-repeat
  • repeat (repete por toda a página na horizontal e vertical)
  • repeat-x (repete a imagem na horizontal)
  • repeat-y (repete a imagem na vertical)

background-attachment (se a imagem rola ou não com a tela)

  • fixed (imagem fixa na tela)
  • scroll (imagem rola com a tela)

background-position: (posição da imagem na tela)

  • x-% y-% (distância em porcentagem das margens do documento, horizontal e vertical)
  • top left
  • top center
  • top right
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right

A propriedade background pode ser aplicada a qualquer outro elemento html, além de body. Você pode determinar backgrounds diferentes para cada coluna, menu, títulos (sidebar, post) e footer.

Em nosso blog de testes vamos aplicar uma imagem de fundo em degradê, para testar.

Em seu editor de imagens (vou exemplificar no Photofiltre, aquele programa free que citei na primeira parte deste tutorial) crie uma imagem em branco de 50 de largura por 550 de altura e determine uma cor qualquer de fundo:

aula9

Clique na ferramenta gradiente: a primeira cor que escolhí foi a mesma que utilizei no fundo da imagem (#a3a3a3) e a segunda o branco:

aula10

Com a ferramenta conta-gotas, anote o valor da cor do final da imagem (bem do finalzinho mesmo, pois é esta cor que se repetira no background do seu template para além da imagem) A cor que eu anotei aqui foi #FEFEFE. Salve a imagem.

Agora vamos colocar esta imagem no background da nossa página.

1- Hospede a imagem no site TinyPic (ou qualquer outro de sua preferência). Tendo feito isso, copie o link fornecido (o último):

aula11

2- No código do template, você pode retirar a variável que está em background e colocar no lugar:

body {
background:#FEFEFE url(http://i33.tinypic.com/2ypd69z.jpg) repeat-x;

ou seja, a cor que eu obtí do final da imagem mais o link da imagem fornecido pelo TinyPic mais o valor repeat-x, pois desejo que a imagem que criei se repita horizontalmente. O resultado é este:

aula12

Note que rolando a página, a cor que continuará pelo background é a cor que colocamos antes do link da imagem e que continua o gradiente perfeitamente.

Posicionando uma imagem.

Vamos posicionar uma imagem no fundo. Vou usar esta imagem, tamanho 335x403:

marilyn

Hospede a imagem, copie o link fornecido e volte ao código do template:

body {
background:#FEFEFE url(http://i34.tinypic.com/behova.jpg) no-repeat top left;

resultado:

aula13

body {
background:#FEFEFE url(http://i34.tinypic.com/behova.jpg) no-repeat top center;

resultado:

aula14

background:#FEFEFE url(http://i34.tinypic.com/behova.jpg) no-repeat bottom left;

resultado:

aula15

ou ainda é possível um posicionamento mais preciso:

body {
background:#FEFEFE url(http://i34.tinypic.com/behova.jpg) no-repeat 80% 60%;

resultado:

aula16

o que eu fiz foi posicionar a imagem à uma distância de 80% da margem esquerda e 60% do topo.

Como lição de casa :-) teste diversas maneiras de posicionar imagens para o background da sua página, utilizando todos os valores possíveis.

Artigos Relacionados

27 comentários:

Anônimo disse...

Ariane,
em alguns sites há uma "borda sombreada", que separa as colunas do fundo. Para você saber o que estou dizendo, deixo aqui o site da USP como modelo (http://www4.usp.br/).
Dá para fazer o mesmo no blogspot?
Obrigada!

Cesar disse...

Parabéns Ariane!
Simplesmente o melhor tutorial sobre templates para Blogger da Internet.

Aparecido José (Crazyseawolf) disse...

Ariane, achei a altura da imagem muito pequena e alterei para 800. Veja como ficou aqui:

http://templateparamim.blogspot.com/

Estou aproveitando ao máximo suas lições! ;o)

Ariane disse...

Oi Cidão, percebí que a continuação da página é em outro tom, diferente do gradiente. Isto é proposital? (que bom que está gostando! )

Aparecido José (Crazyseawolf) disse...

Outro tom? Não tinha notado, eu posicionei o conta gotas bem no fim da imagem e deu aquele tom. Será que eu fiz algo errado?
Horrível mesmo é tentar ajustar os paddings e margings...
Mas estou tentando!!! :o)

Amplitude Sonora disse...

bom eu estou acompanhando seu tutorial e vou tentar fazer o meu primeiro atravez de suas dicas parabéns pela atitude

Dilma 13 presidente disse...

Ariane

Todos os dias, eu venho aqui na esperança de encontrar um tutorial, como você ainda não colocou tomo a liberdade de pedir.
Achei um template lindo, do jeito que eu gosto, porém esse templates não tem data. Melhor, tem embaixo da postagem, ao lado do comentário, mas em cima do titulo do post não. Achei aqui, como colocar data em baixo do post. Não é isso que eu quero. Quero em cima do titulo. Pode dizer como devo fazer?

O meu email é:

amapase@gmail.com

Meu nome é Ana

Dea Carvalho disse...

Ótima iniciativa, Ariane! Não lembro de ter visto um tuto assim antes. Tudo partindo do zero.
Bem, vim esclarecer um dúvida cruel. Tem como sobrepôr imagens no bg do blog?

Abraços!

Isabel Furtado disse...

Ariane,
estou tentando colocar a imagem de fundo só a esquerda e a direita, sem que ela fique no meio, sabe? Mas não estou conseguindo. Isso é possível? De que forma? Obrigado.

pikenatonta disse...

Obrigada pelas dicas!!! Finalmente consegui alterar o background no meu blog! :)

Isabel Furtado disse...

Oi, Ariane! Só para avisar que eu consegui fazer o que queria no meu comentário anterior.

Michel Franck disse...

Ariane, só você mesmo para mim salvar! Valeu pelo(s) post(s)....

Faial Fonseca disse...

Ariane, olá. E se eu quiser colocar uma imagem de fundo que possa ocupar todo o fundo do ecrã, sabes qual o tamanho real dessa imagem e como coloca-la sem ser pegue do meu myspace ou hi5? u k fazer pra imagem não se repetir e ocupar a tela inteira. Ja tentei mas faltou algo, e esse algo é o tamanho da foto. Ajudinha aí por favor? FF

Unknown disse...

Olá Ariane, é a primeira vez que visito seu blog e não entendo nada de templates, blackground etc e tals, fiz meu blog usando um modelo pronto do blogspot e só consegui alterar algumas cores e não sei passar disso, gosto dele do jeito que está, só tem uma coisa que está me incomodando horrores, o blog todo fica sobre um fundo verde (lateral toda)e eu gostaria de colocar uma textura, algo diferente mas clean, como se fosse um tecido ou algo simples e chique como essas flores que estão no topo do seu blog, será que vc pode me ajudar? se puder visitá-lo para dar uma conferida, agradeço.
Bjobjo

Unknown disse...

MUITO BOM!!!!!!!!! ALTEREI O MEU VÁAARIAS VEZES!

Popelina disse...

Ariane, bom dia. que excelente ideia e que grande ajuda este teu blog um imenso obrigada. Vou tentar, até agora ainda não consegui mudar o meu background, um grande abraço. Cristina/Popelina

MAOM disse...

Oi Ariane...
Fico sempre acompanhando o seu site!
É um site maravilhoso...parabéns...
Eu gostaria de saber se você pode me ajudar com este template...
É coisa simples é só alterar o background...
Eu trabalho com design, e em troca se vc quiser eu posso fazer um trabalho p/ vc e posso divulgar vc no meu blog...

Muito obrigado pela atenção!
Até...

Jujubiz disse...

Oi Ariane! Sempre venho aqui dar uma revisada nas tuas dicas, e sempre aprendo algo mais! Muito obrigada pelos tutoriais, hoje mesmo estava (e estou) futricando no HTML, hahaha, acabei 'destruindo' um blog meu que estava lindo, estou 'reconstruindo' ele novamente, e sem tuas dicas isso não seria possível!! Beijão!

Anônimo disse...

Opá,muito prazer,e parabéns pelo trabalho,que me ajudou em certos momentos.Bom,eu tinha uma dúvida,mas depois do "desista. Por um bom tempo não responderei perguntas.",acho melhor deixar pra próxima,hehe.Ficam só os mais sinceros elogios,mais uma vez,meus parabéns pelo conteúdo,cada vez melhor!!

Anônimo disse...

Oi Ariane, eu estou desesperada de cansada por estar noites á procura dum template simples, todo preto, com borboletas nos lados e uma grande em cima e não acho em lado nenhum, o que eu faço? Agradecia muito a sua ajuda, o meu mail é pinkjunne@gmail.com

emília. disse...

Oi, gostaria de saber se tem como colocar 2 imagens no fundo, por exemplo, aquele fundo degrade com alguma foto. Não estou conseguindo.
Agradeceria muito a sua ajuda!

Bjos

Anônimo disse...

Era exatamente o que eu estava procurando. Vai dar um pouquinho de trabalho mas vou tentar.
Já assinei os feeds, para não perder nenhuma postagem.
Parabéns pelo blog, super completo.

BCas disse...

Oi Flor. Gostei muito da maneira que vc coloca as explicações . Estou tentando me aventurar no template. Acho que lendo mais um pouquinho posso começar.
Já consegui alguma coisa com os marcadores. Muito obrigada.Beijocas .Elisabeth

Unknown disse...

existe como deixar o cabeçalho do blogspot transparente? assim fica só a imagem centralizada?

Diogo Bandeira disse...

Parabens Ariane, muito legal
suas aulas, tenho tirado muito
proveito, parabens pela iniciativa
de escrever, e compartihar seu
conhecimento de forma, voluntaria
e gratuita.

Que Deus continue
te abençoando.

SOCIEDADE EDITORIAL NDJIRA, Lda disse...

Obrigadíssimo.

Estou Clique de Moçambique, África, mas sinto-me como se estivesse em uma mesa de café tirando notas (e muitas notas) da curta conversa que recebo de si.

Seu Blog é uma prazeirosa aula de sapiência para quem quer saber, partilhar ou sugerir.

Visite nosso blog em www.editora-ndjira.blogspot.com
Seu parecer é desde já SUPER PRECIOSO, sem querer tirar merito de outros.

Sem mais, obrigado e Parabéns

Mário Lhamine
SOCIEDADE EDITORIAL NDJIRA

Unknown disse...

mt bom. Obrigada

Postar um comentário

Os comentários são moderados.