Template para Blogger, como criar um? o Background #Aula02

background-aula02

Oi oi gente?!

Vamos continuar a nossa aula sobre templates para blogger…

background-aula02-1

Bom, hoje iremos começar pelo background, como adcionar/mudar a cor ou colocar uma imagem de fundo.

Na Aula 01 vocês viram a base do template para blogger, e ao quê corresponde cada parte dele. ( se você ainda não viu a Aula 01, volta lá e faz e download do template base que disponibilizei para vocês).

 

#FicaaDica: Recomendo que baixe o editor NotePad++, com ele fica muito mais fácil achar os códigos que iremos mexer. Melhor que editar no próprio painel HTML do Blogger e muito melhor que o Bloco de Notas. Ele diferencia os códigos com cores, mostra onde cada tag/div está abrindo e fechando. Além de quê em “Search” você pode digitar o nome do que você procura e ele vai te mostrar todos os lugares do código onde tem aquela “palavra” que buscou. Tornando muito mais rápido sua procura pelos códigos que irá modificar. Pois daqui pra frente iremos mecher muito no código do nosso tema base  😉

Voltando…

Uma das coisas mais fáceis de se fazer num template é adcionar o background, ele pode ser uma imagem ou apenas uma cor. Por padrão, o Minima apresenta apenas uma cor predominante, que é o branco. E já que as partes principais do template (área de post e sidebar) não possuem variáveis de background, o branco tornou-se a cor padrão para todo ele.
Na definição das variáveis encontramos apenas uma destinada ao background, que é a variável “bgcolor”. Veja:

background-blogger

O branco pode ser alterado facilmente por uma outra cor ou imagem de sua preferência. Se quiser que o background seja apenas uma cor, altere o #fffff na variável (imagem acima) pelo código da cor desejada. Para adicionar uma imagem como background do template, procure pelo seguinte código:

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

Em background apague a variável $bgcolor e cole o código abaixo no lugar dela:

background: url(link_da_imagem)repeat fixed;

DICA:
link_da_imagem: é o lugar onde você deve inserir o endereço da imagem escolhida. Hospede a imagem desejada e copie o link e cole no local indicado.
repeat: é o comando que faz a imagem se repetir em todo o fundo. Se quiser que a imagem repita apenas na horizontal coloque repeat-x e na vertical, coloque repeat-y.
fixed: faz com que a imagem fique fixa e não se mova junto do template quando você rolar a página.

Após isso, se você estiver editando no NotePad++ copie tudo, cole lá no editor HTML do blogger salve e clique em Vizualizar. Caso esteja editando diretamente no blogger apenas salve e clique em Visualizar. Suponho que você tenha notado que o template está transparente com o background aparecendo em todas as áreas, acertei? Bom mas isso a gente arruma rapidinho, Keep Calm!

Na próxima aula vamos começar a arrumar tudo isso. Vamos colocar fundo e imagem nas seguinte áreas: sidebar, posts, topo e rodapé. E nosso template começa  a ganhar vida.

Não se esqueçam de curtir o blog pelo Facebook para não perder nenhuma aula! Só clicar aqui e curtir.

Um big beijo e até o próximo post. 😉

 

Previous Post Next Post

2 Comments

  • Reply mari mesquita

    Sempre ajudando nós meras mortais!!!
    Obrigada!!!

    http://www.juizonacachola.com.br

    dezembro 14, 2015 at 11:07 am
  • Reply Lhéu Suély

    SEntir falta só de uma imagem mostrando com e sem..
    Mas amei a dica…Gostei, muito legal!
    Blog ArroJada Mix
    Divulgação de Blogs

    janeiro 16, 2016 at 6:35 am
  • Leave a Reply

    Já leu esses artigos?