preloder

Cookie Zustimmung einholen geht auch in schön

intro_image_cookie_new

Cookie Zustimmung einholen geht auch in schön

Cookie Choices Plicht !? Im Vorfeld gleich mal klar gestellt, ob in Deutschland das Einholen der Zustimmung über die Nutzung der Cookies Pflicht ist oder nicht, ist absolut unklar. Die EU sagt ja, die Bundesregierung sagt, wie so oft nicht! Sie es drum, auf längere Sicht wird es mit Sicherheit zur Pflicht. Das Problem liegt ja auch nicht darin ob es Pflicht ist oder nicht, es liegt darin das diese Bekloppte Infobar aussieht wie gewollt und nicht hinbekommen.

Aber man kann auch die Cookie Zustimmung schön machen. Hier mal ein paar bespiele wie es aussehen könnte.

Cookie Zustimmung Demo

Der Vorteil der Cookie bar (Benachrichtigungsleiste) zum Cookie Splach Screen (Seiten Overlay) ist das die Cookie Bar die Seitenfunktion nicht beeinflusst, im Gegensatz zum Cookie Splach Screen, der die komplette Seiten Funktion bis zur Zustimmung lahmlegt, da es über die gesamte Seite gelegt wird (Overlay).

cookie

Wir haben uns mal die Cookie Bar vorgenommen und diese etwas schön gemacht. Vom Prinzip her ganz einfach da man nur ein Paar CSS Styles einfügen muss. Dies kann man direkt in die von Google bereitgestellte cookiechoices.js oder in die CSS eure Seite.

Wir haben zweites bevorzugt weil es so einfacher zu ändern ist.

Als erstes haben wir in der cookiechoices.js aufgeräumt, da wir die Style Angaben in dieser Datei nicht mehr brauchen.

Also Alles was Style Elemente sind kann aus der cookiechoices.js raus. Aus der „span“ Zeile haben wir ein p Tag gemacht.

Die steht in der Unkomprimierten Datei auf Zeile 94.

Um aus der Cookie Bar ein Coolen „Splacher“ zu machen der die Seite nicht beeinflusst, setzten wir die Box an die Gewünschte Position, Oben, Unten, Links, Rechts der genau in die Mitte da habt Ihr alle Freiheiten. Damit das Ihr die Animation reinbekommt, nutzt Ihr am besten des Animate CSS die Ihr Hier runterladen könnt.

Die Styles für die Cookie Bar/Splach sind nur wenige Zeilen groß. Hier der aus Demo 1

#cookieChoiceInfo {
background-color:#fff;
padding:10px;
z-index:1000;
text-align:center;
border:1px solid #111;
position:fixed;
width:300px;
height:240px;
left:50%;
bottom:10%;
margin-left:-150px;
overflow:auto;
-webkit-animation:fadeInUp ease-in 1;
-moz-animation:fadeInUp ease-in 1;
animation:fadeInUp ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:0.7s;
-moz-animation-duration:0.7s;
animation-duration:0.7s;
-webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,5);
box-shadow: 0 0 5px 0 rgba(0,0,0,5);

}

#cookieChoiceInfo a { /*Die Schaltfläsche*/
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 4px 13px;
color: #fff;
margin-bottom:5px;
display:block;
clear:both;
background: rgba(34,34,34,.9);
border: 2px solid transparent;
font-size: 11px;
font-weight: 400;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 2px;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-transition: all .2s cubic-bezier(0.000,0.000,0.580,1.000);
-moz-transition: all .2s cubic-bezier(0.000,0.000,0.580,1.000);
-o-transition: all .2s cubic-bezier(0.000,0.000,0.580,1.000);
-ms-transition: all .2s cubic-bezier(0.000,0.000,0.580,1.000);
transition: all .2s cubic-bezier(0.000,0.000,0.580,1.000);
}

#cookieChoiceInfo a:hover { /*Die Schaltfläsche beim Hover*/
font-weight:400;
color:rgba(255,255,255,.85);
background:rgba(0,0,0,.7);
text-decoration:none;outline:0;}

Mehr ist gar nicht nötig, Have Fun !

Kein Bock auf selber machen? Dann kannst du es hier Runterladen

KOMMENTARE (2) “Cookie Zustimmung einholen geht auch in schön”

  • 23. Dezember 2015 in 19:15 Antworten

    guten Abend,

    Habe gestern eure seite länger besucht. Sehr informative.
    würde zu gerne Demo 1 zw. cookie verwenden für meine kleine dating seite und leider bekomme ich dies nicht hin.
    habe cookiechoices.js und CookiechoicesCenterStyle.css auf meinem server geladen.
    versuche dieses zum laufen zu bringen, blieb ohne erfolg.
    möchte bitte anfragen ob sie mir hier weiter helfen können.
    Frohe weihnachten und einen guten rutsch ins neue jahr!

    Mit freundlichen grüßen
    william chatman

    • WAM sagt:
      28. Dezember 2015 in 9:32 Antworten

      Hallo

      Ist der Pfad angepasst worden? Die Animate CSS eingebunden? Sollte so aussehen:
      1. Script (Pfad zur cookiechoices.js) natürlich im Format (script)
      2. Die Anweisung mit Text Ausgabe auch im Format Script
      Am Einfachsten ist es wenn man es aus der DEMO kopiert.

Schreibe einen Kommentar

Über WAM

Die WAM - Webagentur-Meerbusch. Die Typo3 und Wordpress Agentur aus Meerbusch bei Düsseldorf in NRW. Ganz nach dem Motto: Wenn man es ins Netz stellen kann, können wir es bauen. Und das schon seit über 10 Jahren.

-
Das Archiv
Werbung
Haendlerbund_Leistungen_265x221_animiert