Como abrir una ventana emergente (pop-up) desde vuestro blog | blogsmadeinspain

Aquí encontrarás plantillas para Blogger diseñadas por mí totalmente gratuitas, conocerás como se manipulan imágenes, fondos, texto, enlaces o links, los mejores widgets o gadgets, herramientas y utilidades, etc... Y además puedo diseñarte una plantilla exclusiva para tí, totalmente a tu gusto, y solo por 38 Euros.

Como abrir una ventana emergente (pop-up) desde vuestro blog

Todos sabréis lo que es una ventana emergente o pop-up, que la mayoría de las veces está relacionada con la "molesta" publicidad de algunos sitios web. Pero esto no tiene porque ser así, no siempre se usan para publicidad, y pueden tener muchos usos diferentes en nuestros blogs.

Lo interesante de estos pop-up es poder controlar donde se abren (en que lugar de la plantalla) y poder definir su tamaño. Pues hoy os traigo un sencillo código Javascript para abrir estas ventanas emergentes cuando pinchemos sobre un elemento determinado.

Pincha Aquí...

En este caso es una imagen de mi logo lo que verás, pero por ejemplo también puedes escuchar un sonido, una canción, ver un video, etc...

Conecta los altavoces y pincha Aquí...

Leer completo...[+/-]

    El código que debes usar para abrir una ventana emergente pinchando sobre un texto, como los dos ejemplos anteriores, es el siguiente:

    <a href="URL COMPLETA DEL ARCHIVO" target="_blank" onClick="window.open(this.href, this.target, 'width=300,height=400,top=200px,left=300px'); return false;">TEXTO PARA PINCHAR</a>

    Adapta todo lo que está en color gris a tu blog, coloca la URL completa del archivo que quieras abrir en la pop-up (imagen, gif, sonido, canción, video, etc...), en "width" y "heigth" define el ancho y el alto de la ventana, con "top" marca la distancia superior que deseas, con "left" la distancia al margen izquierdo, y por último coloca el texto que verán tus lectores para pinchar.

    Pero ahora vamos un paso más allá, veamos como podemos colocar una imagen para que al pinchar sobre ella aparezca la ventana emergente. Pincha sobre el logo...

    Ahora el código quedaría así:

    <a href="URL COMPLETA DEL ARCHIVO" target="_blank" onclick="window.open(this.href, this.target, 'width=300,height=400,top=100px,left=100px'); return false;"><img src="IMAGEN PARA PINCHAR"/></a>

75 comentarios:

Yo misma dijo...

Siento dejarte un comentario off-topic, pero quería agradecerte tus comentarios en mi blog, especialmente el de ánimos cuando me quedé sin ordenador. Ya tengo uno nuevecito, así que ahora sólo me queda volver a postear y leerme todas vuestras entradas atrasadas!!! saludos!

Blogsmadeinspain dijo...

De modo que de estreno... que aproveche.
Y gracias por tus saludos.

Loly dijo...

Hola.
No he podido enviarte un correo. Te doy las gracias aquí por poner a nuestra disposición tus plantillas. Ten en cuenta que aún no está funcionando como yo quisiera, para eso necesito tiempo, acabo de hacerlo.
Un saludo.

Anónimo dijo...

Muchisimas gracias por compartir el código! :)

jopicar dijo...

Hola, me gusta el código por la simpleza, pero no encuentro la forma de ponerle el título a la ventana que se abre, a ver si alguien me ilumina :)
Un saludo.

Blogsmadeinspain dijo...

jopicar, siento no poder ayudarte, pero el título de la ventana, en este caso, es la ruta URL del elemento que abras (imagen, sonido, etc...
Gracias por visitarme.

Chelagol dijo...

Hola, gracias por compartir..sabes me gustaría saber tambien, soy novato en blogger, como hacer para que se abra una ventana popup para comentar en vez que se abra una pagina.
Gracias

Blogsmadeinspain dijo...

ociosinho, debes entrar en la edición de tu blog, en "Configuración/Comentarios" y ahí verás la opción "Ubicación del formulario de comentarios", simplemente con marcar en "Ventana emergente" ya lo tendrás como tú quieres.

Anónimo dijo...

Hola soy Willy , cómo estás blogsmadeinspain, no se si puedes ayudarme, estoy configurando un blogspot que servirá para comunicarme con algunos amigos del grupo de la facu y lo que necesito es que para eventos importantes por ejemplo un parcial aparezca una ventana en la cual se recuerde la fecha y la hora del mismo para que no pase desapercibido, había pensado en un gadget Notita autoadhesiva pero no funciona (blogspot lo tiene desactivado), ¿tienes alguna idea como puedo hacerlo?

Blogsmadeinspain dijo...

Willy, lo que a tí te interesa es una ventana pop-up autoejecutable cada vez que se entra en tu blog.
No sé como puede hacerse pero trata de buscar en "google" con este concepto "ventana pop-up autoejecutable", estoy seguro de haber leido algo así hace tiempo.

Anónimo dijo...

Hola, mi nombre es Juan Pablo y quería saber cómo hago para que cuando quiero agregar un link de una página amiga como gadget se abra en una ventana nueva y sea del tamaño de la página del explorer por ejemplo. Por que lo hice como vos muy bien indicas pero me lo abre sin poder scrollear.

Gracias

Blogsmadeinspain dijo...

Anónimo, mándame un e-mail con el widget que tengo en la sidebar, para poder contestarte con los códigos que necesitas.

Anónimo dijo...

muy buena su nota, la e publicado en mi blog
www.elrincontecnologico.com

ESCUELA DE KARATE COLINDRES dijo...

hola soy Luis y soy nuevo por aqui, decirte que tienes un gran e instructivo blog, yo empiezo desde cero, no tengo ni idea de la mayoria del lenguaje que utilizais pero poco a poco voy haciendo algo. un saludo.

http://karatecolindres.blogspot.com

Blogsmadeinspain dijo...

Saludos, Escuela Karate Colindres. Espero que mi blog te sirva de ayuda.
Muchas gracias por dejar tu mensaje y saludos desde Sevilla.

Unknown dijo...

La verdad que sos un genio!!

me salvaste la vida (re exagerado el bago, jajaja...)

me ayudaste mucho con el truco este, ya que lo estaba buscando ya hace tiempo.

gracias loco!

hasta pronto.

bye bye.-

Anónimo dijo...

Estimado:
Sabrías decirme, si conoces algun script, para ponerle a un texto un sonido, para que cuando de click se ejecuté el mismo, antes de abrir el pop-up. Por favor que no sa en Flash.
Saludos desde Argentina.

Blogsmadeinspain dijo...

Anónimo, lo siento pero no puedo ayudarte en lo que buscas.

Ricardo dijo...

como pongo un video de youtube?
gracias de antemano

Ricardo dijo...

espero pronto tu respuesta

Blogsmadeinspain dijo...

Ricardo, solo tienes que copiar los códigos que te da la propia página de YouTube para el video que hayas elegido. Y después te vas a "Diseño/Elementosde la página" y lo colocas como "Elemento FTHM/Javascript", y ya está.

Ana Claver dijo...

Hola , soy Ana desde Belgica. Queria saber si en una ventana pop que abre una imagen se puede añadir un comentario sobre esa imagen o un link.
Podrias ayudarme??

Blogsmadeinspain dijo...

Ana, supongo que sí se podrá hacer, pero hay que tener más conocimientos de lenguaje html de los que yo tengo.
Siento no poder ayudarte.

Anónimo dijo...

como pongo la imagen para pinchar tipeo solo el nombre, copio toda la ubicacion del archvo n m pc, copio la url d la imagen o q?

Blogsmadeinspain dijo...

Anónimo, no entiendo lo que me preguntas, podrías escribir algo más despacio y con todas las letras. Trata de explicarme lo que quires saber y trataré de ayudarte.

crutte dijo...

Disculpa x no explicarte bien pero estaba no tenia tiempo.
1ºtu explciaciojn es sencillisima, pero debido a que soy nuevo en esto no sabia que cosa colocar donde dice "IMAGEN PARA PINCHAR"

Luego me di cuenta que era la url de la imagen ya sea desde su propia web o sino la url de un album web mio.
Ahora probe con ambas formas y se soluciono el problema. SE VE LA IMAGEN, pero solo despues de haber pegado la URL, luego salgo del blog y al acceder nuevamente, NO SE VE NADA, ntro a editar mi entrada y vuelvo a pegar la URL y se solucion pero como t digo solo temporalmente y mientras este dentro de mi cuenta.
No se como poner el codigo que esta en mi blog porque dice q mi HTML no es aceptable ahorita que quiero publicar el cometnario.
Muchas gracias BMIS...!!!

ESPECIALISTA TECNICO dijo...

hOLA muy buena tu pagina soy de Peru te felicito por tu trabajo,quisera q me des una mano tengo mi blog de informatica servicompperu.blogspot.com kisiera rediseñarlo con algunas plantillas tuyas y a la vez me des algunos tips si pudierassio mucho tu trabajo te estare agradecido.

Blogsmadeinspain dijo...

TECNICO EN SISTEMAS, lo único que puedo decirte es que elijas una plantilla, la coloques, y empieces a toquetearla. Lee mis post (no son muchos), verás como sacas buenas ideas para redecorarlo.
Si te apañas con programas de diseño podrás rediseñar las imágenes que componen la plantilla, y si no tienes ni idea, trataré de ayudarte en lo que pueda.

Anónimo dijo...

como hago para poner en mi blog... enlaces que vallan pasando ... asi como pones a la izquierda d tu blog (enlaces amigos)

Blogsmadeinspain dijo...

Anónimo, mándame un e-mail y te enviaré los códigos necesarios y las instrucciones.

El Taller de Los Lunares dijo...

Hola,
Me gustaría saber cómo hacer para que el pop-up aparezca nada más abrir el blog sin tener que pinchar en ningún sitio...¿se puede?
Muchas gracias

Blogsmadeinspain dijo...

He leido algo de eso por internet, pero yo no sé como hacerlo.
Busca con el buscador "Google", seguro que encuentras una explicación parecida a la mía, pero para abrir la ventana nada más acceder a tu blog.

Saludos

El Taller de Los Lunares dijo...

pues no snif snif...gracias de todos modos....

Anónimo dijo...

hola, una preguntita, Podria ser sin abrir ninguna ventana solo dandole a la imagen que sonara un mp3.
gracias.

Blogsmadeinspain dijo...

Para hacer eso, lo que yo conozco son algunos gadgets que dan ese servicio online, como lo que yo tengo en "Mensaje de Bienvenida".
Pero sonar directamente un mp3 al pinchar un botón no sé como podría hacerse.

Anónimo dijo...

gracias de todas maneras.

yomismo dijo...

Gracias por tu info...queria preguntarte si sabes como cambiar las letras del blgo, porque me parecen espantosas, pero quiero saber si puedo importarlas desde mi pc. Gracias!!!

Blogsmadeinspain dijo...

Diego, el tema de las letras es el eterno problema que tenemos con Blogger. En principio solo podemos disponer de 5 o 6 tipos de letras, bastante mediocres.
Solo con conocimientos de html podría cambiarse a cualquier familia de letra que tengamos instalados en nuestro ordenador, pero con el problema que si nuestros visitantes no la tienen instaladas en el suyo, el texto de que se trate se verá mal o incluso no se verá.
Por lo que la mayoría de los blogueros nos tenemos que conformas con Verdana, Arial, etc...

Club2V dijo...

woooww amigo felicidades por todo tu trabajo vere como pudo hacer una donacion... Sabes me gustaria saber como haces ese cuadrito donde pones el codigo para enlasarte y el otro donde pasan los iconos de los blogs amigos.... gracias amiguito¡¡¡

Blogsmadeinspain dijo...

Club2V, mándame un e-mail y te contestaré con los códigos para hacer lo que me preguntas.
Es que son largos para ponerlos en un comentario, y además Blogger no admite códigos html en los comentarios.

Saludos.

Franco dijo...

Que tal?... yo tengo un blog hace un par de meses www.iannapoker.blogspot.com y cada vez que entro como tambien cada vez que entran otras personas, se abre una ventana extra que no se de donde salio, algun tipo de spyware o publicidad que no se como se metio. Como la puedo sacar?
muchas gracias
ianna

Blogsmadeinspain dijo...

Franco, la mayoría de esos pop-ups vienen de algún gadget que colocas en tu blog. Seguramente será alguno de los gadgets que tienes en tu sidebar relativos a juegos de poker.
No sabría decirte cual es, hay una probabilidad muy alta de que sea uno de esos.
Prueba a quitarlos todos e ir colocándolos uno a uno, e ir probando a entrar en tu blog, así podrás averiguar cual es.

Franco dijo...

Gracias...ahora voy a probar!..Creo que ya saque el que lo hacia!
;)
ianna

