{Tutorial} Cookie-Hinweis gestalten

Sicherlich habt ihr es schon mitbekommen: Seit 2 Wochen erscheint auf allen Blogspot-Blogs automatisch ein Hinweis*, dass Cookies verwendet werden und dass man sich bei Nutzung der Webseite damit einverstanden erklärt.
Warum dieser Hinweis erscheint? Weil eine EU-Richtlinie dies verlangt; also dass man alle EU-Besucher über die Verwendung von Cookies auf der Seite informiert. Und damit man sich als Blogspot-Nutzer nicht weiter damit auseinandersetzen oder sich mit irgendwelchen Codes herumärgern muss, hat Google das einfach schon mal selbst für alle Blogs eingefügt ;)
Weiter unten erfahrt ihr, wie ihr den Hinweis trotzdem individuell ändern könnt.

*(gemäß der Natur von Cookies wird der Hinweis bei erstmaligem Besuch einer Seite angezeigt, und dann so lange nicht mehr, bis man die gespeicherten Cookies wieder löscht. Wer also täglich Cookies löscht, bekommt auch täglich wieder den Hinweis.)

Infos zum Cookie-Hinweis

Es schadet aber nicht, sich dennoch ein bisschen mit diesem Thema auseinanderzusetzen.
Anne erklärt, was Cookies überhaupt sind und Diana hat auf ihrem Blog einen Artikel dazu geschrieben, was diese Richtlinie denn eigentlich bedeutet und welche Konsequenzen sie hat. Mit ihren Tipps zur richtigen Umsetzung spricht sie allerdings vor allem Wordpress-Nutzer an, für die es praktische Plugins gibt.
Es gibt auch von Google selbst eine Info-Seite, die nochmal das Wichtigste zusammenfasst.

Den Cookie-Hinweis ändern

Oliver hat auf 5202.de beschrieben, wie ihr den Hinweis anpassen (z.B. den Textinhalt ändern) und auch ganz ausschalten könnt. Falls ihr keine Dienste wie Analytics, AdSense o.ä. verwendet, könnt ihr den Hinweis eigentlich weglassen, da ihr eh keine Cookies speichert. Einige sind auch der Meinung, dass man den Hinweis in Deutschland gar nicht bräuchte, aber wenn ihr auf Nummer sicher gehen wollt, lasst ihn einfach drin.

Da dieser Hinweis leider nicht allzu schön aussieht und vor allem nervt, wenn er entweder oben das Menü überdeckt oder selbst überdeckt wird, zeige ich euch jetzt, wie ihr den Hinweis ein bisschen aufhübschen könnt :)

(Vielleicht gibt es ja irgendwann auch direkt die Möglichkeit bei Blogger, den Hinweis dem Blogdesign anzupassen. Bis es so weit ist, müsst ihr euch allerdings doch ein ganz bisschen mit Codes herumschlagen ;)

Tutorial: Cookie-Hinweis gestalten

Ich persönlich finde am schönsten, wenn der Hinweis am unteren Rand der Seite angezeigt wird. So verdeckt er nicht das Menü und den Header und man hat freie Sicht auf den Blog. Um den Hinweis bei euch nach unten zu setzen, müsst ihr nur einen kleinen Code-Schnipsel bei euch einfügen.

// Leider scheint der Code nicht bei allen zu funktionieren. Bei meinen Blogs hat alles geklappt so wie es unten steht, es ist allerdings auch kein offizieller Code. Probiert es einfach aus und hoffen wir, dass Google irgendwann selbst was dazu macht ;) //

1. Geht in eurem Blogger-Menü auf "Vorlage", und ladet euch zur Sicherheit erstmal ein Backup von eurem Design runter. Das geht oben rechts über "Backup/Wiederherstellung" > "Vollständige Vorlage herunterladen". Falls ihr dann später Probleme haben solltet und euer Design zerschießt, könnt ihr die Datei einfach wieder hochladen und ihr habt euer vorheriges Design wieder.

2. Dann geht ihr auf "HTML bearbeiten". Klickt erst in das Feld mit dem Code, und dann strg+f bzw. cmd+f um die Suche zu öffnen. Sucht nun folgenden Code: ]]></b:skin>

