Quién no se ha encontrado con un Pop Up o también conocido como banner flotante en alguna web o blog? Yo creo que todos.
Pero si tu aún no sabes a lo que me refiero dejame explicarte un poco. Un Pop Up o banner flotatante es como un aviso/banner que puede tener cualquier tipo de contenido promocional o informativo para el usuario de una web o blog. Se suele utilizar mucho para obtener datos de los usuarios con un formulario de suscripción.
En Blogger es un poco tedioso poder crear un Pop Up ya que no viene por defecto como un widget, es por ese motivo que hoy voy a compartir un tutorial de como crear un banner flotante o Pop Up para Blogger desde cero. En este Pop Up podrás colocar un formulario de suscripción, simplemente un texto informativo o puedes darle el uso que desees de acuerdo a tus necesidades.
Antes de empezar
Lo primero que debemos de hacer es comprobar que nuestro blog en blogger tenga integrado la líbreria de jQuery. Esta librería es importante para el funcionamiento de nuestro pop up.
Para poder comprobar si nuestro blog tiene jQuery podemos revisar este tutorial Cómo saber si mi blog tiene jQuery y luego podemos continuar con el siguiente paso.
Instalar Pop Up en Blogger
Como ya hemos comentado antes este pop up funciona con jQuery así que como ya lo tenemos integrado en nuestro blog vamos a agregar un código de configuración para nuestro Pop Up.
Nos vamos a Tema > Editar HTML y buscamos </head>, justo encima de esta etiqueta pegamos el siguiente código:
<script>
//<![CDATA[
jQuery(document).ready(function($){
$("#btn-popup-abrir" ).on("click", function() {
$("#popup").fadeIn();
});
$("#btn-popup-cerrar").on("click", function() {
$("#popup").fadeOut();
});
});
//]]>
</script>
Agregar estilos a nuestro Pop Up
Ya tenemos configurado nuestro Pop Up o banner flotante ahora queda agregar los estilos.
Tenemos diferentes formas de agregar CSS en Blogger, en HoyGeek tenemos un tutorial donde explicamos esto y puedes verlo aquí.
Agregamos el siguiente código:
#popup { display: none; }
#popup .popup-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; }
#popup .popup-overlay {
background-color: rgba(0, 0, 0, 0.6); /** Color fondo overlay **/
}
#popup .popup-content {
max-width: 750px; /** Ancho del contenido **/
background-color: #f8f8f8; /** Color fondo contenido **/
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15); /** Sombra contenido **/
border-radius: 10px; /** Borde redondeado contenido **/
padding: 20px 20px 36px 20px; /** Espacio interior contenido **/
text-align: center; /** Alineación contenido **/
}
#popup .popup-content__cerrar {
cursor: pointer;
display: block;
font-size: 16px; /** Tamaño icono cerrar **/
line-height: 16px; /** Valor igual que font size **/
color: #bbb; /** Color icono cerrar **/
text-align: right; /** Alineación icono cerrar **/
transition: all ease 0.3s;
}
#popup .popup-content__cerrar:hover {
color: #c00; /** Color icono cerrar al pasar cursor **/
}
Instalar Pop Up o Banner Flotante en la home de Blogger
Para mostrar nuestro Pop Up solo en la home de nuestro blog en Blogger primero debemos de agregar un botón que activará nuestro pop up.
Para ello nos vamos a Tema > Editar HTML luego entre las etiquetas <body> y </body> agregamos el siguiente código:
<b:if cond="data:view.isHomepage">
<a id="btn-popup-abrir">Ver PopUp</a>
</b:if>
Luego de agregar el botón, debemos agregar el pop up o banner flotante, para ello dentro del mismo Editor HTML buscamos la etiqueta </body> y justo encima de ella pegamos lo siguiente:
<b:if cond="data:view.isHomepage">
<div id="popup">
<div class="popup-overlay">
<div class="popup-content">
<span id="btn-popup-cerrar" class="popup-content__cerrar"><i class="fas fa-times-circle"></i></span>
<!-- Aqui va el contenido -->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti accusantium illum incidunt voluptates, unde quisquam cum tempore reprehenderit, ratione maxime atque maiores neque magni dignissimos ipsum optio nisi assumenda aliquam.</p>
</div>
</div>
</div>
</b:if>
Y si quiero instalar mi Pop Up en una publicación de Blogger
Si queremos tener nuestro Pop Up en un post o publicación de Blogger debemos dirigirnos a la entrada, donde queremos tener el pop up, y nos vamos a la vista de HTML y agregamos lo siguiente:
<a id="btn-popup-abrir">Ver PopUp</a>
Luego debemos de agregar la estructura del Pop Up, justo debajo del botón que agregamos antes pegamos el siguiente código:
<div id="popup">
<div class="popup-overlay">
<div class="popup-content">
<span id="btn-popup-cerrar" class="popup-content__cerrar"><i class="fas fa-times-circle"></i></span>
<!-- Aqui va el contenido -->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti accusantium illum incidunt voluptates, unde quisquam cum tempore reprehenderit, ratione maxime atque maiores neque magni dignissimos ipsum optio nisi assumenda aliquam.</p>
</div>
</div>
</div>
¿Tienes alguna duda?