Pesquisa

Carregando...

21 de junho de 2008

Como colocar o CSS do Blogger em arquivo externo

Se você usa o Blogger/Blogspot para hospedar seu blog, tenho uma má notícia para você: há algo no seu template que aumenta o tempo de carregamento de suas páginas. É a folha de estilos (CSS), cujo grande código ocupa várias linhas, que são adicionadas em todas as páginas do seu blog. Não se preocupe, neste post explicarei como resolver a situação.

Mesa de computador na sala bagunçada
Arrume a bagunça e deixe seu blog mais rápido.
Autor da foto: PuyoDead. Foto com alguns direitos reservados.

Por padrão, os templates do Blogger adicionam o CSS, código responsável pela formatação e apresentação visual de seu blog, dentro dos posts. O correto seria guardar esse arquivo separadamente. Assim, em vez de carregar o mesmo código a cada página que visitar de seu site, os navegadores dos leitores carregarão seu estilo apenas uma vez e abrirão as páginas mais rápido.

Tentei descrever todos os passos necessários para realizar esta tarefa. Mesmo assim, usuários novatos podem encontrar dificuldades que os impeçam de fazer tudo. 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 ou simplesmente ignore este passo-a-passo se não souber nada sobre CSS.

  1. Você precisa de um servidor de hospedagem para seu arquivo CSS. Eu recomendo o FileDen.com, que disponibiliza 1GB de espaço e 5GB de transferência mensal. Crie uma conta lá gratuitamente.
  2. Após resolvida a questão da hospedagem, é hora de tirar o código de seu template. Entre em qualquer página de seu blog e use a opção "Visualizar - código-fonte" de seu navegador (Ctrl+F3 no Opera e Ctrl+U no Firefox).
  3. Copie tudo que estiver entre: <style id='page-skin-1' type='text/css'> e </style>
  4. Entre em Online CSS Optimiser / Optimizer e cole seu código. Clique em "Optimize!". Copie o resultado no Bloco de Notas e escolha a opção "Arquivo - Salvar como". Indique o "salvar como tipo 'todos os arquivos'". No campo "nome do arquivo", digite css.css.
  5. Envie o arquivo para o FileDen pelo formulário de upload. Depois de enviado, em sua lista de arquivos clique com o botão direito sobre css.css e copie o link.
  6. Abra a página inicial do Blogger e clique no link em administrar "Layout" abaixo do nome de seu blog.
  7. Abra a página Editar HTML e use o link Baixar modelo completo para ter um backup (cópia de segurança) se algo der errado.
  8. Procure em 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" /> Onde LINK é o link do seu css.css no FileDen.
  9. Salve seu template. Finalmente, terminou! Agora a folha de estilos em cascata está num arquivo CSS externo.
Publicado por André Felipe

