Si quieres agregar una ventana emergente en Blogger o en WordPress, mostrarlo en la parte inferior de tu blog. Y, además, que solo aparezca al hacer scroll. Aquí te tengo el código.
¡Hola! soy Gabriela de peengler.com. Te voy a explicar cómo añadir una ventana emergente en donde podrás mostrar un texto, imagen o botón de suscripción a tus redes sociales.
Sin más que decir, ¡Empecemos!
Clic en la imagen para ver el vídeo ↑ en YouTube
Es una ventana flotante que se puede mostrar en el centro, arriba o abajo de tu blog. También puede aparecer automáticamente sin tu permiso o solo aparecer cuando le das clic a un botón. Todo depende de cual ventana emergente apliques en tu sitio.
Para que la ventana emergente funcione bien en Blogger y en WordPress, debes colocar arriba de la etiqueta </body> el siguiente código:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script>
$(window).scroll(function(){
if($(document).scrollTop()>=$(document).height()/5)
$("#spopup").show("slow");else $("#spopup").hide("slow");
});
function closeSPopup(){
$('#spopup').hide('slow');
}
</script>
También necesitaras los estilos que podrás editarlo a tu gusto, copia y pega lo siguiente debajo del código anterior.
<style>
#spopup {
background: #f3f3f3;
border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
-moz-box-shadow: inset 0 0 7px #949393;
-webkit-box-shadow: inset 0 0 7px #949393;
box-shadow: inset 0 0 7px #949393;
padding: 12px 14px 12px 14px;
width: 230px;
position: fixed;
bottom: 13px;
right: 2px;
display: none;
z-index: 9999999;
}
#spopup iframe{
height: 50px!important;
}
.close-popup{
position: absolute;
top: 14px;
right: 10px;
color: #555;
font-size: 12px;
font-weight: bold;
font-family: arial;
}
</style>
Y por último para que tu ventana emergente se pueda visualizar en tu blog de Blogger o de WordPress. Pega el siguiente código abajo de los estilos.
<div id='spopup' style='display: none;'>
<!--boton de cerrar -->
<a class='close-popup' href='javascript:void(0);' onclick='return closeSPopup();'>X</a>
<!--contenido de la ventana emergente-->
TEXTO DE EJEMPLO
<!--fin del contenido de la ventana emergente-->
</div>
Nota: Lo que quieras mostrar, debes incluirlo dentro del comentario contenido de la ventana emergente. Cualquier duda mírate el vídeo tutorial
Para incluir un botón de suscríbete al canal de YouTube, dirigete a la siguiente página → clic aquí.
Allí podrás configurar un botón de suscripción, ingresando:
Después de configurarlo, copias el código y lo pegas donde esta el texto de ejemplo en la ventana emergente.
Puedes configurar tu botón de me gusta de Facebook en la siguiente página → clic aquí
En configurador del botón “Me gusta” vas agregar lo siguiente:
Tendrás una vista previa del botón. Y si te gusta como se ve, haz clic en obtener código. Te saldrá una ventana con 2 códigos.
El primero lo agregas antes de la etiqueta </body> y el segundo código pégalo en la ventana emergente. Es decir, en el texto de ejemplo.
Para obtener el código del botón de Twitter, debes ir a la siguiente página -> clic aquí.
Ahora lo pegas en la ventana emergente. Es decir, en el texto de ejemplo.
Esta es una de las maneras de añadir una ventana emergente en tu blog de Blogger o de WordPress. Por supuesto que puedes sacarle más provecho y personalizarlo.
También quería agradecer a codexworld por compartir el código.
Dime ¿tienes alguna duda? Déjalo en los comentarios.
Únete a la Zona VIP🔥
Descubre todo el contenido que te ofrece y ser parte de mi comunidad.
Gabriela Laya
Me gusta el Diseño Web, Crear plantillas para Wordpress y Blogger y todo lo relacionado a estas 2 plataformas de Blogs.