Der Cookie Hinweis ohne Plugin, ohne externes Javascript zum Copy&Paste in zwei coolen Styles

Die Cookie-Richtlinie geht auch dezent und schick: zwei Beispiele im Vintage-Style und im Browser-Look

Die Google Richtlinie, die Google einfach mal so in die Bloggerwelt geworfen hat bereitet vielen Bloggern echte Kopfschmerzen. Was muss ich nun genau umsetzen? Kann ich abgemahnt werden? Was muss ich nun eigentlich in meine Webseite einbauen. Und die Frage aller Fragen: Wie schaffe ich es, dass der Hinweis nicht so platt aussieht?

Die von Google vorgeschlagene Lösung ist nix!

Ich habe ja schon über eine Lösung in meinem Artikel Tutorial zum Einbau der EU-Richtlinie zur Cookie Zustimmung berichtet. Diese Lösung wurde direkt von Google vorgeschlagen und nach genauerem Betrachten gefällt diese mir überhaupt nicht.

Denn die von Google vorgeschlagene Lösung lädt ein externes Javascript direkt von aws.amazon.com. Zum einen mag ich es nicht, wenn meine Seite von externen Seiten abhängig ist, zum anderen habe ich keine Kontrolle darüber, was ich nun eigentlich genau auf meine Seite lade, und was die andere Seite mit meinen Infos alles anfängt.

OK, wir lassen nun mal meine Vermutungen über die Hintergründe, weshalb Google genau diese Lösungen mit externen Javascripts vorschlägt beiseite und konzentrieren uns auf eine Variante, die ohne externe Ressourcen auskommt.

Eine Lösung ohne externe Ressourcen aus den USA und ohne Plugin.

Ich habe für euch hier zwei Varianten, die komplett ohne Plugin und ohne externe Javascripts auskommen:

Ihr müsst dazu lediglich ein kleines Snippet in eure style.css und in eure footer.php setzen und den Link zu eurer Datenschutzseite anpassen.

Eine Variante ist ganz minimalistisch im Browserzeilendesign gehalten. Die andere ist ein kleiner Notizzettel im Vintagelayout.

Achtung: Ich habe nicht herausfinden können, ob es von Google-Seite aus eine Mindestanforderung an das Design gibt (Größe des Feldes, Schriftgröße, Farbkontraste, etc…) Und dieses Beispiel hier beinhaltet auch lediglich eine Banderole, in der über ein Cookie informiert wird – ohne Opt Out. Allerdings beinhalten auch einige der von Google vorgeschlagenen Lösungen kein Opt Out. ZUsätzlich gibt es in Bezug auf Cookies zwar eine EU-Richtlinie, aber jedes Land hat hierzu seine eigene Rechtsprechung. Lange Rede kurzer Sinn: dieses Beispiel könnt ihr auf eigene Gefahr einsetzen – da ich kein Rechtsanwalt bin, gebe ich keine Gewährleistung dass diese Lösung dauerhaft juristisch unantastbar ist bzw. bleibt.  

So, nun aber zum Code – hier ist Variante1:

Diese Variante setzt einen kleinen Layer am Fuß eurer Seite – dezent im Browserstyle und ohne Animation – schließlich wollen wir ja nicht, dass der Cookiehinweis unsere Seite zu sehr dominiert….

cookie_dezent

Dieser Code ist für eure Footer.php – beispielsweise direkt vor dem abschließenden </body> Tag:

<div id="cookiedingsbums"><div>
  <span>Ja, auch diese Webseite verwendet Cookies. </span> 
  <a href="http://xxx.euredomain.de/euredatenschutzseite">Hier erfahrt ihr alles zum Datenschutz</a></div>
 <span id="cookiedingsbumsCloser" onclick="document.cookie = 'hidecookiedingsbums=1;path=/';jQuery('#cookiedingsbums').slideUp()">&#10006;</span>
</div>

<script>
 if(document.cookie.indexOf('hidecookiedingsbums=1') != -1){
 jQuery('#cookiedingsbums').hide();
 }
 else{
 jQuery('#cookiedingsbums').prependTo('body');
 jQuery('#cookiedingsbumsCloser').show();
 }
</script>

Rot: Hier setzt ihr die URL zu eurer Datenschutzerklärung
Grün: Die Texte könnt ihr nach Belieben ändern

