Como hospedar o CSS externamente no Blogger

Por | Atualizado em 2016-09-18

Neste tutorial iremos explicar como hospedar a linguagem de estilo CSS, num arquivo externo no Blogger. Dessa forma, você conseguirá reduzir o tamanho do seu template, fazendo com que o seu blog carregue mais rápido.

O Blogger não possui um sistema hospedagem de arquivos próprio, no entanto, você poderá usar o Google Drive para hospedar os seus arquivos de estilo facilmente. O Google Drive oferece 5 Gb de espaço de hospedagem, largura de banda ilimitado e servidores de qualidade.

Atenção: Antes de hospedar o CSS num arquivo externo é recomendável criar um backup do seu template Blogger actual, para que seja possível reverter as alterações caso o resultado final não lhe agrade, ou algo corra mal.

Como criar o seu arquivo CSS externo?

Para criar o arquivo CSS de upload será necessário utilizar o programa Notepad++. Comece por baixar e instalar o programa Notepad++ no seu computador. Agora, aceda ao menu “Modelo” do painel administrativo do Blogger e clique em “Editar HTML”. Copie o código CSS presente as tags “<b:skin> …. </b:skin>”.

Nota: Caso o seu template fique desformatado, opte por exportar apenas algumas porções do seu código CSS.

Cole o código CSS num novo arquivo do Notepad++ e clique no separador “Linguagem” – “C” – “CSS”.
Aceda ao menu “Arquivo” – “Salvar como” e guarde o seu arquivo de estilo.

Como hospedar o CSS externamente no Blogger

Como hospedar o arquivo CSS externo?

Após criar o seu arquivo externo já poderá hospeda-lo no Google Drive. Para isso, comece aceder ao Google Drive e crie uma pasta clicando no botão “Criar”. Faça o upload de arquivo CSS para dentro dessa mesma pasta.

Quando o upload terminar, o arquivo passa a ser exibido dentro da pasta que você criou. Clique com o botão direito do rato no arquivo CSS que hospedou e selecione a opção “Partilhar”. Torne a partilha do arquivo “Pública”.

Como hospedar o CSS externamente no Blogger

Copie o link do arquivo e cole no bloco de notas do Windows (vamos precisar dele). Agora, copie o seguinte link igualmente para o bloco de notas: https://googledrive.com/host/

Por fim, copie a última parte do link imediatamente após “file/d/” no link fornecido excluindo o trecho “/edit?usp=sharing”.

Portanto, o link será semelhante a este (este link é apenas um exemplo):

https://googledrive.com/host/0B4t_UOUSCNLKSkR1djF1Q1VOT3M (a parte a negrito foi a que extraímos do link de partilha do Google Drive).

Agora, basta adicionar o link e “chamar” o arquivo no seu template, para isso, você deverá utilizar o seguinte código (lembrando de substituir o link Google Drive pelo seu)

<link rel="stylesheet" type="text/css" href="link do Google Drive">

Volte a aceder ao menu Modelo do Blogger e clique em “editar HTML”, cole o código fornecido imediatamente a seguir a tag <head> e apague o código que você copiou para o arquivo CSS do seu template (o código CSS que copiou entre as tags “<b:skin> …. </b:skin>”). Clique no botão “pré-visualizar” e se o template carregar normalmente salve as alterações.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *