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?
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.
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.
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….
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()">✖</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
#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;}
Für unsere Vintage-Fans habe ich noch eine Variante im Scrapbook-Style:
<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()">✖</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
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 🙂
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.
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
Hallo, danke 🙂
Das x wird im Code mit den Symbolen „✖“ 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
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.
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 🙂
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/
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…
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
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
Hi
Blöde Frage: Wo stecken denn in dem Code Grafiken drin?
Hihi – die sind ganz tricky versteckt in dem kryptischen Code mit der langen Zeichenkette 🙂 Diese Zeichen generieren quasi das Bild.
Wirklich eine sehr schmale und leichte Lösung. Haben wir auf unserem Portal direkt mal eingebaut. DANKE!
Dankeschön 🙂 Das freut mich.
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
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….
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.
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
@Calliope: Guckst du hier:
http://eur-lex.europa.eu/LexUriServ/LexUriServ.do?uri=OJ:L:2009:337:0011:0036:de:PDF
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
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
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
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 🙂
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. 🙂
Ich hab das mal auf meine To Do Liste gesetzt – eventuell gibt es da demnächst noch ein Update 🙂
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… 🙂
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?
🙂
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
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!
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
Hallo,
vielen Dank für das gute Script! Ich habe es gleich in eines meiner Projekte eingebaut. Funktioniert einwandfrei! Super
Bitteschön – das freut mich.
Ich stelle nun auch gerade alle Seiten um 🙂
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
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
Super geil. Mal ein Script das auf Anhieb funktioniert. Ein bißchen CSS angepasst…alles schön! Vielen, vielen Dank dafür!
Grüße
Das freut mich 🙂
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
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
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
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
Habe es auf meiner Website integriert und funktioniert bestens!
Vielen Dank und beste Grüße! 🙂
Funktioniert hervorragend! Habe es auf meinen Webseiten implementiert 🙂
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 😉
Merci 🙂
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
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
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