Abrir Ventana Con Shadowbox

Abrir ventana al cargar el blog con Shadowbox
Desde que vimos cmo usar ventanas modales con Shadowbox muchos son los que han tenido la inquietud por saber cmo hacer que estas ventanas modales puedan abrirse al cargar el blog sin necesidad de hacer click en ningn 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 pondramos en una ventana popup pero con la elegancia que Shadowbox sabe dar. Si no tienes Shadowbox primero sigue los pasos de instalacin que se explican en esta entrada. Y luego, ya que lo tengas puesto, o si ya lo usas desde antes, slo agrega antes de </head> lo siguiente: <b:if cond='data:blog.url == data:blog.homepageUrl'> <script type='text/javascript'>
<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: 'Cdigo HTML de lo que se mostrar', height: 300, // Alto de la ventana modal width: 500 // Ancho de la ventana modal }); } setTimeout('Shadowbox.close()', 10000); // ]]> </script> </b:if>
Luego, busca la etiqueta <body> y cmbiala por esta lnea: <body onload='AlertMessage();'>
Si usas una plantilla del Diseador de Plantillas de Blogger entonces busca esta lnea: <body expr:class='"loading" + data:blog.mobileClass'> Y cmbiala por esta otra: <body expr:class='"loading" + data:blog.mobileClass' onload='AlertMessage();'>
Por ltimo slo 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 animacin en Flash (SWF), etc. entonces slo agrega en donde se indica en color azul el cdigo HTML de lo que quieres mostrar. Por ejemplo, si quieres mostrar una imagen en la ventana modal entonces slo agrega el cdigo normal que usaras en una imagen: <a href="URL del enlace"><img src="URL de la imagen"/></a> O si fuera una DIV con un texto, o algo ms elaborado entonces sera as, por ejemplo: <div style="padding:20px; color:#fff;">Lorem ipsum dolor sit amet</div> Y lo mismo sera si quisieras mostrar un archivo en Flash (SWF), slo agrega el cdigo correspondiente y listo.
Luego, en color verde se indica dnde se cambia el ancho y alto de la ventana modal. La lnea en color rojo es para que la ventana se cierre sola en determinado tiempo, sino quieres que se cierre automticamente entonces elimnala, pero si quieres que s se cierre sola entonces ah puedes cambiarle el tiempo que permanecer abierta en milisegundos (se cambia el nmero 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.
Tambin se puede mostrar contenido un poco ms "complejo", aunque ste mtodo no funciona del todo bien en Google Chrome. Aun as, si lo quieres hacer, debers crear un documento HTML que incluir todo lo que quieres mostrar, ser como una mini pgina 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 tambin. 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 pgina Web, as que probablemente te aparezca un mensaje de advertencia donde te dir que ests guardando el archivo en otro formato, slo da click en S para guardar el archivo. Sube ese archivo HTML a un hosting y obtn su URL, esa URL es la que pondrs en donde se indica en color azul. Y donde dice player: 'html', cmbialo por player: 'iframe',
Puede parecer complicado esto ltimo de armar el contenido "complejo" pero no lo es tanto, obviamente si no ests 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 preguntarn) que no se mostrar una vez y ya, sino que se mostrar slo en la portada del blog. Si quieras que se muestre en cualquier parte del blog entonces elimina la primera y ltima lnea del cdigo que estn en cursiva. Si quisieras que slo se muestre en las pginas estticas, o slo en las entradas, o en una parte especfica del blog entonces elimina de igual modo la primera y ltima lnea y en su lugar pon las lneas del cdigo condicional que sea ms apropiado para ti.

Abrir Ventana Con Shadowbox

Încărcat de

Informații document

Descriere originală:

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Abrir Ventana Con Shadowbox

Încărcat de

Drepturi de autor:

Formate disponibile

Abrir ventana al cargar el blog con Shadowbox

Para ello abre el Bloc de notas y dentro de l pega esto:

S-ar putea să vă placă și