În acest articol vei învăța cum să creezi o bară cookie simplă, elegantă și complet funcțională
De ce ai nevoie de o bară cookie?
Conform legislației europene (GDPR și ePrivacy Directive), toate site-urile care folosesc cookie-uri trebuie să informeze utilizatorii despre acest lucru. Chiar și pe Blogger, dacă ai reclame Google AdSense, statistici sau widgeturi externe, este important să afișezi o notificare privind utilizarea cookie-urilor. În acest articol vei învăța cum să creezi o bară cookie simplă, elegantă și complet funcțională pentru blogul tău.
Ce este o bară cookie?
O bară cookie este o notificare afișată de obicei în partea de jos a site-ului, care explică pe scurt faptul că site-ul utilizează cookie-uri. Ea conține de regulă un buton de Accept, iar uneori și un link către o pagină de Politică de confidențialitate sau Politică de cookie-uri. După ce vizitatorul acceptă, bara dispare și nu mai este afișată la următoarele vizite.
Avantajele adăugării unei bare cookie pe Blogger
- Respectarea legislației GDPR și evitarea problemelor legale.
- Creșterea încrederii vizitatorilor, care văd că site-ul tău este transparent.
- Control mai bun asupra experienței utilizatorilor.
- Un aspect profesionist al blogului tău.
Pasul 1: Creăm bara cookie (HTML și CSS)
Mai întâi, adaugă următorul cod în <body> (poți folosi un widget HTML/JavaScript în Blogger pentru a-l insera). Aceasta va afișa bara vizuală în partea de jos a site-ului.
[ <div id="cookie-bar" style="position:fixed;bottom:0;left:0;width:100%;background:#2c3e50;color:#fff;padding:15px;text-align:center;z-index:9999;font-size:14px;font-family:Arial,sans-serif;box-shadow:0 -2px 5px rgba(0,0,0,0.3);"> Acest site folosește cookie-uri pentru a oferi o experiență mai bună. <a href="/p/politica-cookie.html" style="color:#f1c40f;text-decoration:underline;margin:0 10px;">Află mai multe</a> <button id="accept-cookies" style="margin-left:10px;padding:6px 14px;border:none;background:#f1c40f;color:#000;cursor:pointer;font-weight:bold;border-radius:4px;">Accept</button> </div> ]
Pasul 2: Adăugăm scriptul JavaScript
Acum vom face bara interactivă. Codul JavaScript de mai jos salvează alegerea utilizatorului folosind localStorage, astfel încât bara cookie nu va mai apărea după ce vizitatorul a dat click pe „Accept”.De asemenea acest cod trebuie adaugat inainte de </body>
[ <script> document.addEventListener("DOMContentLoaded", function() { var cookieBar = document.getElementById("cookie-bar"); var acceptBtn = document.getElementById("accept-cookies"); // Dacă utilizatorul a acceptat deja, ascundem bara if (localStorage.getItem("cookiesAccepted")) { cookieBar.style.display = "none"; } // La click pe buton, salvăm acceptul și ascundem bara acceptBtn.addEventListener("click", function() { localStorage.setItem("cookiesAccepted", "true"); cookieBar.style.display = "none"; }); }); </script> ]
Pasul 3: Creează o pagină de Politică de Cookie-uri
Pentru a respecta regulile GDPR, nu este suficient să ai doar o bară cookie. Trebuie să creezi și o pagină separată, unde explici:
- Ce sunt cookie-urile.
- Ce tipuri de cookie-uri folosește site-ul tău (ex. funcționale, statistice, marketing).
- Cum pot utilizatorii să le șteargă sau să le dezactiveze.
În Blogger, mergi la Pagini → Nouă pagină și creează o pagină numită Politica Cookie. Apoi pune linkul acesteia în bara cookie, la secțiunea <a href="/p/politica-cookie.html">.
Pasul 4: Testează funcționalitatea
După ce ai adăugat codurile și pagina de politică, salvează șablonul și accesează blogul:
- Prima dată vei vedea bara cookie afișată jos.
- După ce dai click pe Accept, bara dispare.
- Dacă reîncarci pagina sau revii ulterior, bara nu mai apare (pentru că alegerea a fost salvată în
localStorage).
Îmbunătățiri posibile
Poți adapta bara cookie după preferințele tale:
- Schimbă culorile și fonturile pentru a se potrivi cu tema blogului.
- Adaugă un efect de tranziție (ex. fade-out) când utilizatorul acceptă.
- Include un buton „Refuz” pentru o implementare mai avansată.
Concluzie
Ai învățat cum să creezi o bară cookie personalizată pentru Blogger, respectând cerințele GDPR. Această soluție este simplă, nu necesită pluginuri externe și îți permite să arăți că ești transparent cu vizitatorii tăi. Dacă vrei să mergi și mai departe, poți adăuga un panou complet de consimțământ pentru cookie-uri, dar pentru majoritatea blogurilor această soluție este suficientă.
COMENTARII