É muito fácil trocar a imagem de fundo do seu blog. Mas devemos tomar um certo cuidado ao fazer isso para que o blog não se torne pesado demais ao ser acessado por internet lenta, geralmente discada.
Se sua imagem não está hospedada na internet, hospede ela no PICASA.
Tendo hospedada a imagem, vamos para o Blogger.
Se sua imagem não está hospedada na internet, hospede ela no PICASA.
Tendo hospedada a imagem, vamos para o Blogger.
::: No Blogger
Abra a aba "Layout" do blog no "Painel" e clique em Editar HTML do blog, procure o código:
Ele fica logo no começo do código, abaixo das variáveis do blog (lembrando que o código pode estar diferente do mencionado acima, porém se estiver depois de BODY, é esse mesmo!
Substitua todo o código acima por este aqui:
body {
background-color: $bgcolor;
margin: 0px;
padding: 0px;
font: $bodyfont;
color: $textcolor;
}
Ele fica logo no começo do código, abaixo das variáveis do blog (lembrando que o código pode estar diferente do mencionado acima, porém se estiver depois de BODY, é esse mesmo!
Substitua todo o código acima por este aqui:
body {Substitua ENDEREÇO DA IMAGEM pelo endereço da sua imagem hospedada na internet.
background: url (ENDEREÇO DA IMAGEM) no-repeat left top;
margin: 0px;
padding: 0px;
font: $bodyfont;
color: $textcolor;
}
VISUALIZE O TEMPLATE antes de Salvar, se estiver OK, SALVE.Uma coisa importante que você deve ficar atento é na hora de utilizar a imagem da internet. Geralmente busca-se no Google, clica na imagem, exibe ela e copia o endereço, maaass isso está errado! Essa imagem está hospedada em algum lugar e você estará roubando a banda [?] de onde esta imagem está hospedada [ele não vai gostar nada disso!]. Para não ter este problema, acesse o Picasa Web e hospede sua imagem, você utiliza sua conta Google para acessar.
::: Mais opções
Algumas configurações, dependendo do tipo de imagem que você estiver usando. Se desejar uma das opções abaixo, basta substituir a linha "background: url (ENDEREÇO DA IMAGEM) no-repeat left top;" pela mencionada abaixo.
1 - Imagem fica centralizada e não se repete:
2 - Imagem fica no canto direito da página e não se repete:background: url(ENDEREÇO DA IMAGEM) top center no-repeat;
background: url(ENDEREÇO DA IMAGEM) top left no-repeat;3 - Imagem fica fixa, centralizada, não se repete e não rola junto com a página:
background: url(ENDEREÇO DA IMAGEM) top center fixed no-repeat;4 - Imagem se repete por inteiro na página:
background: url(ENDEREÇO DA IMAGEM) repeat;5 - Imagem se repete de cima pra baixo:
background: url(ENDEREÇO DA IMAGEM) repeat-y;
6 - Imagem se repete da esquerda pra direita:
background: url(ENDEREÇO DA IMAGEM) repeat-x;
Pra finalizar, imagem que fica com uma distância do topo e da lateral (pode ser usado para ajustar o fundo com o conteúdo que está na frente, porém ficará um espaço vazio...use a criatividade!
background: url(ENDEREÇO DA IMAGEM) x-% y-% no-repeat top;É isso aí galera! Espero que ajude!
0 comentários:
Postar um comentário
OPINE