Nesta postagem, vamos aprender a aprimorar a experiência dos visitantes do seu blog, adicionando um aviso de cookies. Manter os usuários informados sobre o uso de cookies é crucial para garantir a conformidade com os regulamentos de privacidade. Siga o guia passo a passo abaixo para adicionar um aviso de cookies ao seu blog no Blogger.
Acesso ao Blogger
Faça login na sua conta do Blogger e acesse o painel de controle.
Criar um Novo Gadget
- No painel de controle, vá para "Layout".
- Escolha um local para adicionar o aviso de cookies, como a barra lateral.
- Clique em "Adicionar um gadget".
- Selecione "HTML/Javascript".
Copiar e Colar o Código
Cole o código a seguir no campo de conteúdo do gadget HTML/Javascript:
<div class='cookie-box'>
<div class='cookie-row'>
<div class='cookie-img'>
<svg viewBox='0 0 97.93 97.93' xmlns='http://www.w3.org/2000/svg'>
<path d='M44,23.76a2.47,2.47,0,1,0,.91,3.37A2.47,2.47,0,0,0,44,23.76Z'></path>
<!-- Mais conteúdo do SVG -->
</svg>
</div>
<div class='cookie-content'>
<p>Nosso site usa cookies para melhorar sua experiência. <a href='https://www.ultimorecursoh.com/p/politica-de-privacidade.html' target='_blank' title='Saiba mais'>Saiba Mais...</a></p>
<button class='cookie-buttons'>Aceitar!</button>
</div>
</div>
</div>
<style>
.cookie-box.hide {
display: none;
}
.cookie-box {
position: fixed;
width: 90%;
margin: 20px;
max-width: 400px;
min-height: 100px;
background-color: #ffffff;
box-shadow: 25px 12px 25px 12px rgb(30 30 30 / 4%);
z-index: 990;
border: 2px solid lightgrey;
border-radius: 6px;
bottom: 15px;
right: 0px;
padding: 15px;
}
.cookie-row {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
text-align: left;
align-content: center;
justify-content: center;
align-items: center;
}
.cookie-img {
padding-right: 20px;
}
.cookie-img svg {
fill: #333;
width: 60px;
height: 60px;
}
.cookie-content p {
position: relative;
width: 100%;
display: inline-block;
font-size: 15px;
color: #000;
margin-top: 0!important;
}
.cookie-content p a {
text-decoration: underline;
}
.cookie-buttons {
position: relative;
width: 100%;
margin-top: 10px;
float: left;
background-color: #482dff;
font-family: inherit;
font-size: 14px;
color: #ffffff;
text-decoration: none;
opacity: 1;
border: none;
cursor: pointer;
font-weight: 500;
padding: 5px;
border-bottom: 2px solid rgba(0, 0, 0, 0.1);
border-radius: 6px;
transition: all .3s ease;
}
.cookie-buttons:hover {
background-color: #08102b;
}
</style>
<script>
//<![CDATA[
cookieChoices = {};
const cookieBox = document.querySelector(".cookie-box"),
acceptBtn = cookieBox.querySelector("button");
acceptBtn.onclick = ()=>{
document.cookie = "CookieByKey2Blogging; max-age="+60*60*24*30;
if(document.cookie){
cookieBox.classList.add("hide");
}else{
alert("Cookie can't be set! Please unblock this site from the cookie setting of your browser.");
}
}
let checkCookie = document.cookie.indexOf("CookieByKey2Blogging");
checkCookie != -1 ? cookieBox.classList.add("hide") : cookieBox.classList.remove("hide");
//]]>
</script>
Personalização (Opcional)
Você pode personalizar as cores, o posicionamento e os textos conforme suas emoções.
Lembre-se de alterar o link em <a href='https://www.ultimorecursoh.com/p/politica-de-privacidade.html' para o link da sua página de política de privacidade.
Salvar o Gadget
Após colar o código, clique em "Salvar" para adicionar o gadget ao seu blog.
Agora, sempre que um visitante acessar seu blog, o aviso de cookies será exibido, dando a eles a opção de aceitar os cookies. Lembre-se de testar o aviso para garantir que tudo funcione conforme o esperado.
Adicionar um aviso de cookies é uma prática importante para manter a transparência e a privacidade dos usuários enquanto eles navegam pelo seu blog.
