Avatar

Tutorial: Como Mudar Cor De Fundo Blog

segunda-feira, 10 de outubro de 2011
0
É 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. 



1 - Procure a imagem que lhe interesse e baixe no seu computador

3 - Clique no álbum em que estão as imagens do seu blog [geralmente o álbum possui o mesmo nome que o blog]












No Blogger

    }




    }







background: url(ENDEREÇO DA IMAGEM) top center no-repeat;

background: url(ENDEREÇO DA IMAGEM) top left no-repeat;

background: url(ENDEREÇO DA IMAGEM) top center fixed no-repeat;

background: url(ENDEREÇO DA IMAGEM) repeat;

background: url(ENDEREÇO DA IMAGEM) repeat-y;

background: url(ENDEREÇO DA IMAGEM) repeat-x;

background: url(ENDEREÇO DA IMAGEM) x-% y-% no-repeat top;
Escolhendo a imagem usada A maioria dos leitores está tendo problemas com a imagem. Vou explicar bem detalhado aqui como obter o endereço da imagem. 2 - Acesse o PICASAWEB [nele estão todas as imagens do seu blog, não delete nada!!!] 4 - Clique em "Adicionar fotos" 5 - Selecione a imagem que está em seu computador e clique em "Iniciar Upload". ...No navegador Firefox 6 -Acesse a imagem que você hospedou no Picasa. Clique sobre a imagem com o botão direito do mouse e clique em "Exibir imagem". [Obs: Existe um campo chamado Link para esta imagem, este link não funciona no blog] 7 - A imagem será mostrada sozinha no seu browser. Copie a url que está na barra de endereço do seu browser. Esta imagem será usada no código abaixo em ENDEREÇO DA IMGEM. ...no Internet Explorer Clique sobre a imagem com o botão direito do mouse e selecione PROPRIEDADE DA IMAGEM. Na janelinha que abriu, copie o URL da imagem. 1 - Abra a aba "Layout" do blog no "Painel" e clique em Editar HTML do blog, procure o código:  body {    background-color: $bgcolor;    margin: 0px;    padding: 0px;    font: $bodyfont;    color: $textcolor; Ele fica logo no começo do código HTML do seu blog, 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!). 2 - Substitua todo o código acima por este aqui:body {    background: url (ENDEREÇO DA IMAGEM) no-repeat left top;    margin: 0px;    padding: 0px;    font: $bodyfont;    color: $textcolor; 3 - Substitua ENDEREÇO DA IMAGEM pelo endereço da sua imagem hospedada na internet.VISUALIZE O TEMPLATE antes de Salvar, se estiver OK, SALVE. Mais opções para a imagemAlgumas 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: 3 - Imagem fica fixa, centralizada, não se repete e não rola junto com a página: 4 - Imagem se repete por inteiro na página: 5 - Imagem se repete de cima pra baixo: 6 - Imagem se repete da esquerda pra direita: 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! É isso aí galera! Espero que ajude. Qualquer dúvida, pergunte

0 comentários:

Postar um comentário

Assinar: Postar comentários
Template by : §Chriss§