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.
Estas 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 comments:
Post a Comment