ventana pop up en blogger

Modo rápido y fácil: código javascript onclick

Cada vez que quieras que se abra una ventana pop up usa este código dentro de la entrada o donde lo quieras usar:

<a href="Dirección a la que quieres ir" onclick="window.open(this.href, this.target, 'toolbar=0 , location=1 , status=0 , menubar=1 , scrollbars=0 , resizable=1 ,left=150pt,top=150pt,width=800px,height=600px'); return false;" target="popup"> texto que quieras poner como enlace </a>

Sólo cambia el 0 por un 1 si es que quieres mostrar algo de lo anterior. El tamaño de la ventana lo puedes cambiar donde dice width (ancho) y height (alto). También la posición donde se abre.

De igual forma agrega la URL del documento que abrirá y listo. El resultado será exactamente igual, pero el método es más sencillo ya que no necesitamos agregar nada en la plantilla.


También puedes hacer que se abra mediante un botón cambiando lo anterior por esto:

<a href="direccion a la que quiero ir" onclick="window.open(this.href, this.target, 'toolbar=0 , location=1 , status=0 , menubar=1 , scrollbars=0 , resizable=1 ,left=150pt,top=150pt,width=800px,height=600px'); return false;" target="popup"> <input type="submit" name="button" value="TEXTO DEL BOTÓN" style="color: #000000; background-color: #81BEF7"/> <a/>

O incluso con una imagen:

<a href="Dirección a la que quieres ir" onclick="window.open(this.href, this.target, 'toolbar=0 , location=1 , status=0 , menubar=1 , scrollbars=0 , resizable=1 ,left=150pt,top=150pt,width=800px,height=600px'); return false;" target="popup"> <img src="URL de la imagen" /> </a>

Ejemplos

• PDF con enlace con texto

Solucionar cubo rubik 1

<a href="http://www.euskalnet.net/el8tumbado/movsec/rubik/CUBO_RUBIK_el8tumbado.pdf" onclick="window.open(this.href, this.target, 'toolbar=0 , location=1 , status=0 , menubar=1 , scrollbars=0 , resizable=1 ,left=150pt,top=150pt,width=800px,height=600px'); return false;" target="popup"> Solucionar cubo rubik 1 </a>

• PDF enlazado con imagen

<a href="https://www.felti.org/sites/default/files/archivos/ponencia/solucioncuborubik.pdf" onclick="window.open(this.href, this.target, 'toolbar=0 , location=1 , status=0 , menubar=1 , scrollbars=0 , resizable=1 ,left=150pt,top=150pt,width=800px,height=600px'); return false;" target="popup"> <img alt="Solución cubo de rubik 2" src="https://img.blogs.es/anexom/wp-content/uploads/2018/06/Paso-7-caso-1.jpg" title="Solución cubo de rubik 2" /> </a>

• PDF enlazado con botón

<a href="https://www.microsiervos.com/docs/rubik.pdf" onclick="window.open(this.href, this.target, 'toolbar=0 , location=1 , status=0 , menubar=1 , scrollbars=0 , resizable=1 ,left=150pt,top=150pt,width=800px,height=600px'); return false;" target="popup"> <input name="button" style="background-color: #81bef7; color: black;" type="submit" value="Solucion cubo de rubik 3" /> </a>

• Imagen en popup con un texto

Playa de Torimbia

<a href="https://media-cdn.tripadvisor.com/media/photo-s/06/7d/22/c5/torimbia-desde-el-aparcamiento.jpg" onclick="window.open(this.href, this.target, 'toolbar=0 , location=1 , status=0 , menubar=1 , scrollbars=0 , resizable=1 ,left=150pt,top=150pt,width=800px,height=600px'); return false;" target="popup"> Playa de Torimbia </a>

• Vídeo de youtube en popup, desde una imagen

Necesitaremos la dirección que youtube proporciona para incrustar el vídeo pulsando en "compartir" y luego en "insertar"

<a href="https://www.youtube.com/embed/nK7iv2Sgo5o" onclick="window.open(this.href, this.target, 'toolbar=0 , location=1 , status=0 , menubar=1 , scrollbars=0 , resizable=1 ,left=150pt,top=150pt,width=800px,height=600px'); return false;" target="popup"> <img border="0" data-original-height="800" data-original-width="754" height="320" src="https://www.fanacopy.com.uy/wp-content/uploads/2013/05/asi-se-hace-2-965x1024.jpg" width="302" /> </a>

• Animación flash en popup

Atención: Este ejemplo funcionara o no, dependiendo de la configuración del navegador, debido al bloqueo de archivos flash, pero con otro tipo de archivos no debería haber problemas como hemos visto en ejemplos anteriores.

Central termo-solar

<a href="https://dl.dropboxusercontent.com/s/oowfds5c6bjff8y/UNESA%20termosolar.swf" onclick="window.open(this.href, this.target, 'toolbar=0 , location=1 , status=0 , menubar=1 , scrollbars=0 , resizable=1 ,left=150pt,top=150pt,width=800px,height=600px'); return false;" target="popup"> Central termo-solar </a>



Método elegante: Javascript en el CSS del blog

Primero hay que ir a Plantilla | Edición de HTML y pegar antes de </head> lo siguiente:

<!-- Ventanas Pop up --> <script> function popUp(URL) { day = new Date(); id = day.getTime(); eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=600,height=400,left=212,top=184');"); } </script>

Puedes cambiar estos valores si quieres mostrar lo siguiente:
Toolbar (barra de herramientas)
Scrollbars (barras de desplazamiento)
Location (barra de direcciones)
Statusbar (barra de estado)
Menubar (barra de menú)
Resizable (modificar tamaño de la ventana)


Ahora en una entrada, o elemento HTML/Javascript, hay que poner lo siguiente:

<a href="javascript:popUp('URL del documento')">Abrir ventana PopUp</a>

Sólo cambia la URL del documento por la dirección donde tengas alojada la imagen, el formulario o la página que se vaya a abrir en la ventana PopUp.

Fuentes:
Lawebera
Ciudadblogger