Blogger에 쿠키 동의 배너를 추가하는 방법

게시 됨: 2023-04-23

인터넷을 검색할 때 쿠키를 허용하거나 거부하도록 요청하는 쿠키 동의 배너를 보았을 것입니다. 이러한 배너는 데이터 프라이버시 및 온라인 추적에 대한 우려가 높아지면서 웹사이트의 표준 기능이 되었습니다.

Blogger를 사용하는 블로거인 경우 GDPR(일반 데이터 보호 규정) 및 CCPA(캘리포니아 소비자 개인 정보 보호법)와 같은 규정을 준수하려면 사이트에 쿠키 동의 배너를 추가하는 것이 중요합니다.

쿠키 동의 배너 란 무엇입니까?

쿠키 동의 배너는 웹 사이트에 표시되는 팝업 창 또는 배너로, 사용자에게 쿠키 사용에 대해 알리고 정보 저장 또는 액세스에 대한 동의를 요청합니다.

쿠키는 사용자가 웹사이트를 방문할 때 사용자의 장치에 저장되는 작은 텍스트 파일입니다. 사용자 기본 설정을 기억하고 웹 사이트 활동을 추적하며 보다 개인화된 경험을 제공하는 데 사용됩니다. 그러나 쿠키는 대상 광고 또는 추적에도 사용될 수 있으므로 사용자에게 이를 알리고 이를 수락하거나 거부할 수 있는 선택권이 주어져야 합니다.

귀하의 Blogger 사이트에 쿠키 동의 배너를 추가하는 것은 몇 단계로 완료할 수 있는 비교적 간단한 프로세스입니다. 다음 섹션에서는 Blogger에 쿠키 동의 배너를 추가하는 단계에 대해 설명합니다.

Blogger에 쿠키 동의 배너를 추가하는 방법

Blogger에서 쿠키 동의 배너 또는 팝업을 추가하려면 아래 단계를 따르십시오.

  1. Blogger 대시보드를 열고 테마 섹션으로 이동합니다.
  2. 이제 사용자 지정 버튼 오른쪽에 있는 드롭다운 메뉴에서 HTML 편집 섹션을 클릭합니다.
  3. 이제 닫는 Body 태그(</body)를 검색합니다. 일반적으로 테마 코드의 마지막 두 번째 줄입니다.
  4. 이제 제공된 코드를 바로 위에 붙여넣고 코드를 저장하여 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 쿠키 알림을 제거하고 사용자 정의 쿠키 동의 배너를 추가하거나 Blogger 웹사이트에 팝업을 말할 수 있습니다.

이 코드는 완전히 최적화되어 있으며 SVG 코드를 사용하므로 블로거 웹 사이트에서 사이트 속도에 대해 걱정할 필요가 없습니다.

결론적으로 Blogger 사이트에 쿠키 동의 배너를 추가하는 것은 데이터 개인정보 보호 규정을 준수하고 사용자에게 투명성을 제공하는 데 필수적입니다.

이 기사가 귀하의 블로거 웹사이트에 맞춤 쿠키 동의 위젯을 추가하는 데 도움이 되기를 바랍니다. 이 코드에 문제가 있으면 댓글 섹션에 알려주세요.

그건 그렇고, Blogger 로딩 속도를 최적화하기 위해 나를 고용할 수 있습니다. 자세한 내용은 서비스 페이지를 확인하십시오.