
Observação: É possível alterar o visual do seu blog editando a CSS. Para alterar o conteúdo real do seu blog, seja incluindo gadgets ou fazendo mudanças no layout, use o campo Editar HTML localizado na guia Layouts. É importante lembrar que, como em outras personalizações, se o design for alterado, a CSS será removida.
A CSS permite criar diversas personalizações de estilo. Vamos analisar algumas delas para que você possa entender como essas mudanças são feitas.
A primeira alteração de CSS que analisaremos é como centralizar o texto do cabeçalho do seu blog. Vá para o campo CSS localizado na guia Avançado | Adicionar CSS no Designer de modelo. Em seguida, insira as seguintes linhas de código:
.Header {
text-align: center;
}
Depois de adicionar o código, você verá que a imagem do texto do cabeçalho mudou para o alinhamento centralizado. Se você gostou do resultado, clique no botão laranja Aplicar ao blog e a imagem do cabeçalho será salva. Se você decidir remover ou alterar a imagem do cabeçalho mais tarde, basta apenas excluir ou alternar o código de imagem do campo.
A segunda alteração de CSS que analisaremos é como adicionar uma imagem de plano de fundo ao seu blog. Para sermos mais práticos, vamos considerar que a sua imagem não está hospedada na web e forneceremos instruções sobre como fazer upload dela em um host de arquivos para vinculá-la ao blog. Estas são todas as etapas necessárias para usar uma imagem do computador como plano de fundo no seu blog:
- Compacte a sua imagem. Verifique se o tamanho da sua imagem é inferior a 250 KB. Caso contrário, abra a imagem no editor de fotos de sua preferência e compacte-a para ajustá-la ao limite. Além disso, alguns hosts de imagens, como o Imgur, fornecem uma opção para compactar sua imagem para um determinado tamanho antes do upload.
- Faça upload da sua imagem em um host de arquivos. Para adicionar uma imagem de fundo pela CSS, é necessário que a sua imagem possua um link. Se a sua imagem ainda não estiver na web, faça upload dela em um host para armazená-la. Algumas opções confiáveis são os Álbuns da web do Picasa, o Imgur e o Photobucket. Navegue até o host de sua escolha e siga as orientações de upload.
- Adicione o snippet de CSS da imagem de plano de fundo. Agora que o upload foi concluído, adicione a CSS para usar a sua imagem como plano de fundo do seu blog. Este é o código:
.body-fauxcolumn-outer {
background: url(http://www.exemplo.com/imagem.png);
}
.body-fauxcolumn-outer div {
background: none;
}
- Aplicar ao blog. Se você gostou do resultado, clique no botão laranja Aplicar ao blog e pronto. Se preferir, você também pode remover ou alterar a imagem de plano de fundo mais tarde. Observação: Os modelos com gradientes (como o Simples 1) podem entrar em conflito com o uso de imagens de plano de fundo.
4 comentários:
Olá, parabéns pelo blog.
Pretendo fazer minhas páginas em HTML e CSS à parte e, depois de prontas, postar no blogger. Como faço isso?
Obrigado. Abraços
Não achei muito últil '-'
Não achei muito últil '-'
Achei muito útil, seu código funcionou, obrigado.
Postar um comentário