Mil Trucos Blogger

Boton de suscripción por correo con ventana modal

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado
1

La suscripción por email es uno de los asuntos que mas nos interesa a los bloggeros ya que por medio de esta función ofrecemos una manera muy facil a nuestros lectores de recibir nuestro nuevo contenido,pues atendiendo a esta situación hoy les presento un truco en el cual un pequeña caja de suscripción por correo que al hacer click sobre ella se despega una ventana modal muy elegante.

 

Subscribe

emailSuscribete y recibe las ultimas actualizaciones de este blog en tu correo electronico.

 

Un widget de REDEANDO


Para añadir este truco solo debes pegar el siguiente codigo como un gadget (en HTML/JavaScript):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style type="text/css">.subscribe:hover{opacity:0.8} #subscribe-button{background:url(https://lh6.googleusercontent.com/-QyMynCqQVHk/UBbF11mYi9I/AAAAAAAAFEk/20wSyGCxLEM/s150/rss-email.png)top left;padding-top:15px;width:150px;height:150pxfloat: center;position:relative;z-index: 999;}#subscribe-widget{display:none;}#subscribe-widget{display:none;}/* Overlay */    #hb-overlay{background-color:#000;}/* Container */    #hb-container{min-height:350px;min-width:500px;color:#222;background-color:#fff;border:4px solid #ddd;}#hb-container .hb-data{padding:8px;}#hb-container a.hbCloseImg{background:url(http://3.bp.blogspot.com/-XLFE72b5Ox4/T6z5k5ntCjI/AAAAAAAABuU/4U_YU_rNXOQ/s1600/hb-close-button.png) no-repeat;width:25px;height:29px;display:inline;z-index:3200;position:absolute;top:-15px;right:-16px;cursor:pointer;}#description{color: #000000;font-family: century gothic;font-size: 18px;font-weight: bold;}#description img{float: left;height: 80px;padding: 0 25px 0 10px;width: 80px;}#hbfollowForm{padding: 15px;}#hbfollowForm p{margin: 0 0 10px;}#hbfollowForm input:not([type="checkbox"]){width: 93%;margin-top: 4px;margin-bottom: 20px;padding: 10px 5px 10px 25px;border: 1px solid rgb(178, 178, 178);-webkit-appearance: textfield;-webkit-box-sizing: content-box;-moz-box-sizing : content-box;box-sizing : content-box;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;-webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;-moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;-webkit-transition: all 0.2s linear;-moz-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear;}#hbfollowForm input:not([type="checkbox"]):active, #hbfollowForm input:not([type="checkbox"]):focus{border: 1px solid rgba(91, 90, 90, 0.7);background: rgba(238, 236, 240, 0.2);-webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;-moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;}#hbfollowForm .button input{background: none repeat scroll 0 0 #3D9DB3;border: 1px solid #1C6C7A;border-radius: 3px 3px 3px 3px;box-shadow: 0 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 0 0 0 3px #FEFEFE, 0 5px 3px 3px #D2D2D2;color: #FFFFFF;cursor: pointer;font-family:'Arial Narrow', Arial, sans-serif;font-size: 24px;margin-bottom: 10px;padding: 8px 5px;text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);width: 30%;float: right;}#hbfollowForm .button input:hover{background: #4ab3c6;text-decoration: none;}#hbfollowForm .button input:active, #hbfollowForm .button input:focus{background: rgb(40, 137, 154);position: relative;top: 1px;border: 1px solid rgb(12, 76, 87);-webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;-moz-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;}.hbFollowFooter{text-align: center;font: 10px Tahoma, Helvetica, Arial, Sans-Serif;padding: 7px 0;margin-top: 80px;text-shadow: 0px 2px 3px #555;position: absolute;width: 500px;}.hbFollowFooter a{color: #222;text-decoration: none;}.hbFollowFooter a:hover{color: #fff;}<!--[if lt IE 7]> #hb-container a.hbCloseImg{background:none;right:-14px;width:22px;height:26px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://3.bp.blogspot.com/-XLFE72b5Ox4/T6z5k5ntCjI/AAAAAAAABuU/4U_YU_rNXOQ/s1600/hb-close-button.png', sizingMethod='scale');}#hbfollowForm input{padding: 10px 5px 10px 32px;width: 93%;}#hbfollowForm input[type=checkbox]{width: 10px;padding: 0;}<![endif]--></style><center><div id="subscribe-button"><center><img class="sinborde" src="http://www.miltrucosblogger.com/wp-content/uploads/2012/08/rw2lNY1343666496.png"></center><a class="subscribe" href="#"><img class="sinborde" src="http://www.miltrucosblogger.com/wp-content/uploads/2012/08/botazul1.png" height="105" width="105"></a></div></center><div id="subscribe-widget"><div id="hbfollowForm"><img alt="Subscribe" border="0" float="center" src="http://www.miltrucosblogger.com/wp-content/uploads/2012/08/suscribete-2520-2520REDEANDO-300x61.png" /><div id='description'><img alt="email" border="0" src="http://www.miltrucosblogger.com/wp-content/uploads/2012/08/iconoemail-2520-2520REDEANDO.png" />Suscribete y recibe las ultimas actualizaciones de este blog en tu correo electronico.</div><form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Redeando', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="email" placeholder="Escribe tu Email..." required="required" type="text" /><input name="uri" type="hidden" value="NOMBRE" /><input name="loc" type="hidden" value="es_ES" /><div class="button"><input type="submit" value="Enviar" /></div></form></div><div class="hbFollowFooter">Un widget de  <a href="http://redeando.blogspot.com" target="_blank">REDEANDO</a></div></div><script src="http://hostredeando.ucoz.es/js/jquery-popup.js"type="text/javascript"></script><script type="text/javascript">jQuery(function(a){a("#subscribe-button .subscribe").click(function(b){a("#subscribe-widget").modal();return false})})</script>

