Para quem tem dificuldades de localizar um site para hospedagem gratuita de arquivos JS e CSS, existe um jeito bem simples e que pode resolver essa questão usando o mesmo login para acessar o seu blogger. Pois o Google é uma empresa mundialmente reconhecida e confiável, e que oferece inúmeras ferramentas importantes.
Primeiramente acesse: https://www.google.com/intl/pt-BR/drive/
Faça login com a mesma senha que você usa no blogger, caso não consiga, cadastre com as mesmas informações que você usou ao criar a conta do próprio blogger.
2- Procure em seu computador o arquivo JS ou CSS.
3- Depois de encontrado, clique no arquivo e depois clique em abrir.
4- Espere carregar, depois de enviado, compartilhe.(Obs. O compartilhamento significa que você publicou, é como uma postagem do blogger, só assim é possível o arquivo funcionar)
5- Logo em seguida, escolha em visualizar.
6- Está em particular, altere para público.
7- Depois de selecionar em público... Salve o arquivo.
8- Copie o link indicado para as devidas alterações.
Veja um exemplo abaixo!
Bom, agora as alterações devem ser feitas para que você use o link dos arquivos.
O link que você copiou, estará semelhante ao abaixo.
https://drive.google.com/file/d/0B1tpOE0JPK2oNFpCSlVoVGJWLWM/view?usp=sharing
Perceba que a numeração em branco é o ID do arquivo, e que dever ser copiado para ser colado no link abaixo.
https://googledrive.com/host/0B1tpOE0JPK2oNFpCSlVoVGJWLWM
Entenda melhor:
ARQUIVO JAVASCRIPT
<script src='https://googledrive.com/host/0B1tpOE0JPK2oNFpCSlVoVGJWLWM' type='text/javascript'/>
ARQUIVO CSS
<link href='https://googledrive.com/host/0B1tpOE0JPK2oNFpCSlVoVGJWLWM' rel='stylesheet'/>
Os arquivos CSS e JS, servem para configurar o funcionamento e o estilo de banners, botões de redes sociais, estilos de Slides, animações em flash. Praticamente tudo que vemos na internet é configurado com os arquivos js e css, existem muitos outros tipos de linguagens também. Vou dar um exemplo bem simples de um efeito em CSS.
Passe o mouse na imagem abaixo:
O código que faz esse efeito juntamente com o código HTML se encontra logo abaixo.
Código CSS
<style>
.gray, a gray {
-webkit-filter:grayscale(90%)
}
.gray:hover, a:hover gray {
-webkit-transition-duration: 1.05s;
-webkit-filter:grayscale(0%)
}
</style>
Esse código acima entre <style> </style>, nada mais é, do que esse código encurtado abaixo, como explicado logo no início do post, sobre como hospedar o arquivo CSS do Google Drive.
<link href='https://googledrive.com/host/0B1tpOE0JPK2od0Q2elJXVVVuNm8'rel='stylesheet'/>
FINALIZANDO, O SEU CÓDIGO DEVERÁ FICAR ASSIM:
<!--Inicio efeito CSS-->
<link href='https://googledrive.com/host/0B1tpOE0JPK2od0Q2elJXVVVuNm8'rel='stylesheet'/></link>
<!--Final efeito CSS-->
<!--Inicio HTML-->
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2tBsoJY5Ed1ZDWYYnbKM5fx1f4OyGlvmM8qcCguS7z77wUDeZWjDl-1m8tsVagA4MkmORnGf4D8igARsSRWhpcJQJs9MvT71e8UWF7C58XfHJ1aCrfpSddq-VdWFOzaYEtjtJgibotw/s1600/flor.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2tBsoJY5Ed1ZDWYYnbKM5fx1f4OyGlvmM8qcCguS7z77wUDeZWjDl-1m8tsVagA4MkmORnGf4D8igARsSRWhpcJQJs9MvT71e8UWF7C58XfHJ1aCrfpSddq-VdWFOzaYEtjtJgibotw/s1600/flor.jpg" height="220" width="320" /></a></div>
<!-- Final HTML-->
OU ASSIM
<!-- Inicio efeito imagem-->
<style>
.gray, a gray {
-webkit-filter:grayscale(90%)
}
.gray:hover, a:hover gray {
-webkit-transition-duration: 2.05s;
-webkit-filter:grayscale(0%)
}
</style>
<div class="gray">
<!-- Final efeito imagem-->
<!--Inicio HTML-->
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2tBsoJY5Ed1ZDWYYnbKM5fx1f4OyGlvmM8qcCguS7z77wUDeZWjDl-1m8tsVagA4MkmORnGf4D8igARsSRWhpcJQJs9MvT71e8UWF7C58XfHJ1aCrfpSddq-VdWFOzaYEtjtJgibotw/s1600/flor.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2tBsoJY5Ed1ZDWYYnbKM5fx1f4OyGlvmM8qcCguS7z77wUDeZWjDl-1m8tsVagA4MkmORnGf4D8igARsSRWhpcJQJs9MvT71e8UWF7C58XfHJ1aCrfpSddq-VdWFOzaYEtjtJgibotw/s1600/flor.jpg" height="220" width="320" /></a></div>
<!-- Final HTML-->
Caso você não tenha o formato dos arquivos, clique a baixe para o seu computador.
<script type='text/javascript'>
//<![CDATA[
COLE AQUI O SCRIPT
//]]>
</script>
Primeiramente acesse: https://www.google.com/intl/pt-BR/drive/
Faça login com a mesma senha que você usa no blogger, caso não consiga, cadastre com as mesmas informações que você usou ao criar a conta do próprio blogger.
2- Procure em seu computador o arquivo JS ou CSS.
3- Depois de encontrado, clique no arquivo e depois clique em abrir.
4- Espere carregar, depois de enviado, compartilhe.(Obs. O compartilhamento significa que você publicou, é como uma postagem do blogger, só assim é possível o arquivo funcionar)
5- Logo em seguida, escolha em visualizar.
6- Está em particular, altere para público.
7- Depois de selecionar em público... Salve o arquivo.
8- Copie o link indicado para as devidas alterações.
Veja um exemplo abaixo!
Bom, agora as alterações devem ser feitas para que você use o link dos arquivos.
O link que você copiou, estará semelhante ao abaixo.
https://drive.google.com/file/d/0B1tpOE0JPK2oNFpCSlVoVGJWLWM/view?usp=sharing
Perceba que a numeração em branco é o ID do arquivo, e que dever ser copiado para ser colado no link abaixo.
https://googledrive.com/host/0B1tpOE0JPK2oNFpCSlVoVGJWLWM
Entenda melhor:
ARQUIVO JAVASCRIPT
<script src='https://googledrive.com/host/0B1tpOE0JPK2oNFpCSlVoVGJWLWM' type='text/javascript'/>
ARQUIVO CSS
<link href='https://googledrive.com/host/0B1tpOE0JPK2oNFpCSlVoVGJWLWM' rel='stylesheet'/>
Os arquivos CSS e JS, servem para configurar o funcionamento e o estilo de banners, botões de redes sociais, estilos de Slides, animações em flash. Praticamente tudo que vemos na internet é configurado com os arquivos js e css, existem muitos outros tipos de linguagens também. Vou dar um exemplo bem simples de um efeito em CSS.
Passe o mouse na imagem abaixo:
O código que faz esse efeito juntamente com o código HTML se encontra logo abaixo.
Código CSS
<style>
.gray, a gray {
-webkit-filter:grayscale(90%)
}
.gray:hover, a:hover gray {
-webkit-transition-duration: 1.05s;
-webkit-filter:grayscale(0%)
}
</style>
Esse código acima entre <style> </style>, nada mais é, do que esse código encurtado abaixo, como explicado logo no início do post, sobre como hospedar o arquivo CSS do Google Drive.
<link href='https://googledrive.com/host/0B1tpOE0JPK2od0Q2elJXVVVuNm8'rel='stylesheet'/>
Código HTML
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZK1w1XYpjvwNBYfsTvNbEFh5NJ7ItFHM_Mnj_nA0uJA8E-nGh_TlrMMLoUk4qloHnZkKnMgDGatPsVCnyYE4tnaouZfu64yMYNGvqnaNeE3UxKBkCE0xmzagpe2io4E6xve4aQLleR8Q/s1600/comentarioverde.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZK1w1XYpjvwNBYfsTvNbEFh5NJ7ItFHM_Mnj_nA0uJA8E-nGh_TlrMMLoUk4qloHnZkKnMgDGatPsVCnyYE4tnaouZfu64yMYNGvqnaNeE3UxKBkCE0xmzagpe2io4E6xve4aQLleR8Q/s1600/comentarioverde.png" /></a></div>
Esse link em branco, é o link da imagem da flor, e a união desses dois códigos CSS e HTML, fazem esse efeito na imagem.
FINALIZANDO, O SEU CÓDIGO DEVERÁ FICAR ASSIM:
<!--Inicio efeito CSS-->
<link href='https://googledrive.com/host/0B1tpOE0JPK2od0Q2elJXVVVuNm8'rel='stylesheet'/></link>
<!--Final efeito CSS-->
<!--Inicio HTML-->
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2tBsoJY5Ed1ZDWYYnbKM5fx1f4OyGlvmM8qcCguS7z77wUDeZWjDl-1m8tsVagA4MkmORnGf4D8igARsSRWhpcJQJs9MvT71e8UWF7C58XfHJ1aCrfpSddq-VdWFOzaYEtjtJgibotw/s1600/flor.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2tBsoJY5Ed1ZDWYYnbKM5fx1f4OyGlvmM8qcCguS7z77wUDeZWjDl-1m8tsVagA4MkmORnGf4D8igARsSRWhpcJQJs9MvT71e8UWF7C58XfHJ1aCrfpSddq-VdWFOzaYEtjtJgibotw/s1600/flor.jpg" height="220" width="320" /></a></div>
<!-- Final HTML-->
<!-- Inicio efeito imagem-->
<style>
.gray, a gray {
-webkit-filter:grayscale(90%)
}
.gray:hover, a:hover gray {
-webkit-transition-duration: 2.05s;
-webkit-filter:grayscale(0%)
}
</style>
<div class="gray">
<!-- Final efeito imagem-->
<!--Inicio HTML-->
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2tBsoJY5Ed1ZDWYYnbKM5fx1f4OyGlvmM8qcCguS7z77wUDeZWjDl-1m8tsVagA4MkmORnGf4D8igARsSRWhpcJQJs9MvT71e8UWF7C58XfHJ1aCrfpSddq-VdWFOzaYEtjtJgibotw/s1600/flor.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2tBsoJY5Ed1ZDWYYnbKM5fx1f4OyGlvmM8qcCguS7z77wUDeZWjDl-1m8tsVagA4MkmORnGf4D8igARsSRWhpcJQJs9MvT71e8UWF7C58XfHJ1aCrfpSddq-VdWFOzaYEtjtJgibotw/s1600/flor.jpg" height="220" width="320" /></a></div>
<!-- Final HTML-->
<script type='text/javascript'>
//<![CDATA[
COLE AQUI O SCRIPT
//]]>
</script>
Nenhum comentário:
Postar um comentário