By
Hola chicos, ¿qué tal? Hoy regreso para compartirles un tutorial sumamente rápido para sus blogs, y es que hoy aprenderemos cómo agregar una ventana emergente a nuestro blog de Blogger que se abra al entrar a cualquier entrada y página de nuestro sitio.
Si bien este tipo de recursos pueden ser sumamente funcionales, lo cierto es que muchos piensan que es un dolor de cabeza el poder integrarlos a nuestras web, pero no es así, y aquí se los demuestro.
El siguiente recurso es una solución a una pregunta de Google, así que sólo lo tomé y le agregué la imagen, ya que el código original sólo muestra un mensaje de texto en lugar de una imagen, algo que hace más llamativa la ventana emergente y hace que se vea así:
Para lograr este efecto tienes que copiar este código de aquí abajo en un gadget nuevo de HTML (Diseño → Añadir un gadget → HTML) y pegarlo, prestando atención a los códigos remarcados en color:
<!-- AVISO OFF --> <div id="aviso_off" style="display:block; z-index:99999;position:fixed;top:0px;left:0px;overflow:visible;height:100%;width:100%;background:rgba(255,255,255,.7);"> <div style="z-index:999999;position:fixed; overflow:visible; top:50%; left:50%; width:320px; margin-top:-160px; margin-left:-160px; background:#ffffff; color:#000000;font-size: 22px;border-radius: 20px; padding:20px;box-sizing:border-box; text-align:left;border: 2px solid orange;"> <a href="javascript:void(0);" style="float:right;padding:0 6px;box-sizing:border-box;background:#333;text-decoration:none;color:#fff;border-radius:5px;" onclick="document.getElementById('aviso_off').style.display='none';"><b>X</b></a><a href="ENLACE-AL-QUE-REDIRIGE" target="_blank"><img src="ENLACE-DE-LA-IMAGEN.jpg" alt="imgbox"/></a></div></div>
Como puedes ver, en el código hay dos elementos resaltados:
El enlace al que redirige es a donde tus lectores serán enviados cuando den clic en la imagen de la ventana
El enlace de la imagen, preferentemente PNG o JPG, que es la que se mostrará en la ventana al abrirse
Contorno de la ventana, lo puedes modificar escribiendo en inglés el color de tu preferencia
Color de fondo, por default, está establecido el color blanco, pero lo puedes cambiar agregando el color de tu elección respetando el formato de seis dígitos que puedes generar en www.color-hex.com.
Ten en cuenta que esta ventana se abrirá en TODAS las partes de tu blog, es decir: al inicio, en las entradas y también en las páginas, por lo que, si crees que será una ventana muy repetitiva, lo mejor sería que especifiques, a través de un código, en qué partes quieres que aparezca, agregando alguna condicional de Blogger, de las que puedes conocer más aquí.
Si tienes alguna pregunta, no dudes en dejarla en los comentarios de esta entrada, ¡Saludos!
¡Hasta la próxima!
Publicar un comentario