CSS no Blogger: o que é e como usar

O recurso de CSS (Cascading Style Sheets) é essencial para modificar aspectos visuais de um blog.

Por isso, ele é um dos componentes principais dos templates, justamente por permitir visualizações diferentes para cada blog.

Muitas customizações podem ser realizadas através do CSS, como a mudança de fontes, cores, bordas, imagens de fundo e muito mais.

Aprenda neste artigo os conceitos básicos do CSS e suas possibilidades de uso no Blogger.

Introdução

O CSS é um recurso bastante antigo.

Numa tradução aproximada, ele pode ser entendido como “Folhas de estilo em cascata”.

Para quem trabalha com desenvolvimento para web, conhecer CSS é fundamental. É uma forma bastante prática para separar a formatação das páginas de seu conteúdo.

Esse conceito é bastante aplicado no Blogger: através do CSS, são definidos diversos dos aspectos visuais do seu blog.

É graças a ele que cada blog possui fontes diferentes, cores diferentes, bordas diferentes etc.

Abaixo está um exemplo bastante simples de um código CSS, que define a cor de fonte para os links do Gerenciando Blog:

a:link {
color:#36C;
text-decoration:none;
}

É justamente pela modificação do CSS que são realizadas muitas das customizações vistas em tutoriais.

Uma customização recente que mostrei aqui no Gerenciando Blog e que se enquadra nesta categoria foi abordada no artigo Destaque no comentário do autor no Blogger.

Nela, mostrei que, com alterações no CSS de seu blog, é possível dar destaque aos comentários que você escreve.

A propósito, foi um comentário deixado pelo leitor José Marlon que inspirou a criação deste artigo.

Como em outras oportunidades, recomendo fortemente que você realize todos os procedimentos citados neste artigo primeiro em seu blog de testes, e não no oficial. Desta forma, você evita surpresas desagradáveis que possam atrapalhar a experiência de seus visitantes. Caso você ainda não tenha um, basta seguir as orientações do artigo Como criar um blog de testes no Blogger. Depois, você pode aplicá-las com segurança em seu blog oficial.

Como alterar o CSS do meu blog?

Há alguns locais diferentes onde o CSS do seu blog pode estar.

Na verdade, ele pode até estar espalhado por mais de um lugar diferente.

Isso significa que há também diversas formas para você realizar a alteração, cada uma com suas vantagens e desvantagens.

Lendo os itens abaixo, você aprenderá as diversas formas para realizar as alterações. As possibilidades são:

1. No código HTML do seu template

Praticamente todos os templates do Blogger (sejam eles criados pelo Blogger ou customizados) possuem códigos CSS no próprio HTML do template. Esta é a forma mais utilizada pelos criadores de templates, pois ao aplicar um novo template, todas as customizações serão levadas com ele.

Localizá-lo é bem simples: procure em seu HTML pelo termo b:skin.

Todo o código que você encontrar entre esse termo de abertura e o /b:skin, que faz o seu fechamento, compõe o seu CSS. Caso você tenha dúvidas para editar o seu template, sugiro a leitura do artigo Como editar o HTML de seu template no Blogger.

Na figura abaixo, você vê destacado em azul o termo que marca o início do CSS e em vermelho um exemplo de código CSS no HTML.

Você notou as cores diferentes das fontes? Isso é feito pelo ótimo editor Notepad++, que apresento no artigo 5 ferramentas grátis para apoiar seu blog. Este é um dos motivos pelos quais eu o utilizo para trabalhar com meus templates.

Tratando-se do CSS em seu template, há duas possibilidades. Em ambos os casos, é necessário alterar o código HTML e aplicá-lo em seu blog.

• Você pode alterar um elemento já existente. Utilizando como exemplo a cor de fonte do link, que mostrei na introdução deste artigo, você pode simplesmente mudar o código da cor no trecho já existente.
• Você pode adicionar novos códigos CSS. Você pode também adicionar um novo trecho de código, como o que mostrei no artigo Destaque no comentário do autor no Blogger.

Vantagens:

• Toda a alteração que você fizer nesse método ficará gravada no HTML do seu template.
• Se você aplicar o template em outro blog, as alterações feitas no CSS serão levadas para ele.
• Ao realizar o backup do seu template, todas as configurações de CSS estarão nele.

Desvantagem:

• Para aplicar a alteração, é necessário fazer alterações no HTML do template e há pessoas que ainda não se sentem seguras para fazer isso.

2. Pelo Designer de Modelo do Blogger

Outro local onde você pode realizar alterações no CSS do seu blog é através do Designer de Modelo do Blogger.

Eu falei sobre este recurso fantástico no artigo Blogger Template Designer: Customize seu Template, quando ele foi lançado e ainda não tinha um nome em português.

A grande sacada é que, fazendo as alterações desta forma, você não precisa modificar nada em seu HTML.

Basta você adicionar o trecho desejado de CSS como uma configuração do seu blog, e o Blogger adicionará automaticamente esse trecho ao seu template quando ele for exibido.

Para fazer as configurações de CSS dessa forma, basta seguir os passos abaixo:

1. Acesse http://www.blogger.com e entre com seu usuário e senha se forem solicitados.

2. Clique sobre o nome do seu blog.

3. Clique na opção “Modelo”, no menu lateral esquerdo.

4. Clique no botão “Personalizar”, abaixo da visualização do seu blog.

5. No menu lateral esquerdo, clique em “Avançado”.

6. Adicione o código CSS desejado na área “Adicionar CSS”.

