Ventana emergente en Blogger y WordPress en la parte inferior

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

¿Qué es una ventana emergente en el blog y para qué sirve?

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.

Código para poner una ventana emergente en Blogger y WordPress

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()&gt;=$(document).height()/5)
$(&quot;#spopup&quot;).show(&quot;slow&quot;);else $(&quot;#spopup&quot;).hide(&quot;slow&quot;);
});
function closeSPopup(){
$(&#39;#spopup&#39;).hide(&#39;slow&#39;);
}
</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

Mostrar un botón de suscripción de YouTube para tu blog

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:

• Nombre del canal o ID.
• Diseño.
• Tema.
• Conteo de suscriptores.

Después de configurarlo, copias el código y lo pegas donde esta el texto de ejemplo en la ventana emergente.

Poner el botón de seguir de Facebook en el blog

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:

• URL de la página de Facebook/Fanpage en la que quieres que te sigan.
• Personaliza tu botón entre el diseño, el ancho, tamaño y el tipo de la acción.

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.

Obtener el código del botón de seguir en Twitter para el blog

Para obtener el código del botón de Twitter, debes ir a la siguiente página -> clic aquí.

• Vas a seleccionar, botones de Twitter y te saldrán varias opciones de botones. En mi caso voy a elegir botón de seguir.
• Luego ingresas la URL de tu perfil de Twitter o ingresas tu usuario con @
• Y por último clic en el botón copiar código.

Ahora lo pegas en la ventana emergente. Es decir, en el texto de ejemplo.

⛔ Recomiendo leer:

• Empezar con un Blog Exitoso: 6 Consejos para lograrlo
• 5 Geniales Consejos para la Primera Entrada de un Blog
• Cómo posicionar un artículo del blog en Google con 300 Palabras
• 8 Grupos de Facebook más Populares para Blogger
• Los Colores Elegidos en mi Blog ¿Serán los Correctos?

En conclusión

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.