Hospedar arquivos CSS e JavaScript em seu blog do Blogger sempre foi uma preocupação para um webmaster. As pessoas preferem adicionar toda a codificação do StyleSheet em um arquivo, para que possam carregá-lo em sua hospedagem e aplicá-lo facilmente em seu site. Infelizmente, o blogger tem algumas limitações que o impedem de hospedar arquivos CSS e JavaScript. Recentemente nosso usuário nos enviou um e-mail perguntando: existe alguma forma de hospedar arquivos no blogger? Quais são as vantagens de hospedar arquivos CSS (StyleSheet)? Felizmente, o Google Drive oferece a oportunidade de hospedar arquivos CSS, JavaScript e HTML GRATUITAMENTE. Neste artigo, mostraremos como hospedar arquivos CSS com o Google Drive no Blogger?
Por que hospedar arquivos no Google Drive?
- Muito espaço: o Google Drive oferece 5 GB de armazenamento para contas regulares para que você possa fazer upload de muitos documentos com facilidade. No entanto, se o espaço em disco estiver cheio, você poderá atualizar sua conta do básico para o premium.
- Crie e colabore: o Google Drive oferece a flexibilidade de criar e hospedar diferentes tipos de planilhas e apresentações. Faça algumas edições nos documentos e veja as alterações em tempo real à medida que aparecem.
- Confiável e confiável: com 100% de tempo de atividade, oferece a liberdade de hospedar qualquer coisa que você goste. Tem largura de banda ilimitada, mas você tem que cuidar do seu espaço em disco, não deve exceder a marca de 5 GB ou você pode atualizar sua conta.
- Volte e revise: o Google Drive rastreia quase todas as alterações que você faz no seu documento - portanto, sempre que você salvar um documento, uma nova revisão também será salva. Você pode dar uma olhada para trás e fazer a revisão de acordo.
- Compartilhe ou torne os arquivos privados: você pode compartilhar seus arquivos e pastas com qualquer pessoa. Selecione se outras pessoas podem comentar, compartilhar, visualizar ou editar suas coisas. Você pode lidar com tudo instantaneamente a partir do seu painel.
- Segurança no seu melhor: o Google Drive sempre provou ser o serviço de hospedagem gratuita mais confiável com largura de banda ilimitada. Além disso, para fornecer segurança total, o Google Drive utilizou criptografia HTTPS para manter seus documentos seguros.
- Tudo isso de graça: todos esses recursos impressionantes de graça.
Quais são as vantagens de hospedar CSS/JavaScript em um arquivo?
O Blogger não oferece a seus usuários a flexibilidade de hospedar arquivos CSS ou JavaScript em um link separado. Eles são hospedados na codificação do site por meio de tags HTML.
Para StyleSheet, a tag <style> é usada para definir as informações de estilo para um documento HTML. Entre duas tags <style></style>, a codificação CSS é colocada, especificando como os elementos HTML devem ser renderizados no navegador da web. Cada documento HTML pode conter várias tags <style>.
Para JavaScript, a tag <script> é usada para definir o script, como JavaScript. A tag <script> contém as instruções de script ou aponta para um arquivo externo por meio do atributo src. Cada documento HTML pode conter várias tags <script>.
Combinar toda a codificação StyleSheet/JavaScript em 1 arquivo ajuda um site a carregar mais rápido. Além disso, ajuda o mecanismo de pesquisa a rastrear seu site sem problemas.
Como hospedar arquivos CSS com o Google Drive no Blogger:
Existem vários aplicativos de terceiros que podem ajudá-lo a hospedar arquivos no blogger, incluindo Google Apps, Google Code e Google App bot. No MyBloggerLab, usamos o App bot, mas o processo de hospedagem de arquivos no Appbot é muito complexo. O Google Drive é perfeito e funciona melhor que o Appbot porque não há necessidade de se preocupar com a largura de banda.
Passo #1: Copiando a codificação CSS do seu modelo:
Para hospedar seu arquivo CSS com o Google Drive no Blogger, a primeira coisa que você precisa fazer é copiar toda a codificação do StyleSheet do seu modelo para um bloco de notas vazio. Vá para Blogger » Seu site » Modelo » Editar HTML » Prossiga e procure a tag <b:skin><![CDATA[. Ao encontrar esta tag, você verá um grande pedaço de codificação CSS, então copie toda a codificação CSS até a tag ]]></b:skin>. Para obter mais detalhes, consulte a captura de tela a seguir.
Etapa 2: Preparando um arquivo style.css
Depois de copiar a codificação CSS, remova-a do seu modelo e cole a codificação em um novo bloco de notas vazio. Agora salve o documento e nomeie o arquivo como style.css (a extensão do arquivo deve estar em .css para que o navegador possa renderizá-lo como StyleSheet). Para obter mais detalhes, consulte a captura de tela a seguir.
Etapa 3: Hospedando seu arquivo style.css no Google Drive:
A próxima coisa é fazer upload do arquivo style.css para sua conta do Google Drive. Primeiro, acesse o Google Drive e faça login na sua conta do Gmail. Agora você precisa criar uma nova pasta, para poder fazer upload de todos os arquivos de hospedagem na web em um só lugar. Pressione o botão “Criar” e na lista suspensa selecione “Pasta”. Agora nomeie a pasta para qualquer coisa que você goste, como webhost, arquivos da web e etc. No final, pressione "Criar" para concluir.
Agora abra as pastas que você criou há alguns momentos (clique com o botão direito do mouse no nome da pasta e selecione abrir). Ao selecionar o ícone de upload presente no lado esquerdo da tela, aparecerá uma lista suspensa que fornecerá duas opções, ou seja, Arquivo e Pasta. Basta selecionar “Arquivo” e passar para a próxima etapa.
Agora ele solicitará que você selecione os documentos style.css que você criou alguns momentos antes. Após selecionar o arquivo, pressione o botão abrir e vá para a próxima etapa.
Ao pressionar o botão abrir, um pequeno assistente de upload aparecerá no lado direito da tela. Geralmente, leva um ou dois minutos para fazer o upload, mas depende inteiramente do tamanho do seu arquivo e da velocidade da sua conexão com a Internet.
Quando o upload estiver concluído, pressione o botão "Compartilhar". Agora você tem que tornar este arquivo disponível para o público. Pressione alterar e selecione “público na web” para que qualquer pessoa na Internet possa encontrar e acessar. Por fim, pressione o botão Salvar para concluir o assistente. Para obter instruções detalhadas, confira a captura de tela a seguir.
Passo #4: Obtendo um link de hospedagem adequado
A segunda última etapa é preparar um link de hospedagem adequado para seu arquivo style.css. Clique com o botão direito do mouse no arquivo que você carregou alguns instantes e selecione "Compartilhar". Copie todo o URL presente na área de texto em “Link para compartilhar”. Para obter mais detalhes, consulte a captura de tela a seguir.
Depois de copiar o link de compartilhamento do google drive, ficaria assim https://docs.google.com/file/d/ your-file-code / . Você precisa alterar o link copiado para https://googledrive.com/host/ your-file-code . Lembre-se: Certifique-se de que “your-file-code” permaneça o mesmo antes e depois das alterações serem feitas.
deixe-nos fazer uma pequena demonstração que o ajudaria a explicar melhor. Por exemplo, se o link do meu arquivo for https://docs.google.com/file/d/ 0B0WJjcJEFNzibXRjhhjkjhWlwNktKcFk / então vou alterá-lo para https://googledrive.com/host/ 0B0WJjcJEFNzibXRyghjhgjlwNktKcFk . A única coisa que permanece a mesma é o código do arquivo.
Etapa 5: adicionar o arquivo CSS hospedado no Google Drive no Blogger
Depois de preparar um link de hospedagem adequado do seu arquivo, vá novamente para Blogger » Seu site » Modelo » Editar HTML » Prosseguir. Agora procure pela tag <head> inicial e logo acima cole o seguinte código. Lembre-se: não se esqueça de substituir https://googledrive.com/host/your-file-code pelo link de hospedagem do Google Drive e certifique-se de ter removido a codificação CSS do modelo, conforme mencionamos na etapa 1 . Quando tudo estiver pronto, pressione o botão “Salvar modelo”.
<link href=' https://googledrive.com/host/your-file-code ' rel='stylesheet'/>
Esperamos que tenha respondido a todas as perguntas relacionadas, como por que hospedar arquivos no blogger, quais são as vantagens de hospedar arquivos CSS (StyleSheet) e muito mais. Se deixamos algo descoberto ou notamos que perdemos algo, por favor, deixe um comentário abaixo.
Tags:
INTERNET