3. Wenn ihr an der Stelle seid, fügt direkt davor folgenden Code ein:
#cookieChoiceInfo {
position: fixed;
top: auto;
bottom: 0; }
Dann speichert ihr eure Vorlage.

4. Und schon sollte der Hinweis bei euch unten erscheinen, wenn ihr die Seite aufruft, tadaa!
(Tipp: Prüft das am besten in einem anonymen Fenster. Und solange ihr am Basteln seid, nicht auf OK klicken, sonst seht ihr den Hinweis ja nicht mehr ;).

5. Jetzt könnt ihr das Ganze noch etwas hübscher machen. Für alle, die sich nicht mit CSS auskennen, nachfolgend ein paar Übersichten und Ideen.

Je nachdem, WAS ihr ändern wollt, müsst ihr die Angaben in einen der folgenden Bereiche schreiben:

Hintergrund: #cookieChoiceInfo { ... }
Text: .cookie-choices-text { ... }
Buttons: .cookie-choices-button { ... }

Jeweils zwischen den {} Klammern könnt ihr dann angeben, WIE ihr es haben wollt.
(Die Werte nach dem : könnt ihr beliebig ändern.)

Hintergrund leicht transparent: opacity: 0.9;
Hintergrundfarbe anders: background: #eb7b7b;
Schrift verändern: font-family: Calibri; font-size: 13px; color: #555555;

Tipp: Falls sind mal etwas nicht verändert, versucht es bei den Angaben mit einem !important, also z.B. font-size: 14px !important;
Tipps 2: Achtet darauf, dass ihr im Code keine der Zeichen . ; : { vergesst, sonst funktioniert der Code nicht mehr!

6. Es funktioniert nicht?
Falls sich bei euch absolut nichts ändert oder ihr den Code bei Punkt 2 gar nicht erst findet, probiert mal folgendes aus:

Geht im Blogger-Menü links auf Layout und fügt an einer beliebigen Stelle ein HTML-Widget ohne Titel hinzu. Als Inhalt des Widgets dient dann dieser Code:  
<style type="text/css">
#cookieChoiceInfo { 
... 
}
</style> 

Dann speichern, und schon sollte es funktionieren :)
Zwischen dem <style> ... </style> könnt ihr den Code wie oben beschrieben beliebig ändern.

Beispiele

Hier noch ein paar Beispiele, wie das Ganze dann aussehen könnte. Ihr könnt die Codes gerne kopieren und bei euch einfügen (siehe Punkt 3 oben), ich übernehme aber keine Garantie, das alles klappt oder korrekt ist.

1.

#cookieChoiceInfo { position: fixed;top: auto;bottom: 0;font-size: 14px;font-weight: normal;font-family: Calibri, sans-serif;opacity: 0.9;} .cookie-choices-button { background: #444;padding: 10px !important;}

2.
#cookieChoiceInfo { position: fixed;top: auto;bottom: 0;font-size: 12px;font-weight: normal;font-family: Calibri, sans-serif;background: #000;} .cookie-choices-text { font-size: 12px !important;} .cookie-choices-button { background: #444;padding: 10px !important;}

3.

#cookieChoiceInfo { position: fixed;top: auto;bottom: 0;background: #fff;border-top: 2px dotted #aaa;} .cookie-choices-text { color: #555 !important;} .cookie-choices-button { border: 1px solid #aaa;padding: 10px !important;color: #555 !important;}

4.
#cookieChoiceInfo { position: fixed;top: auto;bottom: 0;background: #5a5a5a;font-size: 13px;} .cookie-choices-text { color: #fff !important;font-size: 13px !important;} .cookie-choices-button { color: #71d1f1 !important;}

---

Wie ihr seht, kann man aus der Hinweis-Box noch so einiges rausholen. Nutzt einfach die Beispiele oben als Vorlage und gestaltet sie passend zu eurem Blog. Falls ihr noch Fragen habt oder Probleme, schreibt mir gern einen Kommentar :)

Habt einen schönen Donnerstag,

tags: Blog | technisches | Tipps