Poner caja de suscripción por email para Blogger (Pop up - CSS)

Un post más en BR, hoy enseñaré como poner una caja de suscripción por email en nuestro blog de Blogger dicha caja será algo así:

Para agregar esta caja a nuestro blog es necesario hacer algunos pasos muy sencillos entre los cuales tenemos:

1. Vamos a plantilla > Editar HTML y allí buscamos la etiqueta </body> , antes de ella pegaremos lo siguiente:

<div class='modalDialog' id='signup'>
<div>
<a class='close' href='#close' title='Close'><i class='fa fa-times'/></a>
<div class='signup-container'>
<style>
.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:#00aa9f url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKGc_22n3s5UWqf_2DuMh-f5SETxwi-kwgrDhM1g3BFihXwL_PqL8QyVZzpPPMXFDVfCubDlUj4x6H4p3CL0mX-JqQbDQZIUTFjOhVEYnjxaiXsp1SNvfgK9p2mMjz89VeGukSLULo4ao/s1600/bg.png) no-repeat; padding: 20px; margin: 0 -20px -20px; height: 80px;}
.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:#00aa9f;border: 1px solid #fff;cursor: pointer; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px;}
</style>
<div class='newsletter-sm'>
<i class='fa fa-envelope-o' style='background:#00aa9f; 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;'/>
<h3>Suscríbete y recibe nuestro contenido</h3>
<p style='text-align:center'>MENSAJE ALEATORIO PUESTO POR ADMIN DEL BLOG</p>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=URLDETUFEEDBURNER', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<div class='newsletter-sm-bot'>
<input class='newsletter-input-sm' name='email' placeholder='Ingresa tu email' type='text'/>
<button class='newsletter-button-sm' type='submit'>Enviar</button>
</div>
<input name='uri' type='hidden' value='MyBloggerAide'/>
</form>
</div>
</div>
</div>
</div>

Lo que está en rojo es el texto y este se cambia por el que se desee y lo que está en color Naranja simplemente se cambia por el link de nuestro FeedBurner, ahora pegaremos el CSS para ello buscamos ]]></b:skin> y antes de dicha etiqueta pegamos:

/*--------------- MBA Modal Dialog ---------------*/
.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.signup {
background:#00aa9f;
border-bottom: 1px solid #008d84;
font-weight: normal;
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; }