Veja como hospedar e utilizar arquivos CSS e JavaScript no seu blog para economizar espaço e fazer com que as páginas carreguem mais rápido.
O Google Drive é um serviço de armazenamento e sincronização de arquivos, criado em 2012 que oferece gratuitamente ao usuário simples 15GB de espaço para armazenar o que desejar. A partir do momento em que você possui ou cria uma conta Google (Blogger, Gmail etc.) já estará habilitado a utilizar esse serviço de muita qualidade e necessidade nos dias atuais, por ser um espaço para guardar arquivos importantes com total segurança.
O que muitos ainda não sabem é a possibilidade de hospedar arquivos CSS (Cascading Style Sheets) e JavaScriptpara ser utilizado diretamente no HTML do template de um blog. Para que entenda melhor, esses códigos podem ser armazenados e citados em “links” dentro do template, economizando espaço de códigos, facilitando o entendimento, e para que algo seja encontrado mais facilmente para ser alterado. Além disso, com o código compactado, seu blog ficará muito mais leve e carregará as páginas mais rapidamente, pois, o navegador interpretará aquele link mais rápido do que ler o código completo.
O que muitos ainda não sabem é a possibilidade de hospedar arquivos CSS (Cascading Style Sheets) e JavaScriptpara ser utilizado diretamente no HTML do template de um blog. Para que entenda melhor, esses códigos podem ser armazenados e citados em “links” dentro do template, economizando espaço de códigos, facilitando o entendimento, e para que algo seja encontrado mais facilmente para ser alterado. Além disso, com o código compactado, seu blog ficará muito mais leve e carregará as páginas mais rapidamente, pois, o navegador interpretará aquele link mais rápido do que ler o código completo.
Para criar um arquivo CSS para ser hospedado, cole os códigos dentro do BLOCO DE NOTAS e salve-o com a extensão.css, ou seja, quando for salvar o arquivo dê um nome para ele por exemplo style e acrescente a extensão salvando assim style.css. No caso do JavaScript, funciona da mesma maneira, alterando somente a extensão para .js.
Como hospedar arquivos no Google Drive
>> Logado em sua conta, acesse o site do Google, e na parte superior direita clique no ícone "Aplicativos" e depois em "Google Drive".
>> Já dentro do Google Drive, clique no botão "Fazer Upload" e depois em "Arquivos".
>> Localize e selecione o aquivo desejado e clique em "Abrir".
>> No momento, aguarde enquanto o arquivo é enviado. O tempo desse processo varia de acordo com o tamanho do arquivo e a velocidade da internet.
>> Com o upload completo clique em "Compartilhar".
>> Na janela que se abriu, clique na opção "Alterar".
>> Na nova janela que se abriu, marque a opção "Público na web" e depois clique em "Salvar".
>> Agora, após ajustadas a opção de compartilhamento, copie o link gerado na caixa "Link para compartilhar" como mostrado na imagem a seguir:
>> Abra o bloco de notas e cole o link que você copiou para fazer algumas alterações.
Nesse momento, teremos que fazer algumas edições no link gerado. Primeiro, o link copiado por você deverá ser parecido com:
https://docs.google.com/file/d/OB2UgXjydh2mcRkNNVUdVd2ZpVWM/
* Como você pode perceber o restante a partir da barra deverá ser descartado.
Porém, você deverá alterá-lo para que fique dessa maneira:
https://googledrive.com/host/OB2UgXjydh2mcRkNNVUdVd2ZpVWM/
Atenção: O trecho destacado em AZUL que representa o ID do link deve-se manter intacto, como no exemplo você deverá alterar somente o trecho em VERMELHO.
Utilizando em seu blog o CSS e/ou JavaScript hospedado
Para se utilizar os arquivos hospedados no Google Drive dentro do código do template do Blogger, faça o seguinte:
>> Acesse seu Blogger, vá em "Modelo" e depois "Editar HTML".
>> Clique no código do template, pressione "CTRL+F" e pesquise por <head>
>> Logo ABAIXO da tag encontrada, cole o código correspondente. Utilizando a maneira correta para cada tipo de arquivo CSS ou Javascript.
JAVASCRIPT
<script src='https://googledrive.com/host/OB2UgXjydh2mcRkNNVUdVd2ZpVWM/' type='text/javascript'/>
CSS
<link href='https://googledrive.com/host/OB2UgXjydh2mcRkNNVUdVd2ZpVWM/' rel='stylesheet'/>
>> Clique em "Salvar Modelo".
O processo está concluído, e, apesar de ser simples requer muita atenção, principalmente na última questão que citamos onde JavaScript é colocado dentro de <script/> e CSS é colocado dentro de <link/>. Também alertamos sobre a necessidade de criar os arquivos a serem hospedados no Bloco de Notas ou em outro editor de texto puro, ou seja, aqueles que não carregam configurações de estilos.
Deixe seu comentário, pois ele é a motivação para nosso trabalho.
Comentários