Excelente PopUp para suscripción de usuarios en nuestro blogger - BloggerS Look
BloggerS Look

INSPITATION AND CREATIVITY IN SOCIAL NETWORKS

Excelente PopUp para suscripción de usuarios en nuestro blogger

Share This
En esta oportunidad les traigo un bonito popup para blogger para suscribir a nuestros lectores, este diseño moderno puede ser modificado a tu criterio, para lo cual descarga el archivo PSD desde aquí.

Vale mencionar que el autor de este popup es el propietario de exeideas.com

Como instalar?.
  1. Ingresar a tu panel de blogger y clic en diseño.
  2. Clic en añadir un gadget.
  3. Clic en HTML/Javascript Añadir 
  4.  Copiar y pegar el siguiente código.
  5. Luego de pegar clic en guardar.
  6. Finalmente clic en guardar disposición.
Código del popup 
<!-- This Is A Copyrighted "EXE Style POP UP" Widget, Don't Try To Theft It Otherwise... -->
<style type="text/css">
/*
ColorBox v1.3.16
(Copyright (c) 2011 Jack Moore - jack@colorpowered.com)
UpDated By www.exeideas.com
(Copyright (c) 2011 EXEIdeas International - admin@exeideas.tk)
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#cboxOverlay{background:#000;opacity:0.5 !important;}
#cboxTopCenter{height:35px;}
#cboxMiddleRight{width:0px;}
#cboxContent{overflow:visible;}
#cboxLoadedContent{margin-bottom:5px;}
#cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4XF0ppLbU3Wo_C3LskKS0H14BPsWtMLWb55oAGFS93DqcQmLEF64_0Fp2HWMiOLX8ImAvflFNwRInLKxMK548QlS5VMdricT-yNO-9nFw8WG5BqVynPnm_XZmqluGVqSK-mJBJG2Wxa4/s400/loadingbackground.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDC7Ua5xSpN0MVtmaUtWJoElceSIW16hlxnpIjzOgAF83f_KCl-KO2NRwJU7POZ5VUVHJYUNqW5l_KWF_b5jmnrX1VifetMat25d7bGY2PfKaYx5-UvK_dEovq7s0-3YejqYLfupg0odI/s400/loading.gif) no-repeat center center;}
#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
#cboxClose{position:absolute; bottom:318px; right:0; cursor:pointer; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh02cksbS8K2G9b93n-hH8k4ZyJ71X-WR8LVRhAEthmjfuBRDEMdN3KygvRGvTYKrPoQQtJQkPmYiMbS-UcugbpAjyY1ZTX8C042FQqFpYa_S1saCI7ANcJEL3s088m3hcIgYph2L4vMA/s40/exestylepopupclosebutton.png) no-repeat; width:40px; height:40px; text-indent:-9999px;}
#cboxClose.hover{opacity:0.8 !important;}
#exestylepopup{overflow:none; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWarN42La7Gkg3hUOe1_GOoizMI6enJUypFVNS54557zbH25yALTo-jlV5lD9bePVkuXORqryF-KvG7oICEmWfaGfo36DUngYplg9oLZecn9gzLW11y7QqUwbz4Y-ioEdUoBARtXffhMci/s1600/parablogger.png) ; background-repeat: no-repeat; height: 334px; width: 770px; }
form#exestylepopup{display:block; margin:0;}
form#exestylepopup #exefield{padding:2px; position:absolute; top:171px; left:480px; width:200px; font-size:16px; border:none; background:transparent;}
form#exestylepopup #exebutton{position:absolute; left:474px; top:214px; width:249px; height:42px; border:none; background:transparent;}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script src="https://raw.github.com/EXEIdeas/JS/master/ColorBox-v1.3.16"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1)
{
var fifteenDays = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"785px", inline:true, href:"#exestylepopups"});
}
});
</script>
<div style='display:none'>
<div id='exestylepopups' >
<form id="exestylepopup" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Wwwparabloggerinfo', 'popupwindow', 'scrollbars=yes, width=600, height=550'); return true">
<input type="hidden" value="Wwwparabloggerinfo" name="uri"/>
<input type="text" id="exefield" name="email" value="" placeholder ="Enter Your E-Mail Here..." />
<input type="hidden" name="loc" value="en_US" />
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="exebutton" />
</form>
</div>
</div>
<!-- This Is A Copyrighted "EXE Style POP UP" Widget, Don't Try To Theft It Otherwise... -->
¿Cómo poner mi diseño si modifico el PSD?
Si este diseño no te gusta o quieres personalizarlo, baja el archivo PSD (photoshop) y modifícalo, para poner nuestro diseño personalizado haremos lo sigiente:
  1.  Descargar el archivo PSD.
  2. Abrir y editar con Photoshop.
  3. Guardar la imagen en formato .png
  4. Subir la imagen a un servidor de imágenes en internet o subirlo en en picasa o publicar en un post de bloger (la idea es tener la imagen en un servidor).
  5. Copiar la url de la imagen.
  6. Ingresar a tu panel de blogger y clic en diseño.
  7. Clic en añadir un gadget.
  8. Clic en HTML/Javascript Añadir 
  9.  Copiar y pegar el siguiente código.
  10. Presionar CTRL + F
  11. Pegar sin comillas "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWarN42La7Gkg3hUOe1_GOoizMI6enJUypFVNS54557zbH25yALTo-jlV5lD9bePVkuXORqryF-KvG7oICEmWfaGfo36DUngYplg9oLZecn9gzLW11y7QqUwbz4Y-ioEdUoBARtXffhMci/s1600/parablogger.png"   (esta es la direccion de mi imagen)
  12. Una vez que hayas encontrado esta dirección url en el código, debes reemplazar por la dirección de tu imagen. 
  13. Des mismo modo buscar en el cuadro "Wwwparabloggerinfo" (este es el nombre de mi feed creado en feedburner)
  14. Remplezar por el nombre de tu feed, si no tienes créate una cuenta en feedburner ingresando con los mismos datos que ingresas a blogger y debes activar suscripcion por correo electronico desde la pestaña Publicize y en la opción email subscriptions. ( la dirección original de mi feed es http://feeds.feedburner.com/Wwwparabloggerinfo).
  15. Luego clic en guardar.
  16. Finalmente clic en guardar disposición
DATOS ADICIONALES 
Para hacer que este popup se muestre cada vez que ingresan a tu blog seguir estos pasos:
  1. Abrir el el gadget HTML/Javascript donde hemos pegado el código del popup y presionar CTRL + F Luego buscar ('visited=true') y luego reemplazar true  por false, pero digamos que no es muy recomendable, incluso para algunos puede llegar a ser molesto, pero lo dejo a tu criterio.
  2. Publicidad: Rutas y Viajes a Marruecos
PARA PONER EN ESPAÑOL EL CUADRO DE SUSCRIPCIÓN
Para poner en español seguimos los siguientes pasos:
Abrir el el gadget HTML/Javascript donde hemos pegado el código del popup y presionar CTRL + F Luego buscar value="en_US" y luego reemplazar por value="es_ES" y guardamos. 

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