CSS do Blogger em Link Externo

Para reduzir substancialmente o tempo de carregamento das paginas no Blogger/blogspot . Como por padrão o Blogger adiciona o CSS , código responsável pela formatação e apresentação do seu blog, dentro dos posts. A folha de estilos (CSS), cujo código ocupa várias linhas é adicionada em todas as páginas ao seu blogue.
Da informação por mim apreendida a melhor solução será guardar esse arquivo separadamente.

Assim, em vez de carregar o mesmo código de cada vez que carrega uma página, os web browser dos leitores carregarão seu estilo apenas uma vez e abrirão as páginas mais rápido.
Antes de fazer qualquer alteração é melhor fazer um backup do seu modelo actual. Baixe e salve seu tema, assim você pode voltar atrás se algo errado ocorrer. – Guarde o backup do seu template pois pode sempre em qualquer altura reverter para o seu anterior modelo.
Atenção: Depois de completados os passos, a página "Fontes e cores" do Blogger será desabilitada e você não poderá mais utilizá-la para editar seu template. Por isso, faça todas alterações necessárias antes de mexer no código.

1. Você precisa de um servidor de hospedagem para seu arquivo CSS. Eu recomendo o Google Pages.

2. Após concluída a questão da hospedagem, é hora de retirar o código do seu template. Entre em qualquer página de seu blog e use a opção "Visualizar - código-fonte" de seu navegador.
Copie tudo o que estiver entre:

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

Entre em CSS Optimizer e cole ai o seu código. – Clique em “Process CSS”.
Copie esse resultado para o seu Bloco de Notas e escolha a opção “ Arquivo – Salvar como”. Indique em “salvar como tipo, – todos os arquivos” e no campo “nome do arquivo”, digite nome_arquivo.css.

3. Envie o arquivo para o Goggle Pages.

4. Depois de enviado, na sua lista de arquivos clique com o botão direito sobre nome_arquivo.css, e em “copiar atalho” copie o link.

5. Agora abra a página inicial do Blogger e clique no link de administrar "Layout" abaixo do nome de seu blog.

6. Procure no seu código a tag <b:skin > e apague tudo que estiver entre ela e </b:skin > e, acima de <b:skin >, coloque o código:

<link rel="stylesheet" href="LINK" type="text/css" media="screen,projection" />

Não esqueça de substituir "LINK" pelo enderço link do seu CSS no Goggle Pages.

7. Salve seu template. Agora a sua folha de estilos em cascata está num arquivo CSS externo.

Via: Lundquist