 |
| Aviso de cookies|Fonte:Freepik.com |
Após bastante pesquisa 🔍 trabalho e desenvolvimento conseguimos criar um aviso de consentimento de cookies nativo para o blogger.
O código foi concedido e usa trechos de outros desenvolvedores fornecidos gentilmente em repositores de código...
Nossa missão foi adaptar o código para a realidade do Blogger | Blogspot
Que dispensa o uso de hospedagem externa como uma vps ou compra de código já hospedado.
Se você ainda não sabe qual a importância sobre esse aviso sugiro que faça um pesquisa pois sem ele em seu site é possível levar até uma multa.
Mas se você já sabe e está em busca de um código nativo de aviso de cookies então vamos lá.
Primeiro de tudo vamos apresentar o código.
<script>
// Código JavaScript do aviso de cookies
function avisoCookiesDrcode(options) {
var message = options.message || 'Utilizamos cookies para que você tenha a melhor experiência em nosso site.';
var backgroundColor = options.backgroundColor || 'rgba(255,255,255,0.95)';
var textColor = options.textColor || '#666666';
var buttonBackgoundColor = options.buttonBackgoundColor || '#0e9a20';
var buttonHoverBackgoundColor = options.buttonHoverBackgoundColor || '#0a6b16';
var buttonTextColor = options.buttonTextColor || '#ffffff';
var cookieConsent = document.createElement('div');
cookieConsent.id = 'cookieConsent';
cookieConsent.style.backgroundColor = backgroundColor;
cookieConsent.style.color = textColor;
cookieConsent.style.position = 'fixed';
cookieConsent.style.bottom = '0';
cookieConsent.style.width = '100%';
cookieConsent.style.padding = '10px';
cookieConsent.style.textAlign = 'center';
cookieConsent.style.zIndex = '9999';
var messageSpan = document.createElement('span');
messageSpan.innerText = message;
cookieConsent.appendChild(messageSpan);
var button = document.createElement('button');
button.innerText = 'Entendi!';
button.style.backgroundColor = buttonBackgoundColor;
button.style.color = buttonTextColor;
button.style.marginLeft = '10px';
button.style.border = 'none';
button.style.padding = '5px 10px';
button.style.cursor = 'pointer';
button.onmouseover = function() {
button.style.backgroundColor = buttonHoverBackgoundColor;
};
button.onmouseout = function() {
button.style.backgroundColor = buttonBackgoundColor;
};
button.onclick = function() {
document.body.removeChild(cookieConsent);
localStorage.setItem('cookieConsent', 'true');
};
cookieConsent.appendChild(button);
document.body.appendChild(cookieConsent);
}
document.addEventListener('DOMContentLoaded', function() {
if (!localStorage.getItem('cookieConsent')) {
avisoCookiesDrcode({
message: 'Utilizamos cookies para que você tenha a melhor experiência em nosso site. Para saber mais acesse nossa página de Política de Privacidade',
backgroundColor: 'rgba(255,255,255,0.95)',
textColor: '#666666',
buttonBackgoundColor: '#0e9a20',
buttonHoverBackgoundColor: '#0a6b16',
buttonTextColor: '#ffffff'
});
}
});
</script>>
Para facilitar a cópia do código acesse o PDF online e copie a versão compacta ou faça download para usar mais tarde [link 👉( Script PDF Online "click aqui")
Explicação do Código de Aviso de Cookies
Este código JavaScript é ideal para ser usado em blogs do Blogger (Blogspot) porque é simples e utiliza pouco CSS, o que minimiza a interferência no layout existente do blog.
Aqui está uma explicação detalhada:
1. Função Principal: A função avisoCookiesDrcode é responsável por criar e exibir o aviso de cookies.
Ela aceita um objeto options que permite personalizar a mensagem e as cores do aviso.
2. Elementos do Aviso:
- Div Principal: Um elemento div é criado para conter o aviso de cookies.
Ele é estilizado para ficar fixo na parte inferior da página, com um fundo semitransparente e texto centralizado.
- Mensagem: Um span é adicionado dentro da div para exibir a mensagem de aviso.
- Botão: Um botão é adicionado para permitir que o usuário feche o aviso.
O botão muda de cor ao passar o mouse e remove o aviso quando clicado, armazenando a preferência do usuário no localStorage.
Oque é isso localStorange?
O localStorage é uma tecnologia de armazenamento web que permite que os navegadores armazenem dados de forma persistente no dispositivo do usuário.
Ele faz parte da API Web Storage, que também inclui o sessionStorage.
### Como Funciona o localStorage
- Armazenamento de Dados: O localStorage armazena dados em pares de chave-valor. Esses dados são mantidos mesmo após o navegador ser fechado e reaberto, ao contrário do sessionStorage, que limpa os dados quando a sessão do navegador é encerrada.
- Acesso aos Dados: Você pode acessar e manipular os dados armazenados no localStorage usando métodos JavaScript como
setItem
,
getItem
,
removeItem
e
clear
¹.
Exemplo de Uso
Aqui está um exemplo básico de como usar o localStorage em JavaScript:
// Armazenar um item
localStorage.setItem('nome', 'João');
// Recuperar um item
let nome = localStorage.getItem('nome');
console.log(nome); // Saída: João
// Remover um item
localStorage.removeItem('nome');
// Limpar todos os itens
localStorage.clear();
Vantagens do localStorage
- Persistência: Os dados permanecem armazenados até que sejam explicitamente removidos.
- Capacidade: Permite armazenar mais dados comparado aos cookies.
- Simplicidade: Fácil de usar com métodos simples para armazenar, recuperar e remover dados.
Aplicação no Código de Aviso de Cookies
No código de aviso de cookies fornecido, o localStorage é usado para armazenar a preferência do usuário sobre aceitar cookies. Quando o usuário clica no botão "Entendi!", a informação é salva no localStorage,
Que nada mais é que o próprio armazenamento do aparelho, tablet,Pc , celular, esses dados são apagados quando o usuário faz limpeza de cache e cookies, quando ele retorna ao seu blog o aviso será exibido novamente.
(AAAaaaah Agora entendi)
3. Estilos CSS: O código usa estilos CSS embutidos diretamente nos elementos HTML, o que evita a necessidade de adicionar regras CSS externas que poderiam interferir no layout do blog.
Porém lembrando o css do blogger é extremamente sensível tome cuidado com isso.
4. Execução Automática: O aviso de cookies é exibido automaticamente quando a página é carregada, se o usuário ainda não tiver aceitado os cookies. Isso é feito através do evento DOMContentLoaded.
Vantagens
- Simplicidade: O código é fácil de entender e implementar.
- Personalização: As cores e a mensagem podem ser facilmente ajustadas através do objeto options.
- Compatibilidade: Funciona bem em qualquer tema do Blogger sem causar conflitos de estilo.
Exemplo de Uso
Para usar este código no seu blog do Blogger, basta copiá-lo e colá-lo na seção de HTML/JavaScript do seu blog.
Isso garantirá que o aviso de cookies seja exibido corretamente para os visitantes.
Ok caso não saiba a forma como instalar o script no seu blogger Blogspot e evitar uma multa ou até desativação do seu blog por algo tão simples siga o tutorial em imagens.
Primeiro Passo:
Segundo Passo:
Escolha a opção HTML/Javascript
Terceiro Passo:
