6 dic. 2015

POP UP! Abrir una ventana Emergente en Blogger

Hola compañeros blogueros, a continuación les mostrare como abrir sus propias ventanas emergentes tambié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

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

<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.

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" />


3 comentarios:

  1. una pregunta se puede hacer el truco pero sin tener que dar click a una imagen o text que se habra auomaticamente cuando entras al post

    ResponderEliminar
  2. Muy buen Post, gracias. Me sirvió de maravilla.

    ResponderEliminar

2016 © Inovablog