28 comentários:

  1. Nice CSS tutorials.
    I myself use this way to reduce the load time for my blogspot blog.

    And I also use this methode to store any javascript. I don't embeded them in the page element...

    Anyway...
    Keep up the good work...
    ResponderExcluir
  2. It's always nice to meet someone who cares about stuff. ;)
    ResponderExcluir
  3. Cara. consegui diminuir o carregamento do meu blog em 2s depois de fazer isso! valeu pela dica
    ResponderExcluir
  4. verdade da pra diminuir um bom tanto no load da pagina, só demorei um pouco pra achar o codigo mas agora ja consegui, facim, também com as dicas na não!
    ResponderExcluir
  5. Obrigado pelos comentários. :)

    Voltem sempre, porque voltarei a publicar dicas como essa.
    ResponderExcluir
  6. Amigo está dando erro na pagina que vc indicou
    Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 35 bytes) in /var/www/cssoptimiser/optimize.php on line 231
    ResponderExcluir
  7. Anônimo: o erro que você viu foi um erro do servidor. O site já está funcionando.
    ResponderExcluir
  8. Ocorreu o mesmo erro comigo.
    não sei o que ta acontecendo =/
    ResponderExcluir
  10. O blogger fica me dando essa mensagem: "A skin não pode conter o elemento: link. Somente seções de texto e CDATA são válidas."

    Alguma dica?
    ResponderExcluir
  11. David, coloque o código acima, e não dentro, de <b:skin>.
    ResponderExcluir
  12. Desisti velhinho, hehehehe, o blog tava precisando mesmo de uma repaginada, mudei o layout para outro com menos imagens e ainda por cima com duas colunas para posts, esses templates magazines vão ser a nova sensação do Blogger.

    Ah, ia me esquecendo, estou pensando em personalizar o rodapé de postagens colocando matérias relacionadas, busca e mail feed form, fiz isso em um dos meus blogs usando o tuto do Compulsivo, mas ficou muito deselegante.

    Diante disso resolvi sugerir uma pauta aqui pro seu blog (que conveniente! \o/), fazer um post ensinando a customizar o rodapé de postagens para ficar semelhante ao seu.

    Saudações aqui do Ceará!
    ResponderExcluir
  13. Outro otimizador é o http://www.styleneat.com
    ResponderExcluir
  14. E pra hospedar o css tem o pages.google.com, porém a pessoa tem que ter gmail
    ResponderExcluir
  15. Amigo velho, obrigado pelas dicas que são muito úteis.
    Bom, tenho um pequeno problema no meu blog pois ele demora muito para abrir. Tentei essa dica e funcionou em partes, pois com o problema que ele apresenta no css ele demora muito, quando fiz o passo-a-passo (que deu tudo certinho) ele zona todo o template. Me ajude por favor. Abraço e obrigado.
    ResponderExcluir
  16. Big JAPPA: entre na página de edição de perfil do Blogger e clique em Compartilhar meu perfil, para eu possa vê-lo e acessar seu blog.
    ResponderExcluir
  17. Olá andré, infelizmente não está dando... copiei todo o CSS que estava dentro das tags <b:skin>... e tals... otimizei, criei o arquivo em sites.goole, visto que não existe mais o google pages e terminei o processo como vc mencionou mas a página carrega como se não tivesse CSS algum.

    Não tenho meu CSS dentro de tags <style>... como informa o tuto e sim estava todo dentro de tags <b:skin entre subtags XML <![CDATA[...> no otimizador colei só o css e não as tags xml e no html do blog deleteio as tags <![cdata[...> deixando entre as tags <b:skin ...> vazio. Porém o CSS não é carregado e quando vou editar o html novamente, lá está entre as tags <:skin...> as <![CDATA...> incluídas automaticamente denovo.

    Se eu deixar assim <b:skin...> apenas com as tags <![DATA[...> e nada entre essas, o CSS tbm não é carregado.

    Será que mudou algo nesse sentido no blogger desde o tuto até hoje.

    Abraço
    ResponderExcluir
  18. Especialista, só tenho condições de oferecer ajuda para quem segue os passos que descrevo. Falei para copiar o CSS do código-fonte de uma página e salvar no FileDen; você copiou o código diretamente do template e salvou em outro site.
    ResponderExcluir
  19. Essa foi boa.. Ja vi essa dica antes mas eles pediram para colocar dentro de . Dava só errado e agora um post decente! (:
    ResponderExcluir
  20. Deu tudo certo, só tive um probleminha, em que todo o template ficou no canto, e não centralizado como antes. O unico jeito que encontrei de consertar isso foi deixando dentro de <![CDATA[ a propriedade body { }.
    Caso alguém tenha o mesmo problema é só fazer isso que funciona.
    ResponderExcluir
  21. me diga uma coisa que não percebi

    eu estava rocurando como fazer uma lighbox para bloger e reparei que precisava de um arquivo .css e ums .js hospedados e procurei no google onde poderia hospedar um arquico .css de maneira a depois o poder chamar o arquivo .css em minha template encontrei seu site falando sobre isso mas não percebi uma coisa

    ese site que referiu ai em sima voce dis que ele disponibliza 1 giga de espaço e 5 de transferencia mensal

    como assim??
    o arquivo só poderá ser requerido ao servidor até aos 5 gigas??

    ou quando os utilizadores caregam a pagina ese trafego não é contado nos 5 gigas??? por favor tenho urgencia em ter uma resposta

    casso o arquivo só possa ser caregado pela pagina até aos 5 gigas me avise e se poseivel me indique um servidor que eu posa por arquivos .css e .js e que possam ser lidos por um site muitas vezes ao mês...

    é que tenhu muias visitas não sria lindo só as primeiras do mês poderem ver uma lightbox
    ResponderExcluir
  22. Excelente dica, usei e aprovei, minhas páginas estavam muito pesadas depois que exportei o CSS não só ficaram mais rápidas como ganhei espaço no meu template hehe.

    Realmente é uma dica inteligente, parabéns pelo blog.
    ResponderExcluir
  23. D'J DIDIÇ, 5GB de tráfico por mês são o suficiente para transferir folhas de estilo e javascripts para mais visitantes do que a esmagadora maioria dos blogs .blogspot.com têm.
    ResponderExcluir
  24. CARAAA VALEEEU MESMO!!!! AJUDOU BASTANTE VEY ABRAÇOS AE
    ResponderExcluir
  26. Oie André, você pode me ajudar com alguma sugestão. Deu tudo certo, mas a barra lateral fica centralizada. Você tem alguma dica? Obrigada.
    ResponderExcluir
  27. Muito obrigado MESMO! Não estava conseguindo fazer css externo da maneira geralmente comum (com o style type, rel, enfim..), usei o 'link' recomendado no post e funcionou.
    Só tenho que agradescer, valeu mesmo amigo!
    ResponderExcluir
  28. Cara, fiz tudo o que pede, mas só aparece "Deve haver uma, e somente uma skin no modelo. No entanto, o número de skins encontrado foi: 0"
    O que há de errado?
    ResponderExcluir

Aviso

Estou reorganizando o blog e algumas coisas podem estar fora de lugar. Os comentários antigos já foram transferidos para o sistema do Disqus.