Desde que vimos cómo usar ventanas modales con Shadowbox muchos son los que han tenido la inquietud por saber cómo hacer que estas ventanas modales puedan abrirse al cargar el blog sin necesidad de hacer click en ningún enlace, tal como han podido verlo an ingresar a esta entrada.
Éstas pueden resultar muy útiles para mostrar publicidad, avisos, recordatorios, o cualquier cosa que pondríamos en una ventana popup pero con la elegancia que Shadowbox sabe dar.
Si no tienes Shadowbox primero sigue los pasos de instalación que se explican en esta entrada.
Y luego, ya que lo tengas puesto, o si ya lo usas desde antes, sólo agrega antes de </head> lo siguiente:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script type='text/javascript'>
// <![CDATA[
Shadowbox.init({
language: "es",
players: ['html']
});
function AlertMessage()
{
Shadowbox.open({
player: 'html',
content: 'Código HTML de lo que se mostrará',
height: 300, // Alto de la ventana modal
width: 500 // Ancho de la ventana modal
});
}
setTimeout('Shadowbox.close()', 10000);
window.onload = AlertMessage;
// ]]>
</script>
</b:if>
Por último sólo hay que colocar lo que queremos mostrar, eso se agrega en donde se indica en color azul. Si quieres agregar una imagen con enlace, o una animación en Flash (SWF), etc. entonces sólo agrega en donde se indica en color azul el código HTML de lo que quieres mostrar.
Por ejemplo, si quieres mostrar una imagen en la ventana modal entonces sólo agrega el código normal que usarías en una imagen:<a href="URL del enlace" target="_blank"><img src="URL de la imagen"/></a>O si fuera una DIV con un texto, o algo más elaborado entonces sería así, por ejemplo:
<div style="padding:20px; color:#fff;">Lorem ipsum dolor sit amet</div>Y lo mismo sería si quisieras mostrar un archivo en Flash (SWF), sólo agrega el código correspondiente y listo.
Luego, en color verde se indica dónde se cambia el ancho y alto de la ventana modal.
La línea en color rojo es para que la ventana se cierre sola en determinado tiempo, sino quieres que se cierre automáticamente entonces elimínala, pero si quieres que sí se cierre sola entonces ahí puedes cambiarle el tiempo que permanecerá abierta en milisegundos (se cambia el número en negrita), así como está tardará abierta 10 segundos.
Pero ojo, no son 10 segundos desde que aparece la ventana modal sino desde que se ingresa al blog, así que si tu blog es muy tardado y la ventana modal tarda un poco en cargar entonces podrá verse por menos tiempo o si es mucho el tiempo de carga simplemente no se verá.
También se puede mostrar contenido un poco más "complejo", aunque éste método no funciona del todo bien en Google Chrome. Aun así, si lo quieres hacer, deberás crear un documento HTML que incluirá todo lo que quieres mostrar, será como una mini página Web.
Para ello abre el Bloc de notas y dentro de él pega esto:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
...Aquí van los estilos CSS...
</style>
</head>
<body>
...Aquí pegamos el contenido que queremos mostrar...
</body>
</html>
Ahí donde se indica pega el contenido que quieres, y si requiere de estilos se colocan donde se indica también.
Cuando termines ve a Archivo | Guardar como... y ponle el nombre popup.html o con cualquier otro nombre pero al final deberá decir .html
Cuando termines ve a Archivo | Guardar como... y ponle el nombre popup.html o con cualquier otro nombre pero al final deberá decir .html
Luego cambia el Tipo a Todos los archivos, y dale Guardar.
Con esto lo estaremos guardando en formato de página Web, así que probablemente te aparezca un mensaje de advertencia donde te dirá que estás guardando el archivo en otro formato, sólo da click en Sí para guardar el archivo.
Sube ese archivo HTML a un hosting y obtén su URL, esa URL es la que pondrás en donde se indica en color azul.
Y donde dice player: 'html', cámbialo por player: 'iframe',Puede parecer complicado esto último de armar el contenido "complejo" pero no lo es tanto, obviamente si no estás muy familiarizado (a) con el HTML lo mejor es poner algo muy sencillo como la URL de una imagen y problema resuelto.
Es importante aclarar (porque sé que me lo preguntarán) que no se mostrará una vez y ya, sino que se mostrará sólo en la portada del blog. Si quieras que se muestre en cualquier parte del blog entonces elimina la primera y última línea del código que están en cursiva.
Si quisieras que sólo se muestre en las páginas estáticas, o sólo en las entradas, o en una parte específica del blog entonces elimina de igual modo la primera y última línea y en su lugar pon las líneas del código condicional que sea más apropiado para ti.
No hay comentarios:
Publicar un comentario