Lesent dijo...

Hola por ayúdame. El asunto es que estoy armando un blog para mi floreria y pues lo hice como una tienda online (hice que aparezcan tres columnas de post y quedó bien) el asunto es que ahora para la información sobre la floreria ya no quiero que me salga en espacios asi chiquitos, entonces se me ocurrio que aparezca en pop ups, pero no se cómo hacer textos con imágenes para que salgan en pop ups. Por fa, ayúdame.

Blogsmadeinspain dijo...

Lesent, yo lo he intentado varias veces y no lo he conseguido.
Siento no poder ayudarte en ese tema.

kita dijo...

Hola me gustaron tus plantillas ahora e intentado colocar un pop up...trate de seguir la ruta para colocarlo -> "Diseño/Elementosde la página" y lo colocas como "Elemento FTHM/Javascript" pero en mi blog no aparece FTHM LO UNICO PARECIDO ES cuando le doy agregar un GADGET HAY UNA OPCION Q dice HTML/Javascript


PERO NO FUNCIONA.
muchas gracias y buen día

Blogsmadeinspain dijo...

Azulita, tú tienes razón, la opción se llama "HTML/Javascript". Sigue las instrucciones al pie de la letra, verás como te funciona.

Cocina dijo...

hola! muy buena esta entrada!una pregunta,como puedo hacer para que el enlace de un video al abrirse la ventana muestre unicamente el video y no que abra y se vea toda la pagina de youtube??no se si me explico....
agradeceria tu respuesta
C.M
saludoss!!

Cocina dijo...

blogsmadeinspain!!Ya lo solucione,segui paso a paso tus explicaciones y pude lograrlo!!
muchas gracias hacia tiempo que buscaba algo asi!!
saludos!!
C.M

Blogsmadeinspain dijo...

Cocofansclub, me alegro que encontraras lo que buscabas. Y muchas gracias por visitar mi blog.

Saludos desde Sevilla.

JuAnCHOo dijo...

muchas gracias por este popup.. es de lo mejor... me a ayudado mucho... pero ahjora tengo una pregunta..


como hago para que mi popup se ejecute automaticamente cuando entren a mi web??

es decir.. yo vendo flores.. y cuando los clientes entran a mi webside ellos ven un boton que dice ofertas este es el popup que nos distes.. pero que le tengo que modificar a codigo para que eliminar ese boton.... que cuando los clientes entren a la web, al mismo tiempo se abra automaticamente el popup...

gracias por tu ayuda
saludos desde colombia

Blogsmadeinspain dijo...

JuAnCHOo, ya me han preguntado otras veces por esto mismo. Siento no poder ayudarte, pero lo desconozco. Creo que hay que programarlo en Javascript, pero no estoy seguro.

Anónimo dijo...

esta super este este truco!!!...gracias.

PELUDOS Y CON CLASE dijo...

Hola! soy nueva con estas cosas y no me entero mucho, he estado probando lo que tu pones y sí me sale, pero ahora va mi pregunta, cómo hago para que en el pop-up me aparezca el texto que quiero poner como contenido? lo tengo en un word e incluye una imagen.

Muchas gracias ^__^

Unknown dijo...

hombre me salvaste exelente aporte ya me avia paseado un buen por la red y no dava con bola ojala te des una buelta por mi blog y veas para que me sirvio tu aporte muchas gracias

Carmen Pineda dijo...

HOLA!!! TENGO QUE FELICITARTE POR TU PAGINA! Y ME GUSTARIA MUCHO EN DONDE PONE AGRADECIMIENTOS Y BLOGS AMIGOS YO QUIERO PONER ALGO SIMILAR PERO NO SE COMO LO PEUDO BUSCAR, ALGO ASI PARA PONER YO POR EJEMPLO, CLIENTES RECIENTES , PORFAVOR SI ME PUDIERAS AYUDAR!!!!

Juan Pablo dijo...

Hola, gracias por la solucion que necesitaba para mi blogger, mi consulta es donde puedo añadir codigo para desabilitar maximizar y minimizar ventana?? Gracias, espero respuestas.

Blogsmadeinspain dijo...

Juan Pablo, lo siento pero no puedo ayudarte con lo que quieres saber.

Libros lalo dijo...

Hehehe muy bueno gracias amigo bueno hojala y puedas darte una vuelta por mi blog

Anónimo dijo...

Muchas gracias por este post. Está muy bien explicado y me ha servido para lo que necesitaba.

Me gustaría añadirle al "TEXTO PARA PINCHAR" una fuente determinada, por ejemplo "verdana 10 ptos" y en color "azul".

¿Alguien me podría decir cómo hacerlo?.

Un cordial saludo.

Luís dijo...

Mi pregunta es como hacerlo sin tener que pinchar, solo pasando el ratón sobre una palabra, por ejemplo.
Gracias.

Blogsmadeinspain dijo...

Luís, estoy seguro que puede hacerse, pero yo desconozco cómo hacerlo.

soulargentina dijo...

como hago para ke la ventana no abra y vaya directamente a yuotube abriendose desde mi mismo post? gracias muy claras tus explicaciones saludos

Blogsmadeinspain dijo...

venusargentina, lo normal para los videos de youtube es que insertes los códigos que te da la propia página del video en youtube.
Tus visitas podrán ver el video directamente en tu entrada o pinchar sobre él e ir a la página de youtube del video que se trate.

soulargentina dijo...

entonces no hay modificacion para ke se amplie el video de mi entrada dentro de mi sitio? =( decime ke si .... please me encantaria lograr eso

---- gracias por contestar tan rapido sos super amablee saludos =) ----

Blogsmadeinspain dijo...

venusargentina, supongo que habrá alguna manera, pero la verdad es que yo la desconozco.

Busca algo por Google, a ver si tienes suerte.

soulargentina dijo...

gracias seguire buscando si alguien sabe de esto me seria de gran ayuda saludos ke tengan un buen =)

Anónimo dijo...

Hola buenas!
Tengo un problemilla con las pop-up. He hecho una pop-up y en Firefoxy Chrome se abre sin problemas, respetando las medidas y formato establecidos. Pero en IE (uso la versión 10) se me abre como otra ventaña a tamaño completo, y no sé si hay q poner algún código para que se abra correctamente en IE. Alguien me podría ayudar?

Blogsmadeinspain dijo...

Es psible que dependiendo de la versión del navegador lo veas de una forma u de orta. Sobre todo tratándose de Ie.

Pero no conozco una solución para lo que te sucede.

Anónimo dijo...

Yo tb creo que es según la versión, IE da muchoooo problemas para los programadores.
Utilizo en el principal ordenador la versión 10, y sucede lo de q se abre en ventana grande. Pero si uso otra versión en otro ordenador, se me abre incluso más peqeña de lo que debería.
Yo creo que no hay solución.
Muchas gracias Blogsmadeinspain por tu rápida respuesta.
Un saludo

SOCNAS dijo...

Hola vecino, jeje lo digo por que soy de Huelva, buen blog y me ha servido de mucho este código, pues soy tambien algo novato en esto de blogger, y mi blog es de fichas de peliculas de terror, en cada ficha he puesto un submenú, y para no cargar tanto el blog,ya que son muchas pelis las que tengo que poner cada una con imagenes, trailer, criticas, y pensé hacer otros blog complementarios en el que con enlaces pues se vieran los trailer jejeej una chapuza y muy currada,jejej cuando descubri el magico codigo dije seré lepero,jeejeje soy de la capital, pero ya sabes, tambien le incorporé chat y foro y no me gustaba la idea pues la gente participaba en el foro pero las sacaba de alguna manera de mi blog y no me hacia mucha gracia, ahora con esto lo tinen todo en casa ejej, pero mi duda y mi pregunta son las siguientes, he leido que muchos programs y navegadores bloquean estos popup, no será un problema?? es decir que haya gente que no puedan ver estas ventanas en mi blog? o es indiferente y solo es para las ventanas publicitarias? me gustaria quedarme tranquilo ya que este codigo me ha gustado y servido de gran ayuda pero me queda esa duda amigos, gracias de antemano un saludo. ahhh se me olvidaba otra pregunta, carga mucho el blog a la hora de introducir estas ventanas y su contenido?????

Blogsmadeinspain dijo...

José maría, estas ventanas pop-ups no tienen porque sobrecargar el blog. Y respecto al posible bloqueo de contenido, es cierto que dependiendo de la configuración de seguridad del sistema operativo de cada lector, pueden quedar bloqueados y no ser visibles, pero en principio, y por lo menos en Windows, esto no significaría que no se viese el resto del blog.

Espero haber resuelto las dos dudas que me planteabas.

Saludos desde Sevilla

SOCNAS dijo...

Muchas gracias, pero si que es un problemilla en mi caso, pero me voy a arriesgar, creo que esos programas lo mismo que se configuran para bloquear también tendrán la opción de configurarlo para desbloquear esa opción no?????
Pués es que cada peli tiene un trailer y en la misma palabra al pinchar pues le sale la ventana con el trailer, si eso no lo ven pues jeejejej la hemos cagado hablando en plata,jeej pero de todos modos pondre algun mensaje advirtiendo que el contendo del blog va con ventanas emergentes o popup y que si quieren disfrutar del contenido pues que lo desbloqueen, que opinais?? bueno repito que ya con esto queda sanjada mi duda y gracias (El blog mio tiene más ventanas que el ave jee)
Un saludo compis.

Unknown dijo...

Hola, mi pregunta es la siguiente, tengo un listado de cds musicales y me gustaría hacer clic en el nombre del cd y que me aparezca en una ventana la caratula y los temas que tiene ese cd, sera posible hacerlo con un popup, muchas gracias.

Blogsmadeinspain dijo...

Edgar, para usar este método y hacer lo que quieres, lo que tendrías que hacer es una imagen donde se incluya la carátula y el título de los temas... Pero como una única imagen.