Pop-up box cu mesaj de bun venit în Blogger - Design modern 2026

Actualizat: Aprilie 2026 — În urmă cu 10 ani, făceam pop-up-uri cu alert(), acele ferestre enervante care apăreau brusc și blocheau tot ecranul. Nu numai că utilizatorii le închideau imediat, dar Google a început să penalizeze site-urile care folosesc astfel de practici intruzive, mai ales pe mobil.

Vestea bună este că acum avem soluții moderne: pop-up-uri elegante, personalizabile, care nu deranjează și care chiar pot crește engagement-ul. În acest ghid actualizat pentru 2026, o să înveți cum să adaugi un mesaj de bun venit non-intruziv pe blogul tău Blogger, fără să afectezi SEO sau experiența utilizatorilor.

⚠️ Importanță SEO în 2026: Google penalizează ferm site-urile care afișează pop-up-uri intruzive imediat după încărcarea paginii, mai ales pe dispozitive mobile. Metoda pe care o prezint mai jos este prietenoasă cu SEO și nu va afecta poziționarea în căutări.

Ce fel de pop-up folosim în 2026?

Vom crea o fereastră modernă care:

• ✅ Nu blochează întregul ecran – apare elegant în colțul jos sau ca o notificare subtilă.
• ✅ Poate fi închisă ușor (click pe X sau oriunde în afara ei).
• ✅ Apare doar o dată pe vizitator – folosește un cookie pentru a nu re-apărea la fiecare pagină.
• ✅ Se poate declanșa la derulare (de exemplu, după ce vizitatorul a citit 30% din articol).
• ✅ Arată bine pe orice dispozitiv – complet responsive.

Mai jos găsești două variante: una simplă (pop-up în colț) și una mai avansată (pop-up central cu întârziere). Alege-o pe cea care ți se potrivește.

Varianta 1 – Pop-up subtil în colțul jos (recomandat)

Aceasta este cea mai prietenoasă metodă. Pop-up-ul apare ca o notificare mică în colțul din dreapta jos al ecranului, nu deranjează lectura și poate fi închis cu un click.

Pașii de instalare:

1. În contul tău Blogger, mergi la Temă → Editare HTML.
2. Fă o copie de rezervă a temei (click pe "Descarcă" înainte de a modifica ceva).
3. Caută în cod tag-ul </body> (aproape de sfârșit).
4. Chiar înainte de </body>, adaugă următorul cod complet:

<!-- Pop-up modern în colț pentru Blogger -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.1/cookieconsent.min.css" />
<style>
  /* Stiluri pentru pop-up-ul personalizat */
  .custom-welcome-popup {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: white;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    border-radius: 12px;
    padding: 15px 20px;
    max-width: 300px;
    z-index: 9999;
    font-family: inherit;
    border-left: 5px solid #e74c3c;
    transition: all 0.3s ease;
    display: none;
  }
  .custom-welcome-popup p {
    margin: 0 0 10px 0;
    color: #2c3e50;
  }
  .custom-welcome-popup button {
    background-color: #e74c3c;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    margin-right: 8px;
  }
  .custom-welcome-popup button:hover {
    background-color: #c0392b;
  }
  .custom-welcome-popup .close-btn {
    background: none;
    color: #95a5a6;
    font-size: 18px;
    float: right;
    padding: 0;
    margin: -10px -10px 0 0;
  }
  @media (max-width: 768px) {
    .custom-welcome-popup {
      bottom: 10px;
      right: 10px;
      left: 10px;
      max-width: none;
    }
  }
</style>

<div id="welcomePopup" class="custom-welcome-popup">
  <button class="close-btn" onclick="closeWelcomePopup()">&times;</button>
  <p>👋 Bine ai venit pe blog! Sper să găsești informațiile utile.</p>
  <button onclick="closeWelcomePopup()">Închide</button>
</div>

<script>
  // Funcție pentru a seta un cookie
  function setCookie(name, value, days) {
    var expires = "";
    if (days) {
      var date = new Date();
      date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
      expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "") + expires + "; path=/";
  }
  
  // Funcție pentru a citi un cookie
  function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i < ca.length; i++) {
      var c = ca[i];
      while (c.charAt(0) == ' ') c = c.substring(1, c.length);
      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
  }
  
  // Afișează pop-up-ul doar dacă nu a fost văzut în ultimele 7 zile
  function showWelcomePopup() {
    var popup = document.getElementById('welcomePopup');
    if (!getCookie('welcomePopupShown')) {
      popup.style.display = 'block';
      setCookie('welcomePopupShown', 'true', 7);
    }
  }
  
  function closeWelcomePopup() {
    document.getElementById('welcomePopup').style.display = 'none';
  }
  
  // Așteaptă 3 secunde înainte de a afișa pop-up-ul
  setTimeout(showWelcomePopup, 3000);
</script>

Personalizare: Poți schimba textul mesajului (unde scrie 👋 Bine ai venit...), culoarea bordurii (acum e #e74c3c - roșu), sau timpul de întârziere (acum e 3000 de milisecunde = 3 secunde).

Varianta 2 – Pop-up central (atenție la SEO)

Această variantă afișează o fereastră în mijlocul ecranului, similară cu un modal. Este mai puțin recomandată deoarece poate fi considerată intruzivă de Google, mai ales pe mobil. Folosește-o doar dacă ai un mesaj foarte important (de exemplu, o ofertă limitată sau un avertisment legal).

<!-- Pop-up central modern -->
<style>
  .modal-welcome {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    align-items: center;
    justify-content: center;
  }
  .modal-content {
    background-color: white;
    padding: 25px;
    border-radius: 15px;
    max-width: 400px;
    text-align: center;
    position: relative;
    animation: slideDown 0.4s ease;
  }
  @keyframes slideDown {
    from { transform: translateY(-50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
  .close-modal {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    cursor: pointer;
    color: #95a5a6;
  }
  .close-modal:hover {
    color: #e74c3c;
  }
</style>

<div id="welcomeModal" class="modal-welcome">
  <div class="modal-content">
    <span class="close-modal">&times;</span>
    <h3>✨ Bun venit! ✨</h3>
    <p>Îți mulțumesc că ai trecut pe la mine. Sper să găsești articolele utile. Nu uita să te abonezi la newsletter pentru noutăți!</p>
    <button onclick="closeModal()" style="background:#e74c3c; color:white; border:none; padding:8px 16px; border-radius:5px; cursor:pointer;">Închide</button>
  </div>
</div>

<script>
  function setCookie(name, value, days) {
    var expires = "";
    if (days) {
      var date = new Date();
      date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
      expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "") + expires + "; path=/";
  }
  function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i < ca.length; i++) {
      var c = ca[i];
      while (c.charAt(0) == ' ') c = c.substring(1, c.length);
      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
  }
  function showModal() {
    if (!getCookie('modalShown')) {
      document.getElementById('welcomeModal').style.display = 'flex';
      setCookie('modalShown', 'true', 30);
    }
  }
  function closeModal() {
    document.getElementById('welcomeModal').style.display = 'none';
  }
  window.onload = function() {
    setTimeout(showModal, 2000);
  };
  document.querySelector('.close-modal').onclick = closeModal;
  window.onclick = function(event) {
    var modal = document.getElementById('welcomeModal');
    if (event.target == modal) closeModal();
  };
</script>

Cum fac ca pop-up-ul să apară doar pe pagina principală?

Dacă vrei ca mesajul de bun venit să apară doar pe prima pagină a blogului (nu și pe paginile articolelor), poți înfășura scriptul în condiția specifică Blogger.

În loc să pui codul direct înainte de </body>, caută în template secțiunea unde se află <b:includable id='main'> sau adaugă această condiție:

<b:if cond='data:blog.pageType == "index"'>
  // Aici pui tot codul pop-up-ului (varianta 1 sau varianta 2)
</b:if>

Aceasta va face ca scriptul să se încarce DOAR pe pagina principală, lista de articole și arhive.

Întrebări frecvente (FAQ)

1. Pop-up-ul meu nu apare deloc. Ce fac greșit?
Verifică dacă ai lipit codul corect, înainte de </body>. De asemenea, asigură-te că nu există erori de JavaScript în consola browserului (F12 → Console). Un alt motiv posibil: cookie-ul a fost deja setat. Șterge cookie-urile site-ului tău și reîncarcă pagina.

2. Vreau ca pop-up-ul să apară la derulare, nu după un timp fix. Cum fac?
Poți înlocui funcția setTimeout() cu un eveniment de derulare. De exemplu:

window.addEventListener('scroll', function() {
  if (window.scrollY > 300) {
    showWelcomePopup();
  }
});

Astfel, pop-up-ul va apărea după ce utilizatorul a derulat 300 de pixeli în jos.

3. Pop-up-ul afectează SEO-ul blogului?
Varianta 1 (pop-up în colț) nu afectează SEO, deoarece nu blochează conținutul principal. Varianta 2 (central) poate fi problematică, mai ales pe mobil. Google a actualizat ghidurile în 2023 și 2025, iar pop-up-urile care acoperă conținutul imediat după încărcare sunt penalizate.

4. Cum pot adăuga un buton de "Abonează-te la newsletter" în pop-up?
Poți înlocui textul simplu cu un formular. De exemplu, în interiorul <div class="custom-welcome-popup">, în loc de <p>...</p>, adaugă un câmp de email și un buton de abonare (folosind servicii precum Mailchimp sau FeedBurner).

5. Pot folosi același pop-up pentru toate paginile, dar să arate diferit în funcție de pagină?
Da. Poți folosi condiții Blogger precum <b:if cond='data:blog.url == "URL-articol"> pentru a afișa mesaje diferite pe anumite pagini. De exemplu, pe pagina de contact poți avea un mesaj diferit față de pagina principală.

6. Am încercat codul, dar nu funcționează pe mobil. De ce?
În varianta 1, am inclus deja media query pentru mobil (@media (max-width: 768px)). Dacă tot nu funcționează, verifică dacă tema ta are un viewport setat corect. Ar trebui să ai în secțiunea <head> această linie: <meta name="viewport" content="width=device-width, initial-scale=1">. Dacă nu, adaug-o.

Concluzie

Un mesaj de bun venit poate fi un instrument eficient pentru a crea o conexiune cu vizitatorii tăi, dar trebuie folosit cu grijă. În 2026, utilizatorii sunt mai sensibili ca niciodată la întreruperi. Alege varianta subtilă (pop-up în colț) și testează atât pe desktop, cât și pe mobil înainte de a lăsa codul permanent.

Dacă vrei să îți îmbunătățești și alte aspecte ale blogului, nu uita să arunci un ochi la ghidurile noastre despre cum blochezi referrer spam în Google Analytics sau despre cum instalezi Disqus pentru comentarii moderne.

Ai reușit să instalezi pop-up-ul? Dacă ai întrebări sau vrei o variantă personalizată, lasă un comentariu mai jos. Succes!

---

Actualizat la: 3 aprilie 2026. Ghid testat pe template-uri Blogger standard și personalizate.