如何在 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 加載速度。 查看我們的服務頁面以了解更多信息。