Como mudar o background nos templates do Blogger

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

Mas a maioria de nós ainda prefere personalizar seu próprio template, correto? Então, o que devemos fazer para colocarmos um plano de fundo diferente 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.

Top 10 Free Resources for Background Patterns and Textures for Web Designers

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 {
text-align:center;
color$textColor;
background: $backgroundColor;

Substitua a linha do background por:

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.

Volte ao html do Blogger e cole o link no local indicado (em azul)

body {
text-align:center;
color$textColor;
background:#fff url(http://www.backgroundlabs.com/backgrounds/358.gif)repeat;

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.

Para trocar o background dos novos modelos do Blogger, acesse este post:

Como trocar a imagem de seu background no Designer de modelo – Crazyseawolf Blog

Existem outras formas de se configurar o plano de fundo, alterando o final do código:

background-repeat: no-repeat; - imagem aparece uma vez

background-repeat: repeat-x; - imagem repete horizontalmente(lado a lado)

background-repeat: repeat-y; - imagem repete verticalmente(uma embaixo da outra)

Solte sua criatividade e deixe sair o webdesigner que existe dentro de você ;)