Caso alguma imagem do blog não esteja aparecendo, por favor, avise nos comentários da postagem em questão!

20/08/2011

NOVO: Tutorial 1 - O "Background"

Baseada nas respostas da minha pesquisa de opinião, resolvi começar a fazer tutoriais bem explicadinhos de como fazer um template. Vou tentar fazer do jeito mais fácil possível!!!
Se você quiser saber sobre algo específico com relação a Templates, deixe um comentário nessa postagem com sua sugestão e logo eu farei o Tutorial.
Só não vou poder colocar "PrintScrens" para ajudar na visualização, pois além de complicar para mim na hora de fazer a postagem, ainda por cima o Blogger está extremamente maluco, mudando toda hora o novo painel... Então, leia com atenção o passo a passo que eu vou fazer. E siga às instruções direitinho, heim!

Resolvi começar pelo mais fácil (ou menos difícil, sei lá) que é o fundo do seu blog, mais conhecido pela palavra inglesa "background".
Há várias formas de mudar o seu fundo, e muitos recursos que podem te ajudar a ter o fundo que você sempre desejou. Vou começar pela forma mais simples e vou aumentando a complexidade. Depois vou dar umas dicas gerais de como escolher o fundo. Mas leia até o fim, pois nem sempre o mais simples vai resolver seu problema, não é?

1ª Forma - Designer do Modelo:

Recentemente, o Blogger adicionou essa ferramenta de Designer do Modelo que é uma verdadeira "mão na roda" para nós blogueiros. Basta entrar em Modelo> Personalizar (o botãozinho laranja abaixo do seu template atual).
Ao abrir completamente o Designer (tem que aparecer uma visualização do seu template atual abaixo), clique na guia "plano de fundo". A opção "Imagem de plano de fundo" conta com uma galeria de imagens pré-definidas. Se você gostar de alguma, escolha e clique em "Concluído". Se ainda assim você quer um fundo que você achou na Net, salve esse fundo no seu computador e use o botão preto do canto superior esquerdo que diz: "Fazer upload da imagem", depois clique em "Selecionar Arquivo..." que irá abrir a janela do Windows, você escolhe seu fundo, e clica em Abrir. Se tudo der certo, sua imagem vai abrir num quadrado e no fundo do seu blog. Se ficou OK, clique em concluído.
Depois vão aparecer umas opções: a primeira (alinhamento) define em qual posição estará sua imagem. A segunda, se você quer que ela se não se repita (não dividir em blocos), ou se quer que se repita por toda a página no estilo "lado a lado" (bloco), ou repetindo só na horizontal (dividir horizontalmente), ou repetir só na vertical (dividir verticalmente). Por último, tem uma caixinha, onde você escolhe se quer que ela role ou não com a página. Isso fica à gosto.
Para salvar (depois que você fez todas as alterações) clique em "Aplicar ao Blog", no canto superior direito do Designer do modelo.
O Blogger recomenda imagens no formato 1600x1800px, para cobrir a tela inteira (se você quiser uma imagem só), para imagens pequenas é recomendável que você use a opção "Bloco".

2ª Forma - Adicionar CSS:

Ainda no Designer do Modelo, clique em Avançado> Adicionar CSS (última opção da lista). Essa forma é interessante pois pode colocar inclusive outro fundo em cima do fundo que você colocou agora a pouco. Doidera? Talvez não. Isso depende da sua criatividade.
Bom, voltando ao passo a passo, vai abrir uma caixa branca onde está escrito em cinza: "Adicionar o CSS aqui para substituir estilos existentes". Aqui nós vamos colar alguns códigos, e automaticamente você já vai visualizar seu fundo. Para saber que códigos são, leia a próxima forma, nos passos de 4 a 6. Depois clique em "Aplicar ao Blog".

3ª Forma - Alterando o HTML:

Essa forma é um pouquinho mais complicada, mas é muito boa para começar a entender como funciona um Template.
Primeiro, vá na guia Modelo > HTML. Aparecerá uma grande caixa cheia de códigos. Para trocar o fundo, siga os passos a seguir:

1. Clique em qualquer parte do código com o botão esquerdo do mouse, depois aperte Ctrl+F no seu teclado;
2. Na caixa que apareceu (Search), cole o seguinte código: ]]></b:skin> e aperte a tecla "Enter";
3. Esse trecho do template ficará em destaque;
4. Antes desse código, cole o seguinte (no caso de estar usando o Adicionar CSS, apenas cole na caixa):

body { background: url(URL_DA_IMAGEM) repeat top center;}

5.No lugar de URL_DA_IMAGEM, cole o endereço da sua imagem. É importante que seja entre os parênteses e que tenha o http:// (veja aqui como hospedar imagens);
6. Você pode fazer algumas alterações para que o fundo fique ao seu gosto, para que o background fique na posição desejada, troque o trecho em vermelho por:

repeat - repetir por todo o fundo
repeat-y - repetir na vertical
repeat-x - repetir na horizontal
no-repeat - não repetir
top - para que fique no topo
bottom - para que fique abaixo
left - para que fique à esquerda
right - para que fique na direita
center - para que fique no centro (center center deixa a imagem exatamente no centro do template)
x% y%  - para que fique na distância em porcentagem das margens do documento, horizontal e vertical (Ex: background: url(URL) no-repeat 80% 60%;)

7. Clique em Visualizar para ver se está tudo OK;
8. Quando tudo estiver pronto, clique em Salvar Modelo.

Dicas para escolher seu fundo:

Tudo depende da sua criatividade, mas vou dar umas dicas para você não errar na escolha do seu fundo. São elas:
  1. Os melhores sites para escolher uma imagem, na minha opinião é o próprio Google Imagens ou o Photobucket. No Photobucket pesquise sempre em inglês;
  2. Cuidado com a imagem que você coloca, se ela for se repetir. Ela tem que se encaixar direitinho uma na outra;
  3. Tente pesquisar a imagem também em inglês, vem mais variedades. Por exemplo: de bolinhas é "polka dot background", listras é "stripes background", quadriculado é "plaid background", laços é "bow background", quadrados é "squares background", etc.
  4. Não deleta nem mova a imagem hospedada. Senão ela some do seu template;
Por enquanto é só. Se você tiver alguma dúvida, deixe um comentário e eu acrescentarei aqui...

Mil Sweetkisses,
5 Comentários
Comentários

5 comentários:

  1. interessante. Informação é sempre bom! abrçs

    ResponderExcluir
  2. otimo tuto,a tempos procurava um pra fazer templates

    ResponderExcluir
  3. TÁ ROLANDO UM SORTEIO NO MEU BLOG E VIM TE CONVIDAR PARA PARTICIPAR!!
    MIL BJOS,
    RÔ(ARTESARÔ)

    ResponderExcluir
  4. Sheila, eu NUNCA tinha visto esse botão sério mesmo!!!!!!!!!! Muito obrigada por me ajudar, aliás a mim e a muitos blogueiros

    ResponderExcluir
  5. Muito bacana.
    A minha iamgem se repete ppor todo o blog, só que tem uma falha nele, gostaria que esta falha fosse retirada, como posso fazer?

    Beijos :*

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...
Posts relacionados