Eure CSS Angaben für eure style.css:

#cookiedingsbums a {color:#000; text-decoration:none;}

#cookiedingsbums a:hover {text-decoration:underline;}

#cookiedingsbums div {padding:10px; padding-right:40px;}

#cookiedingsbums { 
   outline: 1px solid #7b92a9; 
   text-align:right; 
   border-top:1px solid #fff;
   background: #d6e0eb; 
   background: -moz-linear-gradient(top, #d6e0eb 0%, #f2f6f9 100%); 
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d6e0eb), color-stop(100%,#f2f6f9)); 
   background: -webkit-linear-gradient(top, #d6e0eb 0%,#f2f6f9 100%); 
   background: -o-linear-gradient(top, #d6e0eb 0%,#f2f6f9 100%);
   background: -ms-linear-gradient(top, #d6e0eb 0%,#f2f6f9 100%); 
   background: linear-gradient(to bottom, #d6e0eb 0%,#f2f6f9 100%); 
   filter: progid:DXImageTransform.Microsoft.gradient(   startColorstr='#d6e0eb', endColorstr='#f2f6f9',GradientType=0 ); 
   position:fixed;
   bottom:0px; 
   z-index:10000; 
   width:100%; 
   font-size:12px; 
   line-height:16px;}

#cookiedingsbumsCloser {
   color: #777;
   font: 14px/100% arial, sans-serif;
   position: absolute;
   right: 5px;
   text-decoration: none;
   text-shadow: 0 1px 0 #fff;
   top: 5px;
   cursor:pointer;
   border-top:1px solid white; 
   border-left:1px solid white; 
   border-bottom:1px solid #7b92a9; 
   border-right:1px solid #7b92a9; 
   padding:4px;
   background: #ced6df; /* Old browsers */
   background: -moz-linear-gradient(top, #ced6df0%, #f2f6f9 100%); 
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ced6df), color-stop(100%,#f2f6f9)); 
   background: -webkit-linear-gradient(top, #ced6df0%,#f2f6f9 100%); 
   background: -o-linear-gradient(top, #ced6df0%,#f2f6f9 100%); 
   background: -ms-linear-gradient(top, #ced6df0%,#f2f6f9 100%); 
   background: linear-gradient(to bottom, #ced6df0%,#f2f6f9 100%); 
   filter: progid:DXImageTransform.Microsoft.gradient(    startColorstr='#ced6df', endColorstr='#f2f6f9',GradientType=0 ); 
 }

#cookiedingsbumsCloser:hover {border-bottom:1px solid white; border-right:1px solid white; border-top:1px solid #7b92a9; border-left:1px solid #7b92a9;}

Und hier gibt es Variante 2 – den Cookiehinweis im Vintage-Look

Für unsere Vintage-Fans habe ich noch eine Variante im Scrapbook-Style:

cookie_vintage

Der Code für eure Footer.php vor dem abschließenden </body> Tag:

<div id="cookiedingsbums">
<div id="cookiedingsbums_vintage"><div>
<div id="cookieinhalt">
<span>Ja, auch diese Webseite verwendet Cookies. </span> 
<a href="http://xxx.euredomain.de/euredatenschutzseite">
Hier erfahrt ihr alles zum Datenschutz.</a></div>
 <span id="cookiedingsbumsCloser" onclick="document.cookie = 'hidecookiedingsbums=1;path=/';jQuery('#cookiedingsbums').slideUp()">&#10006;</span>
</div><
script>
 if(document.cookie.indexOf('hidecookiedingsbums=1') != -1){
 jQuery('#cookiedingsbums').hide();
 }
 else{
 jQuery('#cookiedingsbums').prependTo('body');
 jQuery('#cookiedingsbumsCloser').show();
 }
</script>

Rot: Hier setzt ihr die URL zu eurer Datenschutzerklärung
Grün: Die Texte könnt ihr nach Belieben ändern

Und dann noch der Code für eure style.css

Nicht erschrecken – diese kryptischen Zeichen ergeben den grafischen Hintergrund. Falls ihr das Plugin WordPress Antivirus einsetzt, kann es sein, dass es bei diesem Code Alarm schlägt. Ich habe diese Lösung gewählt, weil ihr so kein separates Bild hochladen und verknüpfen müsst:

#cookiedingsbums_vintage { 
background-image: url(data:image/png;base64,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);
padding-top:42px; 
background-repeat:repeat-x; 
background-position:top}

#cookiedingsbums a {color:#000; text-decoration:none;}
#cookiedingsbums a:hover {text-decoration:underline;}
#cookiedingsbums #cookieinhalt {
padding:10px;
padding-top:5px; 
padding-right:40px; 
background-image: url(data:image/png;base64,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); 
padding-bottom:25px;
}

#cookiedingsbums {
text-align:center;
position:fixed;
bottom:0px;
z-index:10000;
max-width:300px; 
font-size:12px; 
line-height:28px;
}

#cookiedingsbumsCloser {
color: #777;
font: 14px/100% arial, sans-serif;
position: absolute;
right: 5px;
text-decoration: none;
text-shadow: 0 1px 0 #fff;
top: 50px;
cursor:pointer;
padding:4px;
}

#cookiedingsbumsCloser:hover {
font: 18px/100% arial, sans-serif; 
right:3px; 
top:48px;
 position: absolute;
}

[- – – – Trennlinie – – – -]Den schönen kurz gehaltenen Javascriptcode habe ich übrigens von devblog.weblication.de/cms/blog/cookie-hinweis.php – Dort findet ihre den Originalcode – den ich dann hier optisch noch modifiziert habe.[- – – – Trennlinie – – – -]

Ich bin gespannt, wie diese Cookiehinweise zukünftig von den großen Seiten unserer Branche umgesetzt werden. Ich kann mir vorstellen, dass viele auf eine maximal dezente Lösung setzen werden. We will see 🙂

Wichtig: Überprüft nach dem Einbau, ob wichtige Elemente eurer Webseite überlagert werden! Denn wenn der Cookie-Layer beispielsweise euren Impressumslink überdeckt, könnt ihr abgemahnt werden. An dieser Stelle einen Dank für diesen Tipp an Daniel Weihmann von www.redirect301.de  

Diese Box eignet sich übrigens auch perfekt für eine Call2Action-Box – sofern man diese etwas dezenter platzieren möchte als ein alles überlagender Layer 🙂

Für alle, die sich ausführlicher mit dem Thema Cookie-Richtlinie auseinandersetzen möchten: Helmut Karger hat sich auf seinem Blog „YAPB – Yet another Personal Blog“ sehr intensiv mit diesem Thema auseinandergesetzt. Dort findet ihr noch weitere Einbaumöglichkeiten dowie einige interessante Hintergundinformationen.

Tragt euch im Style-Up-Your-Wordpress-Letter ein - und erhaltet tolle Stylingtipps für euren Blog bequem per Mail

Alle Abonnenten der FuZo-News erhalten exklusiv einen 50% Rabattcoupon für die Erstausgabe der Ideenkiste von FuZo-Marketing.
Kein Spam - versprochen! Die FuZo-News sind kostenlos und werden kostenlos bleiben. Sie erscheinen einmal im Monat per Mail und können jederzeit abbestellt werden. Die Daten bleiben vertraulich bei uns und werden nicht an Dritte weiter gegeben.

Kommentare

  1. Hansjörg Leichsenring 22. September 2015 um 16:37 Uhr

    Danke für diese interessante Plugin-freie Alternative. Eine Frage hätte ich: Wie kann das „X“ durch einen Textbutton ersetzt werden?

    Beste Grüße
    Hansjörg Leichsenring

    • Mirjam 22. September 2015 um 19:43 Uhr

      Hallo, danke 🙂
      Das x wird im Code mit den Symbolen „&#10006“ definiert. Dort kannst du auch Text einfügen. Dann muss nur der Abstand des Div-Containers für den Haupttext angepasst werden. Das betrifft die CSS-Angabe für .cookiedingsbums div { }. Dort muss dann das „padding-right“ von 40px auf eine größere Zahl gesetzt werden, damit der Text nicht den Button überlagert.

      Ich joffe, das hilft weiter.
      Ciao, Mirjam

  2. Birgitt Mueller 23. September 2015 um 15:06 Uhr

    Wenn ich das richtig sehe brauch der Code zum funktionieren aber jQuery oder? Ich nutze derzeit das http://cookieinfoscript.com welches sehr nützliche Einstellungsmöglichkeiten bietet.

    • coloritas 24. September 2015 um 9:30 Uhr

      Hallo,
      der Code hat Javascript im Einsatz – braucht aber keine jquery Verknüpfung, da dies Basisfunktionen von Javascript sind. Der Vorteil ist, dass alles auf dem eigenen Server liegt, und dass keine externe Javascript-Datei geladen werden muss. Bei cookieinfoscript.com wird ebenfalls eine externe Datei geladen – und das ist immer so eine Sache – wenn die den Dienst einstellen funktioniert nichts mehr. Bzw. mit dieser Verknüpfung kann ziemlich viel Unsinn angestellt werden, da der Anbieter eigene Scripte in deine Seite einbinden kann…
      Dafür muss bei meinem Script eventuelle optische Anpassungen per Hand vorgenommen werden. Das ist der Nachteil – bzw. der Preis für die Unabhängigkeit 🙂

      • Martin Nürnberg 2. Februar 2016 um 12:13 Uhr

        Da sind aber schon jQuery Aufrufe in dem Javascript Code drin, denke das es ohne jQuery so nicht funktionieren wird. Habe hier mal einen Code zusammen gebaut, der komplett ohne funktioniert: http://www.mbm-webdesign.de/cookie-hinweis-script/

        • coloritas 3. Februar 2016 um 11:11 Uhr

          Ah, ertappt – ich hatte in der Überschrift doch glatt das Wort „extern“ vergessen. Denn eigentlich ging es mir vor allem darum, dass kein Script von einem fremden Server geladen wird – denn das ist leider bei den von Google vorgeschlagenen Lösungen der Fall…

  3. Hansjörg Leichsenring 23. September 2015 um 17:30 Uhr

    Danke für den ergänzenden Hinweis. Es funktioniert soweit alles gut bei mir. Ich hab aber eine Frage zum css-Code und die bitte nicht falsch verstehen. Will absolut nicht nörgeln, aber ich hab den Code mal durch den Validator gejagd und dabei jede Menge Fehler gelistet bekommen. Nun bin ich kein HTML-Profi, wüsste aber doch gerne, wie man das ggf. vermeiden kann

    Beste Grüße
    Hansjörg

    • coloritas 24. September 2015 um 9:34 Uhr

      Hallo,
      kein Problem – und by the way: Ich werde tatsächlich zukünftig den Code regelmäßig durch den Validator schicken 🙂 – auch wenn ich schon recht lange mit Quellcodes arbeite schadet das nicht.

      Zum Code oben: der Validator mag die Grafikangaben per „data:image“ nicht – allerdings fand ich das bequemer als Grafiken zu verwenden, die man dann noch separat per FTP hochladen muss. Denn so muss man gar nicht per FTP ran.

      Auch das WordPress Antivirus Plugin meckert beim Scan – aber der Code ist so in Ordnung und kann bedenklos genutzt werden 🙂

      Ciao, Mirjam

      • Hansjörg Leichsenring 24. September 2015 um 11:18 Uhr

        Hi

        Blöde Frage: Wo stecken denn in dem Code Grafiken drin?

        • coloritas 24. September 2015 um 11:42 Uhr

          Hihi – die sind ganz tricky versteckt in dem kryptischen Code mit der langen Zeichenkette 🙂 Diese Zeichen generieren quasi das Bild.

  4. Felix Berlin 23. September 2015 um 19:32 Uhr

    Wirklich eine sehr schmale und leichte Lösung. Haben wir auf unserem Portal direkt mal eingebaut. DANKE!

    • coloritas 24. September 2015 um 9:34 Uhr

      Dankeschön 🙂 Das freut mich.

  5. Timm 24. September 2015 um 11:30 Uhr

    Hallo Mirjam,
    schon lange frage ich mich, ob diese Banner wirklich sein müssen. Es ist kein Gesetz und mir ist nicht bekannt, das jemand abgestraft wurde, weil die Leser nicht gleich mit einem großen Ausrufezeichen darauf hingewiesen wurden, das im Blog Cookies verwendet werden. Dafür war doch der Disclaimer gedacht, der auf der Startseite sofort erreichbar sein muss, oder? Vielleicht liege ich völlig falsch mit meiner Ansicht.
    Nichtsdestotrotz hast du mich mit diesem Code Snippet überzeugt und es prompt auf meiner Seite eingebaut – und bin glücklich darüber.
    Vielen Dank dafür. 🙂
    LG Timm

    • coloritas 24. September 2015 um 11:47 Uhr

      Hallo Timm – da hast du recht, nach meinem Wissensstand gilt das in Deutschland aktuell nur für einzelne Dienste wie Google Adsense. Ich vermute, dass ein fehlender Hinweis in diesem Fall auch keine Abmahnung zur Folge haben würde, sondern lediglich der Ausschluss aus dem Partnerprogramm. Die EU-Richtlinie selbst ist (zum Glück) in der deutschen Rechtsprechung (noch) nicht verankert. Da ich jedoch kein Jurist bin, sind diese Angaben ohne Gewähr :-). Ich habe auch keine Infos über Mindest-Schriftgröße und Dominanz der Hinweise gefunden. Und warum die von Google vorgestellten Beispiele gleich so dominant sind verstehe ich auch nicht….

  6. Calliope 26. September 2015 um 20:15 Uhr

    Oh, wie cool. Bei uns läuft für einen simplen Button auch ein WordPress-Plugin mit Javascript, sobald ich ein Stündchen Freizeit habe, werde ich dann wohl auf diese Lösung umsteigen. Vielen Dank für die Erklärungen 😉

    Mir ist außerdem auch nicht bekannt, seit wann Google EU-Richtlinien festlegen bzw. erfinden kann, aber ich bin ja auch kein Jurist und daher halte ich lieber meine Lippen verschlossen.

    LG

    PS: Wir haben auch twentyfifteen installiert, unsere Anpassung ist aber nicht so peppig geworden wie hier. Ich glaube, wir müssen auch noch mehr mit Bildern bzw. Illus arbeiten.

    • coloritas 26. September 2015 um 20:51 Uhr

      Dankeschön 🙂 Und ja – Google kann keine Gesetze machen – und genau das wird oft verwechselt. Aber Google kann es als Richtlinie für das Partnerprogramm festlegen und alle aus dem Programm nehmen, die das nicht umsetzen. Warum Google das macht ist für viele ein Rätsel – angeblich wollte Google damit den europäischen Datenschützern etwas entgegen kommen…

      Zum Twenty-Fifteen Theme: Ich werde gegen Ende des Jahres auf Twenty-Sixteen umsteigen – und dann werde ich mein Twenty-Fifteen Child Theme etwas putzen und zum Download anbieten. Dann kann sich jeder ansehen, was da so vom Quellcode her geändert wurde.
      Ciao, Mirjam

  7. Tut nix zur Sache 2. Oktober 2015 um 15:18 Uhr

    @Calliope: Guckst du hier:
    http://eur-lex.europa.eu/LexUriServ/LexUriServ.do?uri=OJ:L:2009:337:0011:0036:de:PDF

  8. Andrea 12. November 2015 um 10:56 Uhr

    Hallo, 🙂

    vielen Dank zunächst mal für die tolle Lösung / Anleitung.
    Ich habe alles schön eingebaut und optisch meinen Wünschen angepasst. Das Einzige, was mich „stört“ ist die Tatsache, dass ich das Teil – nachdem ich es gestern quasi bestätigt habe – heute wieder eingeblendet bekomme. Ich könnte mir vorstellen, dass das Besucher – die regelmäßig kommen – nerven wird.
    Da das noch keiner hier gefragt hat, frage ich mich nun, läuft bei mir etwas falsch?

    liebe Grüße

  9. coloritas 12. November 2015 um 11:16 Uhr

    Hallo, danke erstmal 🙂
    Das Script setzt für das Infofenster ein Cookie (das ist schon die Ironie in sich, dass man für einen Cookiehinweis einen Cookie braucht…. aber sonst merkt sich das der Browser nicht.)

    Der Cookie ist nur für die Laufzeit der aktuellen Seite gespeichert. Wenn man möchte, dass der Cookie länger bleibt, dann kann man diesem auch ein Verfallsdatum mitgeben. Hier ist das recht gut beschrieben: http://www.a-coding-project.de/587/cookies-in-javascript/. Ich bin mir allerdings nicht sicher, wie lange die Laufzeit dieses Cokies offiziell sein darf. Wieder so ein Punkt, der vermutlich nicht eindeutig in den Richtlinien festgelegt ist….

    Viele Grüße

    Mirjam

    • Andrea 12. November 2015 um 12:12 Uhr

      Hi,
      danke für die schnelle Reaktion. Ich habe keine ahnung, wie das rechtlich aussieht. Ich weiß nur dass ich auf anderen Blogs (wo ich regelmäßig lese) diese Meldung vor Monaten einmal weggeklickt habe und nie wieder zu sehen bekam. Dadurch fiel mir das heut bei mir vermutlich auch gleich auf.
      liebe Grüße

      • coloritas 12. November 2015 um 15:31 Uhr

        Gerne 🙂 Teste am besten mal den Zusatz von a Coding Project aus – damit sollte es gehen. Ich werde bei Gelegenheit das Script noch um die Option erweitern – danke auf jeden Fall für den Hinweis 🙂

        • Andrea 12. November 2015 um 23:27 Uhr

          Ich bin nicht fit genug in solchen Sachen um da irgendwelche Codeschnipsel einzubauen. Da ensteht vermutlich mehr Schaden als Nutzen. Entweder lasse ich es so oder ich such nach einer Alternative. 🙂

          • coloritas 16. November 2015 um 17:45 Uhr

            Ich hab das mal auf meine To Do Liste gesetzt – eventuell gibt es da demnächst noch ein Update 🙂

  10. Hansi 16. November 2015 um 18:33 Uhr

    Tolles „independant“ Script. Danke dafür, großartige Idee!!!

    Habe nur ein kleines Problem 🙁
    Beim Klick auf das Kreuz zum „Schließen“ der Cookie-Info passiert garnix.
    Hab’s mit beiden Varianten versucht und bei bedien geht es nicht.
    Was um Himmels Willen mach ich da falsch, bzw. was habe ich da möglichrweise übersehen?

    Bin für jeden auklärenden Tipp mehrals dankbar… 🙂

  11. Hansi 16. November 2015 um 20:31 Uhr

    Hab schon 2 x gepostet, aber mein Kommentar erschien nicht.
    Deshalb jetzt noch einmal 🙂

    Also, zunächst: Das Script ist echt eine tolle Idee. Großartig und danke dafür !!!

    Allerdings habe ich ein kleines Problem. Wenn ich auf das Kreuz klicke verschwindet das „Info-Fenster“ nicht. Habe es mit beiden Varianten probiert mit gleichemErgebnis.

    Was habe ich da übersehen? Oder was könnte ich da falsch gemacht haben?
    Ich seh vor lauter Bäumen den Wald nicht …

    Ein paar Tipps wären mir sehr willkommen. Vielleicht bin ich einfach zu blöd?
    🙂

    • coloritas 18. November 2015 um 11:06 Uhr

      Hallo,

      sorry, dass ich erst jetzt antworte – aber ab und an bin ich unterwegs, so dass ich nicht so schnell reagieren kann 🙂

      Der erste Kommentar erschien übrigens beim Artikel http://www.ideenlounge.de/abgeknickte-ecke-per-css 🙂 Wie dort schon geschrieben kannst du gerne mal den Link zu deiner Seite an mirjam@ideenlounge.de schicken, dann kann ich mir das mal ansehen, woran das liegen könnte.

      Viele Grüße
      Mirjam

  12. Luigi 2. Januar 2016 um 8:56 Uhr

    Hallo! Vielen Dank für diesen schlanken Code. Ich habe mir den oberen copiert, allerdings relativ stark verändert, was die Ausgabe bzw. den Style angeht.
    Seit ein paar Tagen optimiere ich meinen Blog in Richtung Performance und da ist deine Lösung ohne Plugin wirklich sehr gut.
    Bin mittlerweile von knapp 30 plugins runter auf nur noch 3 aktive und ein paar wenige, die nur aktiviert werden wenn ich sie brauche zur Pflege (DB optimieren, Bilder komprimieren etc).
    Danke noch mal und habe eine gute Zeit!

    • Mirjam 4. Januar 2016 um 18:21 Uhr

      Das freut mich, danke. Plugin sparen macht richtig Spaß, wenn mal damit angefangen hat 🙂 Aber von 30 runter auf 3, das ist taff! Respekt!
      Viele Grüße, Mirjam

  13. Jens 25. August 2016 um 9:31 Uhr

    Hallo,

    vielen Dank für das gute Script! Ich habe es gleich in eines meiner Projekte eingebaut. Funktioniert einwandfrei! Super

    • coloritas 25. August 2016 um 10:09 Uhr

      Bitteschön – das freut mich.
      Ich stelle nun auch gerade alle Seiten um 🙂

  14. Gwen 6. September 2016 um 21:02 Uhr

    Hallo,
    das ist ja fabelhaft! Danke für das Script, die Rettung 🙂
    Wäre es auch möglich, den Text und das Kreuzchen nach links zu orientieren? Gerade bei eher breiten Layouts wirkt das sonst etwas komisch… Den Text habe ich hingekriegt, aber wie schafft man es, dass das Kreuz sich dem Text direkt anschließt?
    VG,
    Gwen

  15. coloritas 8. September 2016 um 4:09 Uhr

    Hallo, das freut mich :-).
    Zum Kreuzchen: Entferne bei #cookiedingsbumsCloser in den CSS folgende drei Zeilen:
    position: absolute;
    right: 5px;
    top: 50px;
    Dann setzt sich das x hinter den Text.
    Eventuell musst du noch das „padding“ reduzieren, damit es bündig wird.

    Viele grüße
    Mirjam

  16. Malte 10. Dezember 2016 um 0:26 Uhr

    Super geil. Mal ein Script das auf Anhieb funktioniert. Ein bißchen CSS angepasst…alles schön! Vielen, vielen Dank dafür!

    Grüße

    • coloritas 12. Dezember 2016 um 9:29 Uhr

      Das freut mich 🙂

  17. Sven 24. Januar 2017 um 16:45 Uhr

    Hi,

    wie mein(e) Vorredner(in) schon schrieb, ist das Problem, das die „Anzeige“ der Nutzung über die Cookiesteuerung stets und ständig wieder erschein, was natürlich völlig nervt. Vom http://www.a-coding-project.de kann man nicht viel in das bestehende JS zufügen, ohne das man ERRORS produziert, wohl wegen der class hidecookiedingsbums vs. cookiedingsbums :/
    Wäre vllt. hilfreich, wenn man, sprich Du, es evtl. einbinden würdest, die Auswahl kann man ja in „Reihe beschränken für: 1 Tag, 1 Woche, 1 Monat, 1 Jahr …
    Wäre super,

    LG.
    Sven

  18. Sven 25. Januar 2017 um 16:32 Uhr

    Ps. leider „verschwand“ mein erster Post …

    Hi @coloritas,

    wie mein(e) Vorredner(in) schon schrieb, ist das Problem, das die „Anzeige“ der Nutzung über die Cookiesteuerung stets und ständig wieder erschein, was natürlich völlig nervt. Vom http://www.a-coding-project.de kann man nicht viel in das bestehende JS zufügen, ohne das man ERRORS produziert, wohl wegen der class hidecookiedingsbums vs. cookiedingsbums :/
    Wäre vllt. hilfreich, wenn man, sprich Du, es evtl. einbinden würdest, die Auswahl kann man ja in „Reihe“ beschränken für: 1 Tag, 1 Woche, 1 Monat, 1 Jahr …
    Wäre super,

    LG.
    Sven

  19. Sven 28. Januar 2017 um 13:39 Uhr

    Sorry, aber ich verstehe nicht, warum meine Frage hier immer wieder verschwindet?
    Es ist jja keine Kritik die jemanden angreift, sondern nur eine simple Frage, wie man das ständige auftreten der Meldung unterbinden kann?

    Na ja…
    Dies wird wohl auch verschwinden…

    Gruss
    Sven

    • coloritas 8. Dezember 2017 um 13:10 Uhr

      Hallo,

      sorry, die Ideenlounge pausiert noch eine Weile, weil ich aktuell leider keine Zeit dafür bereit stellen kann.
      Aber ich möchte gerne 2018 das Projekt wieder aufleben lassen.

      Und ich hatte eine kleine Spam-Kommentar-Attacke – und genau in dieser Zeit kam dieser Kommentar und ist mir leider durchgerutscht…

      Viele Grüße,
      Mirjam

  20. Patrick 20. April 2017 um 0:28 Uhr

    Habe es auf meiner Website integriert und funktioniert bestens!

    Vielen Dank und beste Grüße! 🙂

  21. Patrick 12. Juni 2017 um 12:39 Uhr

    Funktioniert hervorragend! Habe es auf meinen Webseiten implementiert 🙂

  22. Bekas 24. Juni 2017 um 21:14 Uhr

    UUu 1 Variante aber sexy 😉

    Kann man auch etwas cool für Smartphones erweitern:

    @media (max-width: 767px) {
    #cookiedingsbums {
    text-align: left;
    padding-right: 18px;
    }
    #cookiedingsbumsCloser {
    padding:15px;
    top:10px;
    right:10px;
    font-size:18px;
    }
    }

    Danke 😉

    • coloritas 8. Dezember 2017 um 13:06 Uhr

      Merci 🙂

  23. Florian 7. Februar 2018 um 0:01 Uhr

    Hi Mirjam,

    toller Tipp, danke, das hat auf Anhieb funktioniert. Hatten zuvor das Plugin EU Cookie Law, was auch gut funktioniert hat. Allerdings hat das Plugin immer dann versagt, wenn die Seite über einen anderen Service geöffnet wurde. Mit deinem Code klappt alles super 🙂

    Viele Grüße
    Florian

  24. Florian 8. Februar 2018 um 1:14 Uhr

    Hallo,

    jetzt ist mir doch noch ein Problem aufgefallen:

    Der Hinweis erscheint immer wieder. Wie kann man denn zB einstellen, dass dieser Hinweis zB nur alle 90 Tage kommt?

    Viele Grüße
    Florian

  25. Martin 8. Februar 2018 um 8:54 Uhr

    Guten Tag,

    Die Cookie Notiz geht aber auf Deiner Seite nicht ? habe es auf Firefox und Google probiert!
    Ich benutz das Plugin https://wordpress.org/plugins/cookie-bar/

    ——stooni

