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.

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: