Boton de suscripción por correo con ventana modal

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.

 

Suscribete 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