如何在 Blogger 上添加 cookie 同意横幅

已发表: 2023-04-23

在浏览互联网时，您可能会看到一个 cookie 同意横幅，要求您接受或拒绝 cookie。 由于对数据隐私和在线跟踪的日益关注，这些横幅已成为网站上的标准功能。

如果您是使用 Blogger 的博主，则必须向您的网站添加 cookie 同意横幅，以确保遵守《通用数据保护条例》(GDPR) 和《加州消费者隐私法》(CCPA) 等法规。

什么是cookie 同意横幅？

cookie 同意横幅是出现在网站上的弹出窗口或横幅，通知用户使用 cookie 并征求他们同意存储或访问他们的信息。

Cookie 是在用户访问网站时放置在用户设备上的小文本文件。 它们用于记住用户偏好、跟踪网站活动并提供更加个性化的体验。 但是，cookie 也可用于定向广告或跟踪，这就是为什么必须通知用户并让用户选择接受或拒绝它们。

将 cookie 同意横幅添加到您的 Blogger 站点是一个相对简单的过程，只需几个步骤即可完成。 在以下部分中，我们将概述在 Blogger 上添加 cookie 同意横幅的步骤

如何在 Blogger 上添加 cookie 同意横幅

要在 Blogger 中添加 cookie 同意横幅或弹出窗口，请按照以下步骤操作。

  1. 打开您的 Blogger 仪表板并转到主题部分。
  2. 现在从自定义按钮右侧的下拉菜单中单击编辑 HTML 部分。
  3. 现在搜索结束 Body 标记 (</body)，这通常是主题代码的倒数第二行。
  4. 现在将给定的代码粘贴到它上面并保存代码以将 cookie 同意横幅添加到您的 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>

此代码将删除默认的 Blogger cookie 通知并添加自定义 cookie 同意横幅，或者您可以说弹出到您的 blogger 网站。

此代码经过全面优化并使用 SVG 代码，因此您不必担心博主网站上的站点速度。

总之，将 cookie 同意横幅添加到您的 Blogger 站点对于确保遵守数据隐私法规和为您的用户提供透明度至关重要。

我希望本文能帮助您将自定义 cookie 同意小部件添加到您的博客网站。 如果您对此代码有任何疑问，请在评论部分告诉我。

顺便说一下，您可以雇用我来优化您的 Blogger 加载速度。 查看我们的服务页面以了解更多信息。