Como adicionar CSS personalizada no Blogger - atributos e efeitos - por Help Blogger

O Designer de modelo do Blogger permite personalizar praticamente todos os aspectos da aparência do seu blog por meio das CSS (folhas de estilos em cascata). Para adicionar snippets de CSS ao seu modelo, abra o Designer de modelo e adicione o seu código no campo localizado na guia Avançado | Adicionar CSS.

As alterações feitas serão imediatamente refletidas em uma visualização dinâmica abaixo do editor.
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.