Os templates criados para Blogger (Blogspot), costumam vir com a opção de alterarmos apenas a cor do plano de fundo (background), mas existe também a possibilidade de, no lugar de uma cor sólida, colocarmos uma imagem de fundo. Nos novos modelos padronizados, isso já pode ser feito diretamente do painel do Blogger.
- Designer do modelo – tutorial em vídeo
- Como criar um template para Blogger / Blogspot
- Novas funcionalidades de layout no Blogger
Antes de mais nada é preciso entendermos o conceito de background e de patterns.
Segundo o DicWeb, background é:
[Ing.] (Fundo). 1. Área sobre o qual são apresentados textos e imagens em uma página Web. 2. Atributo utilizado em linguagem HTML, para definir o fundo de uma página. Definido, em geral, por um arquivo de extensão, gif ou jpg., é inserido entre as tags .Já as patterns, segundo o blog Photo Filtre Studio, são:
Patterns são texturas que substituem as cores normais, as Patterns podem ser utilizadas em fundos, mask e fontes.Ou seja, background é aquela área que fica ao fundo de uma página web (mas não só) e as patterns são uma das formas utilizadas para o plano de fundo.
Existem milhares de sites que disponibilizam background e patterns gratuitamente. Basta fazermos uma pesquisa no Google com as duas palavras, que já temos diversão para o ano todo. No blog Specky Boy encontrei uma resenha mostrando os 10 melhores sites com patterns gratuitas. Vale à pena conferir.
Muito bem. Agora vamos aprender como mudar o plano de fundo do Blogger usando uma imagem como background. Entre em design e procure pela aba editar html. Usando o Crtl+F do teclado, encontre algo parecido com isto:
body {Substitua a linha do background por:
text-align:center;
color$textColor;
background: $backgroundColor;
background:#fff url (URL DA IMAGEM) repeat;Onde URL DA IMAGEM é o endereço da imagem que será usada como plano de fundo e #fff é uma cor para o caso da imagem parar de funcionar. Veja tabela de cores.
Vamos para um exemplo prático. Vou utilizar uma pattern do site Background Labs, no template DB 3.0. A imagem escolhida será a Stripes Background 44. Podemos baixar a imagem, hospedar no Picasa e copiar a url. No site em questão, é permitido usarmos a url deles, contanto que sejam dados os créditos. Clique com o botão direito do mouse sobre a imagem ou sobre a url e copie o link.
body {Clique em visualizar para fazer os devidos testes no template e se estiver bom, salve. Veja, na imagem abaixo, como ficou o template DB 3.0 com a pattern.
text-align:center;
color$textColor;
background:#fff url(http://www.backgroundlabs.com/backgrounds/358.gif)repeat;
![]()
Para trocar o background dos novos modelos do Blogger, acesse este post:
Existem outras formas de se configurar o plano de fundo, alterando o final do código:Como trocar a imagem de seu background no Designer de modelo – Crazyseawolf Blog
background-repeat: no-repeat; - imagem aparece uma vezSolte sua criatividade e deixe sair o webdesigner que existe dentro de você ;)
background-repeat: repeat-x; - imagem repete horizontalmente(lado a lado)
background-repeat: repeat-y; - imagem repete verticalmente(uma embaixo da outra)