Colocar Caja de Suscripción (Pop up) por Correo Electrónico en Blogger

Colocaremos un formulario de suscripción atractivo creada con CSS3 y jQuery. En este tutorial mostraremos cómo añadir un cuadro de suscripción de correo electrónico para sus blogs.

Colocar Caja de Suscripción (Pop up) por Correo Electrónico en Blogger

La función de esta caja de suscripción es aumentar los lectores del blog; así los tendrán informados por vía electrónica. Es de mucha importancia este detalle si quieres aumentar suscriptores en tu blog. Recuerden seguir paso a paso para que funcione esta caja de suscripción

1. Ir a la Plantilla
2. Edit HTML

Colocar el código CSS antes de </ b: skin> o </ style> o antes de ]]> </ b: skin> o </ style>


/* CSS Sign up */
.modalDialog{position:fixed;font-family:Arial,Helvetica,sans-serif;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,0.6);z-index:99999;opacity:0;-webkit-transition:opacity 200ms ease-in;-moz-transition:opacity 200ms ease-in;transition:opacity 200ms ease-in;pointer-events:none}
.modalDialog:target{opacity:1;pointer-events:auto}
.modalDialog:target > div{margin:8% auto}
.modalDialog > div{-webkit-transition:all 100ms ease-in;-moz-transition:all 100ms ease-in;transition:all 100ms ease-in;width:500px;position:relative;margin:5% auto;background:#fff;min-height:200px}
h2.ldemo{display:block;border-bottom:1px solid #d9e0e2;font-weight:400;text-align:center;padding:10px}
h2.signup{background:#00aa9f;border-bottom:1px solid #008d84;font-weight:400;text-align:center;padding:10px;color:#fff;font-size:18px}
.close{color:#888;position:absolute;top:1px;right:1px;width:30px;height:30px;line-height:30px;text-align:center;font-size:16px}
.close:hover { text-decoration:none; }
.close:hover { color:#555; }
.newsletter-sm {background:#fff; width: 100%; margin: 0; padding: 20px;}
.newsletter-sm h3 {color:#555; font-family: 'Maven Pro', sans-serif; font-size: 24px; font-weight: normal; text-align:center; margin-bottom: 10px;}
.newsletter-sm p {font-size: 14px; color:#555; line-height: 20px; font-family: 'Maven Pro', sans-serif;}
.newsletter-sm .newsletter-input-sm {border: 0; padding: 5px 10px; width: 360px; float:left; height: 40px; color:#555;border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px;}
.newsletter-sm .newsletter-sm-bot{background:#00AB6F; padding: 20px; margin: 0 -20px -20px; height: 80px; position: relative;}
.newsletter-sm .newsletter-button-sm {float:right; height: 40px; display:inline-block; font-size: 14px; padding: 5px 10px; position: relative;color: #fff;text-align: center; background:#00AB6F;border: 1px solid #fff;cursor: pointer; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px;}

Colocar el código HTML antes de </ body>


<div class='modalDialog' id='signup'>
<div>
<a class='close' href='#close' style='color: #888;' title='Close'><i class='fa fa-times'></i></a>
<div class='signup-container'>
<div class='newsletter-sm'>
<i class='fa fa-envelope-o' style='background: #00AB6F; color:#fff; width: 50px; height: 50px; display:block; line-height: 50px; text-align:center; font-size: 24px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; margin: 0 auto;'></i>
<h3>
Registrate colocando tu Correo</h3>
<p style='text-align:center'>
Regístrate aquí con tu dirección de correo electrónico para recibir noticias y actualizaciones en su bandeja de entrada.</p>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<div class='newsletter-sm-bot'>
<input class='newsletter-input-sm' name='email' placeholder='Correo electrónico' type='text'/>
<button class='newsletter-button-sm' type='submit'>Registrate</button>
</div>
<input name='uri' type='hidden' value='YOUR-USER-NAME'/>
</form>
</div>
</div>
</div>
</div>

Y para que funcione y este listo este botón de suscripción lo puede colocar de esta manera:



<a href="#signup">Registrarse </a>