CSS externo para Blogger – Seu blog carregando mais rápido

Uma coisa importante para qualquer site ou blog é que sua página carregue rapidamente e seja leve na navegação. Cada segundo que se ganha é fundamental para manter o visitante interessando em seu conteúdo e detalhes como esses, o tempo de carregamento de uma página, podem determinar o sucesso ou o fracasso de muito blog. Eu detesto sites lentos e demorados, quero sempre navegar rápido e acredito que todos querem. Aprendi como tornar seu blog mais leve e rápido criando um CSS externo da sua página no Blogger.

 

Esse é um recurso avançado, mas que se prestar bem atenção e fizer testes previamente, acredito que todos conseguem e é um grande benefício para seu blog. LEIA TUDO com muita atenção e cuidado.

 

ATENÇÃO: Recomendações iniciais.

Sempre que for mexer no código-fonte de seu blog, faça um backup completo para evitar dores de cabeça. Nem precisa lembrar isso, pois essa é uma prática que você precisa adquirir e repetir sempre.

 

Você vai precisar de um local para hospedar um arquivo e que posso gerar um link de acesso direto a esse arquivo. Eu recomendo o UOL Host, mas existem vários e até gratuitos. Mas vale lembrar que o recurso que vamos ensinar aqui precisará de uma hospedagem estável e que não tenha limites de transmissão de dados, nem corra riscos de ficar sobrecarregada. Também tem que ser um host que lhe dê um endereço, uma URL/link para cada arquivo que você tem lá, pois vamos precisar de um link direto para o arquivo que vamos criar.

 

Só faça a modificação indicada aqui nesse tutorial se você já tem um template bem definido e que não precisará fazer nem modificações de cores e fontes, dimensões ou qualquer coisa que vá precisar acessar o CSS, pois muitas modificações estruturais no Blogger passam por códigos CSS e não será mais possível fazê-las. Sempre que quiser mudar algo que dependa do CSS, você terá que reverter o processo indicado aqui manualmente e isso vai só te dar mais trabalho.

 

Como usar CSS externo no Blogger.

O que vamos fazer é retirar uma parte pesada do código de seu template, o CSS, que determina todos as características estruturais, e colocar em um arquivo externo. Isso vai diminuir drasticamente o tempo de carregamento de seu blog, pois o CSS está presente em todas as páginas do Blogger e é sempre recarregando quando as pessoas navegam por elas. Com o CSS externo essas características serão como que “acessadas apenas uma vez” por seção.

 

1. A primeira coisa a fazer é copiar todas as linhas do CSS do código-fonte de seu blog. Você pode fazer isso pelo painel do Blogger e copiar tudo o que estiver entre as linhas “<b:skin>” e “</b:skin>”. Mas há uma forma que garantirá que nada vai ser esquecido, pois alguns códigos CSS pode ficar “deslocados”.

Então abra o seu blog, sim, a página do seu blog e, clicando com o botão direito do mouse numa área vazia, escolha a opção “Exibir código fonte da página” se você estiver navegando pelo Chrome; ou “Exibir código-fonte” se for no Internet Explorer; ou “Código-fonte” para o FireFox.

 

2. Na janela que abrir com o código-fonte de seu blog visto pelo navegador, procure pela linhas indicadas abaixo copiando TUDO o que estiver entre elas:

 

<style id='page-skin-1' type='text/css'>

…………………………

</style>

 

3. Abra o Bloco de Notas do Windows (que seja um editor de textos bem simples e básico) e cole aí tudo o que você copio solicitado no item acima. Então salve esse arquivo com um nome do tipo “style.CSS”, onde a extensão tem que ser “.CSS”.

 

4. Envie esse arquivo para o seu Host, para a hospedagem que você escolheu usar. Então veja qual é a URL/Link desse arquivo e guarde essa informação.

 

5. Abra o painel do Blogger. Clique no menu “Layout” ~> “Editar HTML” e procure pelas linhas a seguir, copiando TUDO o que há entre elas:

 

<b:skin>

……………………………

</b:skin>

 

6. Mais uma vez, abra um novo arquivo no Bloco de Notas e salve essas linhas junto com o backup de seu template (pois você vai precisar disso para reverter o processo caso algo dê errado ou você precise modificar coisas no CSS).

Então, depois de fazer esse backup, volte ao painel do Blogger e apague TUDO o que há entre essas as linhas “<b:skin>” e “</b:skin>”.

 

7. Imediatamente ACIMA de “<b:skin>” cole o seguinte trecho:

 

<link href='URL_do_Aquivo_CSS' rel='stylesheet' type='text/css'/>

 

Onde está destacado de vermelho você deverá trocar pelo endereço, URL/link, do caminho onde foi hospedado o arquivo CSS que foi criado com seus códigos. Ficaria algo assim:

 

http://www.ENDEREÇO_QUALQUER.com/PASTA/style.CSS

 

8. Salve o modelo e veja se as páginas de seu blog vão carregar normalmente. Para saber se deu certo, seu blog tem que funcionar exatamente como antes, como se nada tivesse sido modificado.

 

Uma coisa importante de ressaltar é fazer testes. Depois que criar o CSS externo do seu blog, abra sua página em vários navegadores de internet para ter certeza de que tudo vai funcionar bem em todos e que seu blog manteve a aparência original. Nada deve se perder e todas as funções deve funcionar como antes. tenha em mãos os arquivos de backup para reverter a mudança e para que você possa acessar e modificar o CSS de seu blog sempre que for necessário.

 

Fontes:
How to include external CSS in new Blogger?
How to Move Blogger Blog CSS to an External File
External Style Sheet, Template, Confusion! (Fórum do Blogger em inglês)