Note que, assim que você alterar o código, seu blog já será visualizado na área inferior com as alterações que você realizar.

7. Ao terminar, clique no botão “Aplicar ao blog”, que fica no canto superior direito da tela.

Vantagens:

• A aplicação de alterações é simples e rápida.
• Não é necessário modificar o template para fazer as alterações no CSS.

Desvantagens:

• As alterações feitas desta forma não ficam associadas ao seu HTML. Assim, não é possível fazer o backup delas salvando apenas o template. É necessário salvar as configurações em um arquivo separado.
• Se você fizer qualquer alteração no HTML de seu template, as configurações em seu CSS feitas desta forma serão perdidas. Assim, se você fizer qualquer alteração, será necessário aplicar novamente as customizações de CSS.

3. Em um arquivo externo

Outra forma possível de aplicar alterações ao CSS de seu blog é através de um arquivo externo.

Inclusive, é possível que você já tenha esse recurso aplicado em seu blog, pois há diversas customizações que o utilizam.

Como exemplo, mostro abaixo uma linha no template atual do Gerenciando Blog, em que o Google utiliza um arquivo externo para aplicar um novo estilo:

link href=’http://fonts.googleapis.com/css?family=Droid+Serif:bold’
rel=’stylesheet’ type=’text/css’/

Neste caso, os comandos CSS ficam dentro do arquivo indicado, sendo carregado pelo Blogger no momento de exibir a página.

A diferença em relação ao item anterior é que, mesmo que você analise o código-fonte da página, não encontrará os estilos, pois só continuará havendo a referência ao arquivo onde eles estão.

Fazer a alteração utilizando este método também é um processo simples, mas que exige a alteração do código HTML do seu template.

1. Crie um arquivo em um editor de textos – como o Notepad++ – colocando nele as definições de CSS que você deseja aplicar ao seu blog.

2. Salve esse arquivo com a extensão .CSS (por exemplo, “estilos.css”) e faça o seu upload para um serviço na internet. Caso você não saiba como e onde fazer isso, os artigos Onde hospedar arquivos para seu blog e Webs, ótimo site para hospedar seus arquivos irão ajudá-lo.

3. Adicione ao HTML do seu template uma linha similar à abaixo, adaptando o trecho em negrito com a localização e nome do seu arquivo CSS.

Preferencialmente, esta linha deve ficar após a linha /b:skin de seu template. Caso contrário, ela poderá ser substituída por uma definição que esteja em seu template.

link href=’http://caminho/arquivo.css’ rel=’stylesheet’
type=’text/css’/

4. Publique o seu template com as alterações.

Vantagens:

• A alteração em seu template é necessárias, mas é pequena.
• Ao fazer alterações em seu template, suas customizações CSS não são perdidas (a menos, óbvio, que você remova a linha com seu carregamento).
• Como se trata de um arquivo separado, é simples realizar o seu backup.

Desvantagens:

• Exige a hospedagem de um arquivo em um serviço separado do seu blog.

Qual método escolher?

Os três métodos que citei acima lhe trarão o mesmo resultado final. Assim, pensando em resultados, tanto faz qual método você escolherá.

A escolha do método é pessoal: como não tenho dificuldades em trabalhar com HTML, eu optei pelo método 1, assim todas as alterações ficam unificadas em meu template. No entanto, o método 2 pode ser útil para ajustes rápidos e pequenos.

Com base nas vantagens e desvantagens, você pode analisar qual é o método que se adaptar melhor à sua necessidade.

O que eu posso alterar através do CSS?

Agora que você já sabe como realizar as alterações em seu CSS, é hora de saber o que você pode alterar através dele.

As possibilidades são imensas: segundo a definição do próprio Blogger, é possível alterar “quase todos os aspectos da aparência do seu blog” através do CSS.

Um exemplo bastante simples para você testar é a alteração das cores dos links em seu blog.

O código abaixo (apenas como exemplo) fará com que os links do blog apareçam na cor vermelho e em negrito, e os links já visitados apareçam em verde.

Os links visitados também aparecerão em negrito justamente pelo efeito “cascata” dado pelo CSS: os estilos podem ter ligação entre si e herdar as características de outros estilos.

a:link {
color:red;
font-weight:bold;
}

a:visited {
color:green;
}

Como as possibilidades de customização são grandes e o assunto é complexo, indicarei dois artigos para quem desejar se aprofundar no assunto e realizar customizações em seus blogs:

• O que posso fazer com a CSS? – Este é um artigo que faz parte da ajuda oficial do Blogger. Nele, há indicações sobre os pontos principais que você pode customizar em seu blog com o uso de CSS.
• Índice: 10 aulas de CSS para Blogger – Aprenda CSS – Nesta ótima série de artigos que o João Elias Godoi escreveu no Diretório Blogger, você encontrará 10 lições rápidas explicando como alterar algumas características de seu blog. É uma ótima leitura para quem está começando!

Conclusão

O CSS é um recurso poderoso no Blogger (e também em outras plataformas de blog ou sites).

Para quem deseja realizar ajustes em seu blog e diferenciá-lo de outros, é essencial conhecer o recurso e saber como utilizá-lo.

E para quem deseja levar a sério a customização e mesmo criação de templates, é essencial conhecer bem todas as possibilidade do CSS.

E você, já conhecia essas formas de aplicar as alterações no CSS do seu blog?

Qual método você prefere utilizar?

Compartilhe com os demais deixando um comentário!