Você sabe como colocar o aviso de cookies no seu site? Se não, não se preocupe! Eu vou te mostra a forma mais fácil de fazer isso nesse artigo.
Atualmente, todos os sites são obrigados a avisar os sues usuários sobre a coleta de dados dos mesmos, principalmente, se utiliza o google adsense ou outras plataformas de monetização.
A LGPD ( Lei Geral de Proteção de Dados do Brasil) define a necessidade de adicionar mensagens de cookies no blog/site com o objetivo de garantir a segurança e a privacidade durante a coleta de informações pessoais realizados por realizadas por empresas como o Google.
foto: Aviso de cookies
reprodução/Redes Sociais
Como colocar o aviso de cookies em 4 passos?
Passo 1: Para adicionar esse aviso de cookies, primeiro entre no seu BLOGGER (site) e clique em adiconar gadget html/javascript.
Passo 2: Dentro desse gadget, adicione o código a seguir
<style>
/* Estilos para a barra de cookies */
.cookie-notice {
display: none; /* Inicialmente, oculta a barra de cookies */
position: fixed;
bottom: 20px; /* Distância do fundo em telas maiores */
right: 20px; /* Distância do canto direito */
background-color: #fff; /* Cor de fundo do aviso */
color: #000; /* Cor do texto */
padding: 20px;
width: 300px; /* Largura do aviso */
text-align: center;
border-radius: 10px; /* Cantos arredondados */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Sombra para destacar o aviso */
z-index: 10; /*colocar div na frente de outras*/
}
/* Estilos para o link "Saiba mais" */
.cookie-notice a {
color: #0200a1;/* Cor do link */
text-decoration: underline;
}
/* Estilos para o botão "Aceitar" */
.cookie-notice button {
background-color: #0d0086; /* Cor de destaque do botão */
color: #fff; /* Cor do texto do botão */
border: 2px solid #007bff; /* Contorno do botão */
border-radius: 10px; /* Cantos arredondados */
padding: 10px 20px;
margin-top: 10px; /* Espaço entre o texto e o botão */
cursor: pointer;
}
/* Estilos específicos para dispositivos móveis */
@media (max-width: 767px) {
.cookie-notice {
width: 80%; /* Largura um pouco menor na visualização móvel */
left: 50%; /* Posicionamento no centro horizontal */
transform: translateX(-50%); /* Centraliza horizontalmente */
bottom: 20px;
}
}
</style>
<div class="cookie-notice" id="cookie-notice">Utilizamos cookies essenciais para melhora a sua experiência
<a href="Coloque aqui a url da sua política de privacidade" target="_blank"> Acordo de Privacidade </a>.
<button id="accept-cookies">Aceitar</button>
</div>
<script>
// Função para mostrar o aviso de cookies
function showCookieNotice() {
document.getElementById('cookie-notice').style.display = 'block';
}
// Função para ocultar a barra de cookies quando o botão "Aceitar" for clicado
document.getElementById('accept-cookies').addEventListener('click', function () {
document.getElementById('cookie-notice').style.display = 'none';
// Define um cookie para indicar que o aviso foi aceito
document.cookie = "cookie-accepted=true; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";
});
// Verifica se o cookie de aceitação já foi definido
if (document.cookie.indexOf("cookie-accepted=true") === -1) {
showCookieNotice(); // Mostra o aviso se o cookie de aceitação não existe
}
</script>
Passo 3: No código acima procure pela linha abaixo e coloque a url da sua política de privacidade.
Exemplo:
<a href="Coloque aqui a url da sua política de privacidade" target="_blank">
Passo 4: No código que aparece no passo 2, você pode mudar o texto (recomendado) e a cor e o tamanho das letras. Leia com atenção e faça você mesmo.