Usando CSS externo no Blogger

| 3 Comentários

Blogger e CSS

Para reduzir o tamanho de carregamento do seu blog, um passo importante é usar o CSS em um arquivo separado do HTML total do blog.

Mas por quê?

Digamos que um visitante entra no seu blog pela primeira vez: seu blog demorará certo tempo para carregar. Se ele entra pela segunda vez, as imagens já estarão carregadas, mas o HTML é carregado novamente.
No Blogger, o CSS é integrado no HTML. Ou seja: toda vez que o visitante entra, tem que carregar o CSS. Mas, se for hospedado externamente, só será carregado uma vez, como as imagens.

Prós e contras

Se você não fica sempre mudando o seu template, é uma ótima escolha. Mas se você é daqueles que não conseguem deixar o esquema de cores do seu blog em paz, é melhor você nem seguir essas dicas.

Antes de começar, lembre-se: após fazer isso, não será possível mudar o esquema de cores pelo Painel do Blogger (Layout -> Fontes e cores).

Sem mais enrolação, vamos ao tutorial:

> Hospedando CSS e colocando no Blogger

1 - Faça todas as modificações de cores necessárias antes de começar. Também faça um backup do seu template.
2 - Entre em seu blog e vá em “Exibir -> Código Fonte” (ou aperte Ctrl+U, exceto no IE). Aparecerá algo assim (varia de acordo com o template):

3 - Copie o conteúdo depois de:

Copie o que estiver depois da seleçãoInício do CSS - Clique para ampliar

E antes de:

Copie até antes dissoFim do CSS - Clique para ampliar

4 - Abra o bloco de notas e cole o código copiado

5 - Em “Arquivo -> Salvar como”, selecione “Tipo” como “Todos os arquivos (*.*)” e nomeie o arquivo como style.css (ou qualquer outro nome, só não esqueça do ‘.css’ no fim do nome)

Salvando o ArquivoSalvando o CSS pelo Bloco de Notas - Clique para Ampliar

6 - Vá no FileDen e crie uma conta. Lembre-se de abrir sua caixa de e-mails e clicar no link de confirmação.

7 - Após ter sua conta confirmada, clique em “Upload” e envie o arquivo criado.

Fazendo o UploadFazendo o Upload

8 - Após concluir o envio, selecione a opção “Direct URLS” e copie a URL:

URL do CSSCopiando a URL direta do CSS

9 - Vá até a parte de edição de HTML do Blogger e exclua do <b:skin> ao </b:skin>

10 - Coloque isso no local do que você excluiu:

<link href='URLDOSEUARQUIVO' rel='stylesheet' type='text/css' />
<b:skin><![CDATA[ ]]></b:skin>

Lembre-se de trocar URLDOSEUARQUIVO pela URL que você copiou do FileDen

11 - Visualize para ver se está tudo certo e salve. Se deu errado, tente começar de novo, pois  você fez algo errado.


Observação:
O FileDen tem um limite de tráfego mensal de 5GB. Isso significa que, se você hospedar apenas um arquivo CSS de 10KB, você terá o suficiente para um blog de 15.000 visitas diárias.

3 comentários [Comente também!]:

Henrique disse:

Muito Bom ,mas só acho que você deveria especificar mais dizendo por exemplo que o --> nao faz parte do codigo..No mais parabens!

Sibcam disse:

Eu fiz igual está no seu texto, mas qdo coloquei o link e salvei apareceu esta mensagem "A skin não pode conter o elemento: link. Somente seções de texto e CDATA são válidas." gostaria de saber onde errei.
Obrigado !!
Uberto

SemNome disse:

@Sibcam, certamente o seu erro foi uma falta de interpretação da parte: "exclua do <b:skin> ao </b:skin>". Você provavelmente não excluiu essas partes, somente o que estava entre elas.
Você tem que pegar o texto:

<b:skin>
[Todo o código do CSS]
</b:skin>

E substituir pelo código descrito na postagem.

[]'s
SemNome

Postar um comentário

Antes de comentar, leia:

  • Não serão permitidos comentários com ofensas pessoais
  • Não serão permitidos comentários com conteúdo referente à pirataria
  • Os comentários devem ter ligação direta com o assunto
  • Não serão tolerados comentários com links para promover outros blogs.
  • Se quiser deixar um link, comente com a opção OpenID
  • O comentário será lido antes de ser publicado e só será publicado se estiver de acordo com as regras
  • Os comentários não refletem a opinião do autor do blog
  • O autor do blog não se responsabiliza pelo conteúdo dos comentários postados por outros visitantes