segunda-feira, 12 de julho de 2010

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.

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 modeloCrazyseawolf 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ê ;)

Sobre o autor: Juliana é a fundadora deste blog. Nascida em 1970, é médica e, nas horas vagas, blogueira. Também é top colaboradora do fórum de ajuda do Blogger. Twitter l Google Plus l Facebook l

5 comentários:

  1. É uma coisa simples, mas muito gente tem dúvidas.
    Até eu tinha! hehe
    Thank you! (;
    Forte abraço!

    ResponderExcluir
  2. Essas foram as primeiras coisas que eu aprendi a fazer nos templates. E já aviso o pessoal que sei fazer isso há dois anos, mas estou sempre aprendendo coisas novas. As melhoras vêm com o tempo. É aprender sempre.

    Um beijo, sucesso!

    ResponderExcluir
  3. Oi Juliana Substitui a linha do background por: background:#fff url(URL DA IMAGEM)repeat;
    , no mozila aparece a imagem de fundo, mas no IE não aparece a imagem!!! o que devo fazer???

    obrigado

    ResponderExcluir
  4. ótima dica

    estou personalizando um template, ta dando uma trabalheira, mas ta ficando muito bom e essa dica ajudou bastante

    Obrigado

    ResponderExcluir
  5. Eu fui testar agora no IE8 e não aparece a imagem que coloquei, ja nos outros navegadores aparecem

    Alguma dica?

    Um abraço

    ResponderExcluir