Ahora cambia lo que esta en rojo por el nombre de tu blog y listo.

Via/Redeando

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado
1

12 Comentarios

  1. agosto 15, 2012    

    Exelente 😀 esta bonito gracias, y oye tengo una consulta, tu publicaste un gadget con unos circulos que decian “Anunciate aqui” para que los visitantes pudiesen anunciarse en mi blog pero te pregunto ¿como hago para que los visitantes se anuncien? si me podrias ayudar te lo agradeceria mucho, gracias 🙂

    • agosto 16, 2012    

      Alviin tu debes cambiar donde dice “URL BLOG” por la URL del blog que quieras y listo.. así de fácil

      Saludos AlviiN :]

  2. agosto 17, 2012    

    Ah D: Gracias Juvinao 😀

  3. agosto 18, 2012    

    hola como va! el otro dia quise poner la flecha de al estilo taringa que pusiste hice el cambio y como tonto guarde,…
    y tube un problema no pude recuperar el display en la pagina que subi que cambie de imagen.. mi blog es http://diamantelocorock.blogspot.com.ar/

  4. agosto 18, 2012    

    hola como va! el otro dia quise poner la flecha de al estilo taringa que pusiste hice el cambio y como tonto guarde,…
    y tube un problema no pude recuperar el display en la pagina que subi que cambie de imagen.. mi blog es http://diamantelocorock.blogspot.com.ar/

  5. agosto 18, 2012    

    hola el otro dia hice un cambio quise poner la flecha al estilo taringa que pusiste en un de las entradas lo hice lo guarde y lo borre despues porque no me anduvo , pero el problema no fue esem sino que el el discplay de o la secuencia de fotos que tenia en mi plantilla no anduvo, podrias saber porque?? igual ahora lo cambie pero nose como volver a poner la secuencia de fotos que tenia

    • agosto 21, 2012    

      Si tienes un ejemplo de la secuencia de fotos me seria de mucha ayuda para asi saber cual es el codigo y por consiguiente determinar el problema.

  6. Anonymous Anonymous
    septiembre 6, 2012    

    Hola Buenos Dias… Quiero Saber En Que Parte Pongo Mi Link Para Que Los Suscriptores Les llegue mis nuevos pots y quiero saber como hago para saber si estuvo bien

  7. Anonymous Anonymous
    febrero 8, 2013    

    hola gracias,muy bueno ese boton,lo tratare de implementar en mi web,visitenme un saludo a todos

    http://disfruta-ayuda-comparte.jimdo.com

  8. marzo 27, 2013    

    Hola!
    Hoy he encontrado tu blog y me ha apasionado, llevo 2 horas leyendolo y me parece fascinante para una novata como yo.He puesto este botón en mi blog pero al hacerle click para ver si funcionaba he visto que no.No se abre ninguna opción.Podrias decirme que ha podido pasarme? Lo que estaba en rojo he puesto la dirección de mi blog tal y como tu has indicado.
    Esperando tu respuesta, gracias de antemano y ya tienes una nueva seguidora.

    • marzo 31, 2013    

      Al parecer el código esta sufriendo algún problema de incompatibilidad, déjame lo arreglo 😕

      Saludos

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *




Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo