Pop up window for blogger

Τα αναδυόμενα παράθυρα (pop-up windows) αποτελούν ένα από τα πιο ισχυρά εργαλεία για κάθε δημιουργό περιεχομένου στην πλατφόρμα του Blogger. Είτε θέλετε να αυξήσετε τους εγγεγραμμένους στο newsletter σας, είτε να προωθήσετε μια συγκεκριμένη προσφορά ή μια σημαντική ανάρτηση, ένα σωστά σχεδιασμένο pop-up μπορεί να εκτοξεύσει το conversion rate του ιστολογίου σας.

Γιατί να χρησιμοποιήσετε Pop-up στο Blogger σας;

• Αύξηση Αλληλεπίδρασης: Κατευθύνει την προσοχή του αναγνώστη ακριβώς εκεί που θέλετε.

• Συλλογή Leads: Ιδανικό για να μεγαλώσετε τη λίστα των email σας.

• Προώθηση Περιεχομένου: Μπορείτε να προτείνετε παλιότερες δημοφιλείς αναρτήσεις.

Τρόποι Υλοποίησης

Για να προσθέσετε ένα pop-up window στο Blogger,προσθέστε ένα widget τύπου HTML/JavaScript από την ενότητα Διάταξη (Layout) τον κωδικό πιο κάτω 👇.

Το μόνο που έχετε να κανετε ,ειναι να αλλάξετε τα LINKS με χρώματα 

........................................................................................................................................

<div id="gloobtop-galini-popup" style="display:none;">

  <div class="ggp-overlay"></div>

  <div class="ggp-window" role="dialog" aria-modal="true">

    <button class="ggp-close" type="button" aria-label="Κλείσιμο">&times;</button>

    <a href="https://PUT YOUR SITE HERE.com/" target="_blank" rel="noopener noreferrer">

      <img

        src="https://gloobtop.blogspot.com/2026/10/pop-up-window-for-blogger.html"

        alt="NAME SITE">

    </img

></a>

    <a class="ggp-button" href="https://PUT YOUR SITE HERE.com/" target="_blank" rel="noopener noreferrer">

      VISIT THE WEBSITE

    </a>

  </div>

</div>

<style>

#gloobtop-galini-popup,

#gloobtop-galini-popup * {

  box-sizing: border-box;

}

#gloobtop-galini-popup {

  position: fixed;

  inset: 0;

  z-index: 2147483647;

  font-family: Arial, sans-serif;

}

#gloobtop-galini-popup .ggp-overlay {

  position: absolute;

  inset: 0;

  background: rgba(0,0,0,.78);

}

#gloobtop-galini-popup .ggp-window {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%,-50%);

  width: 500px;

  max-width: calc(100vw - 30px);

  padding: 12px;

  background: white;

  border-radius: 12px;

  box-shadow: 0 12px 45px rgba(0,0,0,.5);

  text-align: center;

}

#gloobtop-galini-popup .ggp-close {

  position: absolute;

  top: -13px;

  right: -13px;

  width: 34px;

  height: 34px;

  border: 2px solid white;

  border-radius: 50%;

  background: #d71920;

  color: white;

  font-size: 25px;

  cursor: pointer;

}

#gloobtop-galini-popup img {

  display: block;

  width: 100%;

  height: auto;

  max-height: 65vh;

  object-fit: contain;

  border-radius: 6px;

}

#gloobtop-galini-popup .ggp-button {

  display: block;

  margin-top: 12px;

  padding: 13px 10px;

  border-radius: 7px;

  background: #147a46;

  color: white;

  font-size: 16px;

  font-weight: bold;

  text-decoration: none;

}

@media(max-width:440px) {

  #gloobtop-galini-popup .ggp-window {

    width: calc(100vw - 30px);

  }

}

@media screen and (max-width: 600px) {

  #gloobtop-galini-popup .ggp-window {

    width: calc(100vw - 36px);

    max-width: 400px;

    max-height: 90vh;

    overflow-y: auto;

    padding: 10px;

  }

  #gloobtop-galini-popup img {

    width: 100%;

    height: auto;

    max-height: 60vh;

    object-fit: contain;

  }

  #gloobtop-galini-popup .ggp-button {

    font-size: 15px;

    padding: 12px 8px;

  }

}

</style>

<script type="text/javascript">

//<![CDATA[

(function () {

  function initGaliniPopup() {

    var popup = document.getElementById('gloobtop-galini-popup');

    if (!popup || popup.getAttribute('data-initialized') === '1') return;

    popup.setAttribute('data-initialized', '1');

    var closeButton = popup.querySelector('.ggp-close');

    var overlay = popup.querySelector('.ggp-overlay');

    function closePopup() {

      popup.style.display = 'none';

    }

    closeButton.addEventListener('click', closePopup);

    overlay.addEventListener('click', closePopup);

    document.addEventListener('keydown', function (e) {

      if (e.key === 'Escape') closePopup();

    });

    window.setTimeout(function () {

      popup.style.display = 'block';

    }, 1500);

  }

  if (document.readyState === 'loading') {

    document.addEventListener('DOMContentLoaded', initGaliniPopup);

  } else {

    initGaliniPopup();

  }

})();

//]]>

</script>