Die Ideenlounge macht Pause, daher sind aktuell keine neuen KOmmentare möglich. Folgt mir auf Facebook, dann erfahrt ihr, wann es weiter geht.

Das könnte dich auch interessieren:



  • About

    aboutHallo, ich heiße Mirjam Schrepler und setze als freiberufliche Grafikerin mit einem wunderbaren Netzwerk Internetseiten und ganzheitliche Marketingprojekte um.

    Auf der Ideenlounge blogge ich über die vielen kleinen Dinge, mit denen ihr euren Blog optisch aufhübschen könnt.

    Ich liebe Wordpress und schlanken Quellcode - und es ist erstaunlich, wie einfach und schnell man viele Plugins durch ein kleines bisschen Quellcode ersetzen kann.

    Tragt euch einfach in den Ideenlounge Style-Club-Newsletter ein, und ihr erhaltet die besten Tipps regelmäßig per Mail.
  • News von Facebook

  • Basics (3)
    Wie binde ich ein eigenes CSS ein und wie funktioniert das mit dem Childtheme.
  • Code-Schnipsel zum Copy&Paste (14)
    Nützliche CSS-, PHP-, und Javascript-Code-Snippets zum direkten Einbau in euer WP-Theme.
  • Freebies (4)
    Kostenlose Downloads - Icons, Grafiken, Hintergründe, Plugins und vieles mehr.
  • Lesenswertes (1)
    Immer wieder stoße ich auf interessante Blogs, Webseiten oder Bücher - analog und digital - hier meine Favoriten.
  • Blogvorstellungen (1)
    Blogs, deren Design mich einfach umhaut....
  • Ressourcen (1)
    Nützliche Online-Tools, Bildarchive und Code-Generatoren die euch als Blogger den Bloggeralltag erleichtern.
  • Reste-Ecke (7)
    Alles, was nicht wo wirklich in einer der anderen Kategorien passt.
  • Specials (1)
  • Folgt der Ideenlounge auf Facebook. RSS Feed
    Ja, auch diese Webseite verwendet Cookies. Hier erfahrt ihr alles zum Datenschutz