![[ Ferramentas Blog ]](/wordpress/wp-content/themes/fb5/images/logo.png){kind=logo}
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)
Ótima dica,tava me perguntando sobre isso a algum tempo,pois meu blog anda meio pesadão,claro que em 4 meses lanço layoult novo,então tenho q analisar se vale a pena fazer tudo isso,pois sei que meu CSS está muito extenso e é isso que está pesando,entre as idéias para o novo template está a exclusão de várias linhas do CSS que foram simplesmente deixadas de lado durante as várias etapas de customização do blog.
Mesmo assim achei ótima a dica.
Boa dica Marcos, eu gostaria de perguntar: Pode fazer isso só com o plano de domínio? Eu não tenho o plano de hospedagem, só o domínio .com, tem como fazer?
@Victor,
Como está dito no texto, você precisa ao menos de um lugar para armazenar o arquivo com o código CSS. Vc não precisa de uma hospedagem completa pra seu blog, mas vai precisar de um host.
Cara, sou o diogo do topsdainternet que te indicou essa matéria. Mas tipo o meu problema continua. Quando sigo as suas dicas o meu template fica no canto esquerdo e não mais centralido. como eu resolvo isso???
@Diogo (Tops da Internet),
acho q você vai ter que procurar nas linhas de seu CSS onde está definida a posição de seu template e manter ao menos esse trecho no código-fonte do blog.
Pode ser que assim resolva.
É uma Ajuda à muitos Blogueiros.Especialmente pelo uso do Cache do Navegador.Mas o melhor mesmo é usar CSS em alternância às chatas tags "TABLE" para arrumar o Layout.#legal
Até
Consegui arrumar..
Foi como você disse Marcos Lemos.
Eu copiei o código "body{………..}" do css, e deixei ele dentro de e ai funcionou.
Pra quem não tem um serviço de host pode quardar o arquivo CSS no Google Sites. O problema é que às vezes o blog pode aparecer em HTML puro (a ideia não é essa).
É melhor contratar um serviço de hospedagem mesmo.
Marco Damaceno
eu uso esta tecnica faz um tempo eu dexo meu arquivo no webs.com
Usei esse dica e deu certinho, hospedei o código no Google Sites, e realmente o blog começou a abrir mais rápido. Recomendo!
Muito bom o tutorial, Gostei!!!
Mais quando eu fasso tooodo esse prcesso eu ele não pega o código responsavel pela navbar do blogger, ai fica com navbar, mais depoiis é so colocar o codigo responsavel por retirar a navbar e pronto!
acho que seria bom listar isso!
Valeuu o tutorial esta muito bom mesmo!
Parabéns pelo tutorial, o único problema é encontrar uma hospedagem que preste, o Google Sites vive dando problemas.
Perfeito e bem explicado, como sempre! Abraços.
Olá Marcos, fiz este processo Três vezes em Blogs de clientes e deu super certo, quando me pedem fico com um pouco de receio mais quando instalo e vejo que esta tudo bem e o Blog bem rápido fico feliz, obrigado por todos os seus posts que me ajudam e ajudam a outras pessoas. 😀
@oliveirakevin7
Amigo o meu Blog demora 37 segundos para carregar, adorei suas dicas mais tenho muito medo de fazer estas mudanças e depois não dar certo.
Oi Marcos, desculpa incomodar, mas tive um problema tentando fazer esse seu procedimento e não consegui descobri o pq do erro já que no meu blog de teste funcionou. Tentei reverter fazento o upload do Modelo completo mas só obtenho um erro muito estranho:
“Declaração de variável inválida na skin da página: A variável está sendo utilizada, mas não foi definida. Entrada: sidebartextcolor”
E não consigo salvar. Só que esta variável está definida no modelo. Não consigo entender. Será que vc poderia me indicar algum profissional para me ajudar com isso. Se for aqui de São Paulo melhor. Se puder me indicar alguém o quanto antes pq o SHD está com o template todo errado. Obrigado pela atenção. Atenciosamente,
Alberto Lozéa
Acho q vc acabou copiando algo errado ou apagando algo indevido.
Está acusando que falta uma informação declarada. Reveja os passos e tente repassar o procedimento.
Marcos,
segui a risca os procedimentos e tudo correu perfeitamente!
No olhometro, em cinco navegadores diferentes, melhorou muito o tempo de carregamento.
No artigo “Google Analytics: Verificar a velocidade de carregamento das páginas do seu Blog” estava marcando 19,90s para carregar. Agora é de apenas 3.90s!
Melhora considerável, não? Graças a você e o Ferramentas Blog! Parabéns!! Ainda estudo sua recomendação do Sérgio Estrella no Ice Breaker, desejando melhorar esta marca.
Arierom Salik.
Ótimo tutorial Marcos, achei até melhor com o CSS hospedado em um host, fica mais facil de editar, pois eu não preciso fazer login no painel do blog para fazer as alterações, tem como editar diretamente pelo host…. para quem não sabe um lugar aonde hospedar arquivos recomendo o Dropbox e o Webs.com 😉
Parabéns pelo tutorial!!!
Uso o Dropbox até para hospedar imagens que altero com frequência! Muito bom!
Wow! Carregou 100x mais rápido!!! Parabéns pelo tutorial!! Eu estou usando o FileDen.com para hospedar a folha de estilo… mas… sabe… não confio muito na “bandwidth” dele. Qual outro site poderia usar para hospedar esse tipo de arquivo?
Pingback: Como deixar blog no Blogger mais rápido. | Dicastutorial
Bloqueiros, usem e abusem desse recurso, é 10!
Olá Marcos e leitores,
estou tentando implementar essa novidade. Mas não estou conseguindo. Realizo todos os passos e já tentei hospedar no google site e no dropbox. Mas quando termino o fundo da página não aparece. O que eu posso estar fazendo de errado?
As fontes que eu uso não estão sendo aplicadas, o que faço para resolver?
Realmente é uma ótima dica, funciona perfeitamente!
Meu blog agora está muito mais rápido!
Parabéns!
Obrigado funcionou: não testei a velocidade, mas já sei que deve ajudar muito.
Uma dica: para tirarem aquela barra do navbar chat que aparece em cima, é só colar isso depois de [b:skin]
#navbar-iframe {display:none}
Obs: troque o por [] parapoder aparecer.
Acabei de aplicar no meu blog de testes e não tive problemas. Assim que terminar de editar todos os detalhes, aplico no blog oficial.
MASSS a barra lateral nas páginas internas ainda continua demorando para aparecer. Tem ideia do que possa ser? Ela só é exibida nas páginas internas mesmo, mas demora mais para carregar.
Valeu, Marcos. Ótima dica. Corre bem e sem problema. Muito obrigado a você!
oi , eu to tentando e ta dando uns erros..to usando o google sites, é pra copiar as tags juntas? ou só o que esta dentro? … e depois é pra colar o link dentro das tags b skin
ou antes? obrigado.
Otimo, apliquei no meu blog de tecnologia da informação, deu tudo certo, com um tutorial facil desde jeito é fácil, né!.Grato