POP UP! Abrir una ventana Emergente en Blogger - BloggerS Look
BloggerS Look

INSPITATION AND CREATIVITY IN SOCIAL NETWORKS

POP UP! Abrir una ventana Emergente en Blogger

Share This
Hola compañeros blogueros, a continuación les mostrare como abrir sus propias ventanas emergentestambién conocidas como pop up!, si no sabes te doy un ejemplo: como bien lo dice el nombre la ventana emergente al dar click a un enlace por ejemplo abre una nueva ventana del navegador a parte de la que ya esta abierta, esto mas que todo cuando se necesita denotar alguna información importante, función o simplemente para la comodidad del lector. 
Aquí te doy un ejemplo ilustrativo de una pop up en funcionamiento

Ventanas abriendo un vídeo de youtube:

También puedes ver como ejemplo los botones sociales para compartir que tengo, le das click y despliegan las ventanas emergentes. Así, se pueden abrir todo tipo de cosas, como una imagen, otra pagina, un enlace de descarga, en fin mucha utilidades.

Mira este ejemplo abriendo un simple enlace: Abrir enlace 

Puedes ver el procedimiento también en vídeo si prefieres:

Ver tutorial

No siendo mas procedamos a implementar el código, en tu entrada en el apartado HTML pega este código:

<a href="javascript:void(0);" onclick="window.open('URL que abrira',  'popup', 'top=100, left=200, width=853, height=480, toolbar=NO, resizable=NO, Location=NO, Menubar=NO,  Titlebar=No, Status=NO')" rel="nofollow">Abrir enlace</a>


Bien como vieron solo peguen ese código y cambien lo que dice abrir enlace por el texto que quieran mostrar y donde dice URL que abrirá colocan el enlace que se abrirá en la ventana emergente, también pueden cambiar los valores en color verde para cambiar el tamaño de la ventana si quieren.

Para abrir vídeos de Youtube pop up


  1. Para abrir vídeos de youtube usamos este código en la parte donde dice "URL que abrirá":

  2. http://www.youtube.com/watch_popup?v=xJtBYAKBByk

  3. La parte en rojo corresponde a la ID del vídeo, cuando tengas tu vídeo copia lo que esta después del "=" y lo reemplazas en en código.

Abrir la ventana emergente con una imagen.

Ademas de esto también podemos mostrar una imagen, que al darle click abrirá la ventana emergente, miren este ejemplo:

Solo cambian en el codigo inicial lo que dice Abrir enlace por este codigo:

<img src="URL de la imagen" />

ORIGEN DEL ARTICULO:  http://www.inovablog.com/2015/12/pop-up-abrir-ventana-emergente.html

No hay comentarios:

Publicar un comentario

¡QUE NO SE PIERDAN TUS AMIGOS NINGUNA PUBLICACION!

MANDALES POR CORREO EL LINK DE ESTE BLOG PARA QUE NOS CONOZCAN

Share to Facebook Share to Twitter Email This Pin This Share on Google Plus Más...

Vistas de página en total