So fügen Sie ein Cookie-Zustimmungsbanner auf Blogger hinzu

Veröffentlicht: 2023-04-23

Beim Surfen im Internet sind Sie wahrscheinlich auf ein Cookie-Zustimmungsbanner gestoßen, das Sie auffordert, Cookies zu akzeptieren oder abzulehnen. Diese Banner sind aufgrund der zunehmenden Sorge um Datenschutz und Online-Tracking zu einem Standardmerkmal auf Websites geworden.

Wenn Sie ein Blogger sind, der Blogger verwendet, ist es wichtig, Ihrer Website ein Cookie-Zustimmungsbanner hinzuzufügen, um die Einhaltung von Vorschriften wie der Datenschutz-Grundverordnung (DSGVO) und dem California Consumer Privacy Act (CCPA) sicherzustellen.

Was ist ein Cookie-Consent-Banner ?

Ein Cookie-Zustimmungsbanner ist ein Popup-Fenster oder Banner, das auf einer Website erscheint, das Benutzer über die Verwendung von Cookies informiert und um ihre Zustimmung zum Speichern oder Zugreifen auf ihre Informationen bittet.

Cookies sind kleine Textdateien, die auf dem Gerät eines Benutzers abgelegt werden, wenn dieser eine Website besucht. Sie werden verwendet, um Benutzereinstellungen zu speichern, Website-Aktivitäten zu verfolgen und ein personalisierteres Erlebnis zu bieten. Cookies können jedoch auch für gezielte Werbung oder Tracking verwendet werden, weshalb die Benutzer informiert werden müssen und die Möglichkeit haben, sie zu akzeptieren oder abzulehnen.

Das Hinzufügen eines Cookie-Zustimmungsbanners zu Ihrer Blogger-Website ist ein relativ einfacher Vorgang, der in wenigen Schritten abgeschlossen werden kann. In den folgenden Abschnitten beschreiben wir die Schritte zum Hinzufügen eines Cookie-Zustimmungsbanners auf Blogger

So fügen Sie ein Cookie-Zustimmungsbanner auf Blogger hinzu

Führen Sie die folgenden Schritte aus, um ein Banner oder Popup für die Zustimmung zu Cookies in Blogger hinzuzufügen.

  1. Öffnen Sie Ihr Blogger-Dashboard und gehen Sie zum Themenbereich.
  2. Klicken Sie nun im Dropdown-Menü rechts neben der Schaltfläche „Anpassen“ auf den Abschnitt „HTML bearbeiten“.
  3. Suchen Sie nun nach dem schließenden Body-Tag (</body). Dies ist normalerweise die vorletzte Zeile Ihres Designcodes.
  4. Fügen Sie nun den angegebenen Code direkt darüber ein und speichern Sie den Code, um das Cookie-Zustimmungsbanner zu Ihrer Blogger-Website hinzuzufügen.
 <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>

Dieser Code entfernt die standardmäßige Cookie-Benachrichtigung von Blogger und fügt ein benutzerdefiniertes Cookie-Zustimmungsbanner hinzu, oder Sie können Popup zu Ihrer Blogger-Website sagen.

Dieser Code ist vollständig optimiert und verwendet SVG-Codes, sodass Sie sich keine Gedanken über die Seitengeschwindigkeit auf der Blogger-Website machen müssen.

Zusammenfassend lässt sich sagen, dass das Hinzufügen eines Cookie-Zustimmungsbanners zu Ihrer Blogger-Website unerlässlich ist, um die Einhaltung der Datenschutzbestimmungen sicherzustellen und Ihren Benutzern Transparenz zu bieten.

Ich hoffe, dieser Artikel hilft Ihnen dabei, Ihrer Blogger-Website ein benutzerdefiniertes Cookie-Zustimmungs-Widget hinzuzufügen. Wenn Sie Probleme mit diesem Code haben, lassen Sie es mich im Kommentarbereich wissen.

Übrigens können Sie mich beauftragen, Ihre Blogger-Ladegeschwindigkeit zu optimieren. Besuchen Sie unsere Serviceseite, um mehr zu erfahren.