Como adicionar um banner de consentimento de cookies no Blogger

Publicados: 2023-04-23

Ao navegar na Internet, você provavelmente se deparou com um banner de consentimento de cookies que solicita a aceitação ou rejeição de cookies. Esses banners se tornaram um recurso padrão em sites devido à crescente preocupação com a privacidade de dados e rastreamento online.

Se você é um blogueiro usando o Blogger, é essencial adicionar um banner de consentimento de cookies ao seu site para garantir a conformidade com regulamentos como o Regulamento Geral de Proteção de Dados (GDPR) e a Lei de Privacidade do Consumidor da Califórnia (CCPA).

O que é um banner de consentimento de cookies ?

Um banner de consentimento de cookie é uma janela pop-up ou banner que aparece em um site, informando os usuários sobre o uso de cookies e solicitando seu consentimento para armazenar ou acessar suas informações.

Cookies são pequenos arquivos de texto que são colocados no dispositivo do usuário quando ele visita um site. Eles são usados ​​para lembrar as preferências do usuário, rastrear a atividade do site e fornecer uma experiência mais personalizada. No entanto, os cookies também podem ser usados ​​para publicidade ou rastreamento direcionados, e é por isso que os usuários devem ser informados e ter a opção de aceitá-los ou rejeitá-los.

Adicionar um banner de consentimento de cookies ao seu site do Blogger é um processo relativamente simples que pode ser concluído em algumas etapas. Nas seções a seguir, descreveremos as etapas para adicionar um banner de consentimento de cookies no Blogger

Como adicionar um banner de consentimento de cookies no Blogger

Para adicionar um banner ou pop-up de consentimento de cookies no Blogger, siga as etapas abaixo.

  1. Abra o painel do Blogger e vá para a seção de temas.
  2. Agora clique na seção Editar HTML no menu suspenso do lado direito do botão Personalizar.
  3. Agora procure a tag Body de fechamento (</body) que geralmente é a 2ª última linha do código do seu tema.
  4. Agora cole o código fornecido logo acima dele e salve o código para adicionar o banner de consentimento de cookies ao seu site do Blogger.
 <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><path d='M25.9,40.32a2.47,2.47,0,0,0,0,4.93h0a2.47,2.47,0,1,0,0-4.93Z'></path><circle cx='32.08' cy='65.86' r='2.47'></circle><path d='M56.38,69.91a2.47,2.47,0,1,0,1.14,1.49A2.47,2.47,0,0,0,56.38,69.91Z'></path><path d='M72,52.68a2.47,2.47,0,0,0-2.38,1.83,2.44,2.44,0,0,0,.25,1.87,2.47,2.47,0,0,0,4.52-.59,2.44,2.44,0,0,0-.25-1.87A2.47,2.47,0,0,0,72,52.68Z'></path><path d='M89.51,52.86A14,14,0,0,1,81,47.2,14.09,14.09,0,0,1,61,35.68,14.09,14.09,0,0,1,49.49,15.73a14,14,0,0,1-5.66-8.55,44,44,0,0,0-21.09,6.15A44.26,44.26,0,0,0,71.46,87.08,44.24,44.24,0,0,0,89.51,52.86ZM28.28,43.42a2.47,2.47,0,0,1-2.38,1.83h0a2.47,2.47,0,1,1,2.38-1.83Zm3.8,24.9a2.47,2.47,0,1,1,2.47-2.47A2.47,2.47,0,0,1,32.08,68.32ZM44.92,27.13A2.47,2.47,0,1,1,44,23.76,2.47,2.47,0,0,1,44.92,27.13ZM57.28,73.27a2.47,2.47,0,1,1-.9-3.36,2.47,2.47,0,0,1,.9,3.36ZM74.42,55.79a2.47,2.47,0,1,1-.25-1.87A2.45,2.45,0,0,1,74.42,55.79Z' fill='#7577a9'></path><path d='M97.93,48.52v-.2A2.35,2.35,0,0,0,95.7,46a9.37,9.37,0,0,1-8-5.45,2.35,2.35,0,0,0-3.49-.93,9.51,9.51,0,0,1-5.44,1.72A9.4,9.4,0,0,1,69.39,31.1a2.35,2.35,0,0,0-2.55-2.55c-.28,0-.57,0-.85,0a9.39,9.39,0,0,1-7.68-14.81,2.35,2.35,0,0,0-.93-3.49,9.37,9.37,0,0,1-5.45-8A2.35,2.35,0,0,0,49.61,0H49a49,49,0,1,0,49,49C97.93,48.82,97.93,48.67,97.93,48.52ZM71.46,87.08A44.26,44.26,0,0,1,22.74,13.33,44,44,0,0,1,47.53,4.72a14,14,0,0,0,5.66,8.55A14.09,14.09,0,0,0,64.71,33.22,14.09,14.09,0,0,0,84.66,44.75a14,14,0,0,0,8.56,5.66A44.3,44.3,0,0,1,71.46,87.08Z'></path></svg></div> <div class='cookie-content'> <p>Our website uses cookies to improve your experience. <a href='https://policies.google.com/technologies/cookies' target='_blank' title='Learn more'>Learn more</a></p> <button class='cookie-buttons'>Accept!</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: #666666; margin-top: 0!important; } .cookie-content pa{text-decoration:underline;} .cookie-buttons { position: relative; width: 100%; margin-top: 10px; float: left; background-color: #7577a9; 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; } </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>

Este código removerá a notificação de cookie padrão do Blogger e adicionará um banner de consentimento de cookie personalizado ou você poderá dizer pop-up ao site do blogger.

Este código é totalmente otimizado e usa códigos SVG para que você não precise se preocupar com a velocidade do site no site do blogger.

Concluindo, adicionar um banner de consentimento de cookies ao seu site do Blogger é essencial para garantir a conformidade com os regulamentos de privacidade de dados e fornecer transparência aos seus usuários.

Espero que este artigo ajude você a adicionar um widget de consentimento de cookie personalizado ao seu site do blogger. Se você tiver algum problema com este código, informe-me na seção de comentários.

A propósito, você pode me contratar para otimizar a velocidade de carregamento do seu Blogger. Confira nossa página de serviços para saber mais.