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

cookie_style

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;
}


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.

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

    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

      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

    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

      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

        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

          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

    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

      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

        Hi

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

        • coloritas 24. September 2015 um 11:42

          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

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

    • coloritas 24. September 2015 um 9:34

      Dankesch├Ân :-) Das freut mich.

  5. Timm 24. September 2015 um 11:30

    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

      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

    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

      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

    @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

    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

    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

      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

        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

          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

            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

    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

    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

      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

    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

      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

    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

      Bittesch├Ân – das freut mich.
      Ich stelle nun auch gerade alle Seiten um :-)

  14. Gwen 6. September 2016 um 21:02

    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

    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

    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

      Das freut mich :-)

  17. Patrick 12. Juni 2017 um 12:39

    Funktioniert hervorragend! Habe es auf meinen Webseiten implementiert :)

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.

  • Tolle Insider-Tipps zum Stylen deines Wordpress Content!

    Trage dich einfach in unseren Mailverteiler ein und erhalte das Plugin WGIN-Styles mit dem n├Ąchsten Newsletter for free

  • Die 1 Cent pro Klick Formel
  • 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)
  • Blogverzeichnis - Bloggerei.de
  • FuZo-News per Mail abonnieren Folgt der Ideenlounge auf Facebook. RSS Feed