Agregar un POPUP con formulario de suscripción y fanbox en Blogger

mativelez · 28 Ene 2017

Hola amigos! A ver si alguien me puede ayudar. Necesito el codigo para poder poner un POPUP en blogger.
La idea es meter en el popup un formulario de suscripcion ( el codigo lo saco de mailrelay) y ademas si se puede abajo del formulario, mandar una mini fanbox de facebook y un boton seguir de twitter.

Espero alguien me pueda dar una mano. Muchas gracias de antemano!

maximusk10 · 31 Ene 2017

Qué buscas, que al hacer click en un boton se abra un popup o que se abra al ingresar al sitio?

mativelez · 2 Feb 2017

Que se abra al ingresar al sitio y que solo se muestre una vez por ip hasta dentro de X cantidad de dias. Me puedes ayudar ?

- - - Actualizado - - -

maximusk10 dijo:
Qué buscas, que al hacer click en un boton se abra un popup o que se abra al ingresar al sitio???

Que se abra al ingresar al sitio y que solo se muestre una vez por ip hasta dentro de X cantidad de dias. Me puedes ayudar ?

sevilla666 · 3 Feb 2017

Insertar CODE, HTML o PHP:

#popup {
   visibility: hidden;
display:none;
   opacity: 0;
   margin-top: -300px;
}
#popup:target {
   visibility:visible;
display:block;
   opacity: 1;
   background-color: rgba(0,0,0,0.8);
   position: fixed;
   top:0;
   left:0;
   right:0;
   bottom:0;
   margin:0;
   z-index: 999;
   -webkit-transition:all 1s;
   -moz-transition:all 1s;
   transition:all 1s;
}
.popup-contenedor {
   position: relative;
   margin:7% auto;
   padding:30px 50px;
   background-color: #fafafa;
   color:#333;
   border-radius: 3px;
   width:50%;
}
a.popup-cerrar {
   position: absolute;
   top:3px;
   right:3px;
   background-color: #333;
   padding:7px 10px;
   font-size: 20px;
   text-decoration: none;
   line-height: 1;
   color:#fff;
}
#popup { overflow-y:scroll 
}

Insertar CODE, HTML o PHP:

var cok = "Cook";
if (/(^|;)\s*pop_u_p=/.test(document.cookie)) {
  
}else{
   window.location='#popup';
}
document.cookie = "pop_u_p=" + encodeURIComponent( cok ) +"; max-age=3000;";

Insertar CODE, HTML o PHP:

<div id="popup">
    <div class="popup-contenedor">
       <h3>BLA BLA BLA BLA</h3>
       <p>bla bla bla bla bla bla</p>
       <a class="popup-cerrar" href="">X</a>
    </div>
</div>

mativelez · 3 Feb 2017

- - - Actualizado - - -

sevilla666 dijo:

Insertar CODE, HTML o PHP:

#popup {
   visibility: hidden;
display:none;
   opacity: 0;
   margin-top: -300px;
}
#popup:target {
   visibility:visible;
display:block;
   opacity: 1;
   background-color: rgba(0,0,0,0.8);
   position: fixed;
   top:0;
   left:0;
   right:0;
   bottom:0;
   margin:0;
   z-index: 999;
   -webkit-transition:all 1s;
   -moz-transition:all 1s;
   transition:all 1s;
}
.popup-contenedor {
   position: relative;
   margin:7% auto;
   padding:30px 50px;
   background-color: #fafafa;
   color:#333;
   border-radius: 3px;
   width:50%;
}
a.popup-cerrar {
   position: absolute;
   top:3px;
   right:3px;
   background-color: #333;
   padding:7px 10px;
   font-size: 20px;
   text-decoration: none;
   line-height: 1;
   color:#fff;
}
#popup { overflow-y:scroll 
}

Insertar CODE, HTML o PHP:

var cok = "Cook";
if (/(^|;)\s*pop_u_p=/.test(document.cookie)) {
  
}else{
   window.location='#popup';
}
document.cookie = "pop_u_p=" + encodeURIComponent( cok ) +"; max-age=3000;";

Insertar CODE, HTML o PHP:

<div id="popup">
    <div class="popup-contenedor">
       <h3>BLA BLA BLA BLA</h3>
       <p>bla bla bla bla bla bla</p>
       <a class="popup-cerrar" href="">X</a>
    </div>
</div>

Gracias sevilla666!!! los tres codigos los tengo que pegar arriba del </head> ???

sevilla666 · 4 Feb 2017

mativelez dijo:
- - - Actualizado - - -
Gracias sevilla666!!! los tres codigos los tengo que pegar arriba del </head> ???

El primer código le tienes que añadir la etiqueta <style> al principio y </style> al final , y pegar todo arriba del </head>,

El segundo código le tienes que añadir la etiqueta <script> al principio y </script> al final , y pegar todo arriba del </head>,

El tercer código lo tienes que poner en la siguiente linea de <body>

la línea : document.cookie = "pop_u_p=" + encodeURIComponent( cok ) +"; max-age=3000;";
3000 son los segundos que tienen que pasar para que se vuelva a abrir el popup.

mativelez · 4 Feb 2017

sevilla666 dijo:
El primer código le tienes que añadir la etiqueta <style> al principio y </style> al final , y pegar todo arriba del </head>,

El segundo código le tienes que añadir la etiqueta <script> al principio y </script> al final , y pegar todo arriba del </head>,

El tercer código lo tienes que poner en la siguiente linea de <body>

la línea : document.cookie = "pop_u_p=" + encodeURIComponent( cok ) +"; max-age=3000;";
3000 son los segundos que tienen que pasar para que se vuelva a abrir el popup.

Genio!! Lo probaré. El pop sale una vez por ip no ???

Enviado desde mi SM-G355M mediante Tapatalk

sevilla666 · 4 Feb 2017

mativelez dijo:
Genio!! Lo probaré. El pop sale una vez por ip no ???

NO el pop sale una vez por usuario (no es lo mismo) hasta que pasan 3000 segundos que le volveria a salir.

Miratelo en este enlace que he colgado, está configurado a 30 segundos. También te he añadido un enlace al popup por si lo quieres.

mativelez · 4 Feb 2017

sevilla666 dijo:
NO el pop sale una vez por usuario (no es lo mismo) hasta que pasan 3000 segundos que le volveria a salir.

Miratelo en este enlace que he colgado, está configurado a 30 segundos. También te he añadido un enlace al popup por si lo quieres.

Perfecto! Hay alguna manera de poner una imagen además de las palabras( bla bla bla) ???

Después tenía pensando poner un botón "suscribite" al href (donde pondré el link al formulario )

Enviado desde mi SM-G355M mediante Tapatalk

sevilla666 · 4 Feb 2017

mativelez dijo:
Perfecto! Hay alguna manera de poner una imagen además de las palabras( bla bla bla) ???

Usa la etiqueta <img> de html, es muy sencillo. busca en google "img html" hay mucha información.

mativelez · 4 Feb 2017

sevilla666 dijo:
Usa la etiqueta <img> de html, es muy sencillo. busca en google "img html" hay mucha información.

Ahí ya le encontré la vuelta! Te agradezco mucho tu tiempo en compartirme el código, en verdad me solucionaste el tema. [emoji1]

Enviado desde mi SM-G355M mediante Tapatalk

Agregar un POPUP con formulario de suscripción y fanbox en Blogger

mativelez

maximusk10

mativelez

sevilla666

mativelez

sevilla666

mativelez

sevilla666

mativelez

sevilla666

mativelez

Temas similares

Privacidad y transparencia

Privacidad y transparencia