cómo colocar una ventana emergente en Blogger mediante un widget

Ventana Emergente para Blogger que podemos colocar en un Widget de nuestro Blog. En esta ocasión vamos a añadir una ventana de suscripción de youtube, facebook, ventana Aviso, que le saldrá a a los lectores del blog. Podemos utilizar este widget funcional para mostrar diferentes opciones.

Personalmente no es un recurso que me guste usar, por ser intrusivo, a veces da impresión de asustar al visitantes del blog.

Sin embargo nuestro pop-up o ventana emergente puede resultar un gran beneficio para nuestros visitantes, así como para nosotros de manera que no resulte tan agresivo si no un recordatorio, o incluso un regalo.

Podemos aportar un montón de cosas, desde pequeños avisos, botones de suscripciones, redes sociales . Tenemos varios beneficios para llegar a nuestros visitantes y poder captar su atención con este tipo de anuncios.

Implementar Ventana Emergente para Blogger en Widget

Entrar en Blogger / Diseño / Crear un nuevo Gadget e incluir el siguiente código.

<style>
.popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.85);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:999999;padding:15px;box-sizing:border-box}
.popup-card{position:relative;width:100%;max-width:360px;background:#fff;border:10px solid #162032;border-radius:16px;padding:42px 16px 16px;box-shadow:0 25px 50px -12px rgba(0,0,0,.7);text-align:center;box-sizing:border-box}
.popup-close{position:absolute;top:10px;right:10px;width:30px;height:30px;margin:0;padding:0;background:#162032;color:#9ca3af;border:none;border-radius:50%;font-size:18px;font-weight:bold;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;outline:none}
.popup-close:hover{background:#ef4444;color:#fff}
.popup-body img,.popup-body iframe{max-width:100%;height:auto;border-radius:8px;display:block;margin:0 auto}
</style>
<div id="aviso_off" class="popup-overlay">
<div class="popup-card">
<button type="button" class="popup-close" onclick="document.getElementById('aviso_off').style.display='none';">&times;</button>
<div class="popup-body">

      <!-- ============================================= -->

      <a href="URL_DE_TU_PAGINA" target="_blank" rel="sponsored nofollow">
        <img src="URL_DE_TU_IMAGEN" alt="Publicidad" />
      </a>

      <!-- ============================================= -->

    </div>
  </div>
</div>

Debemos cambiar el siguiente código por el código de nuestro banner, facebook, youtube, aviso, etc. (PD. Si se desea poner un banner con enlace url viene solo para rellenar con nuestro enlace url e imagen caso contrario eliminar)
<a href="URL_DE_TU_PAGINA" target="_blank" rel="sponsored nofollow"> <img src="URL_DE_TU_IMAGEN" alt="Publicidad" /> </a>

- Crear Caja de Facebook

- Crear Caja de Youtube