 |
| 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.
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 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:
