Tutorial: Cómo crear una caja pop up multifuncional en tu sitio web

elkin8517 · 7 Dic 2012

Hola amigos esta es una caja pop up muy sencilla que tiene muchas funcionalidades ya que puedes agregar publicidad, videos, imagenes, yo lo utilizo para colocar un fanbox de facebook y algunas veces lo agrego en una entrada para resaltar un partido que estoy transmitiendo, mira el ejemplo en mi sitio extreme pc futbol,

agregar el siguiente codigo antes del cierre </head>

<link href='http://dl.dropbox.com/u/62785484/scripts/shadowbox.css' rel='stylesheet' type='text/css'/>
<script src='http://dl.dropbox.com/u/62785484/scripts/shadowbox.js' type='text/javascript'/>
<script type='text/javascript'>
Shadowbox.init({
overlayColor: "#000",
overlayOpacity: "0.6",
});
</script>

<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: 'AÑADIR CODIGO HTML O IFRAME',
height: 300, // Alto de la ventana modal
width: 500 // Ancho de la ventana modal
});
}
setTimeout('Shadowbox.close()', 10000);
window.onload = AlertMessage;
// ]]>
</script>
</b:if>

si desean colocar también el chat tienen que registrarse en el sitio de envolve y agragar el codigo que le genera antes del cierre de la etiqueta </head>

ejemplo del codigo del chat envolve

<script type="text/javascript">
var envoSn=96682;
var envProtoType = (("https:" == document.location.protocol) ? "https://" : "http://");
document.write(unescape("%3Cscript src='" + envProtoType + "d.envolve.com/env.nocache.js' type='text/javascript'%3E%3C/script%3E"));
</script>

espero les guste y le puedan sacar provecho a estos pequeños artilugios

Carlos Arreola · 7 Dic 2012

Tutorial aprobado y agregado al listado de tutoriales.

Addex · 7 Dic 2012

Gracias por el aporte 😉

raveny · 7 Dic 2012

Gracias, justo uno de los tutoriales que estaba buscando 🙂

mkal · 30 Dic 2012

Bonita y liviana que es lo principal. vere si cambio a esta.

pugozo24 · 2 Mar 2013

seve muy bueno, lo probare

nickuad · 4 Mar 2013

Pregunta:
si a esta caja pop up esto le pongo anuncios adsense? esta permitido?

Koletta · 26 Mar 2013

Lo voy a probar!

GatoRyuzaki · 26 Mar 2013

Gracias por el aporte 😀 aunque enveces son algo molestos los popups si no se aprecia bien en donde se pueden cerrar.
Saludos :welcoming:

milusito · 9 Abr 2013

Se ve bastante bien, a ver que tal

Addex · 9 Abr 2013

gracias por el aporte.

garoto · 1 Jun 2013

Me puede funcionar en wordpress tambien?

alejorubio07 · 2013-08-11T14:32:56-0500

gracias por compartir

seadincperu · 2013-08-11T14:39:16-0500

Muy bueno :encouragement:

YKMedia · 2013-08-14T01:48:28-0500

Gracias por el tutorial. Ahorita lo probaré en uno de mis blogs.

virux · 16 Sep 2013

Si funciono!

Gracias :ghost:

jc7 · 30 Sep 2013

Buen aporte gracias!!

abercrombie · 3 Oct 2013

Gracias por el aporte. Lo probaré para ver como se ve :encouragement:

YKMedia · 16 Oct 2013

Tienes una demo ?

el tigre · 20 Oct 2013

Llego la hora de probar Gracias.

Tutorial: Cómo crear una caja pop up multifuncional en tu sitio web

elkin8517

Carlos Arreola

Addex

raveny

mkal

pugozo24

nickuad

Koletta

GatoRyuzaki

milusito

Addex

garoto

alejorubio07

seadincperu

YKMedia

virux

jc7

abercrombie

YKMedia

el tigre

Temas similares