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: &#39;Maven Pro&#39;, 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: &#39;Maven Pro&#39;, 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(&apos;http://feedburner.google.com/fb/a/mailverify?uri=URLDETUFEEDBURNER&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);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; }
Por último si queremos que este quede como botón agregamos el siguiente código en se desee que quede el botón:
<a href='#signup'>Signup</a>
Y listo quedó guardado nuestra caja de suscripción por email.

20 comentarios:

  1. ME HA ENCANTADO, PERO SOY DEMASIADO TORPE CON ESO DE LAS CSS Y EL FEDDBURNER, YA QUE RECIEN CREE MI BLOG, TE AGRADECERIA QUE ME AYUDARAS CON ESTE PROBLEMA, GRACIAS

    ResponderBorrar
  2. amigo, buen dia, tengo un problema y es que no aparece el boton para cerrar ¿puedes ayudarme? gracias este es mi blog http://www.advent7d.com/

    ResponderBorrar
    Respuestas
    1. Hola Edwar Palacios Entro a tu blog y no veo que salga el cuadro como tal para guiarme en búsqueda del error.

      Saludos,

      Borrar
  3. Disculpa, es que habia cambiado la plantilla para ver si se solucionaba, pero sigue el error

    ResponderBorrar
    Respuestas
    1. Hola Edwar de nuevo no veo o posiciono en que parte tienes la caja para analizarla.. seguroo la pusiste ?

      Saludos,

      Borrar
  4. Amigo voy a intentar colocar dicha caja, si me funciona te aviso. si igual te aviso para que me ayudes porfavor. xD

    ResponderBorrar
    Respuestas
    1. Hola Mega Consolas JB Claro amigo quedo atento a cualquier duda.

      Saludos,

      Borrar
  5. Amigo no me sale la caja, hice lo que me dijiste y no aparece y la verdad es que me gusta mucho ese diseño, podrias ayudarme a colocarla?

    ResponderBorrar
    Respuestas
    1. Podrías ponerme el link de tu blog con la cajita puesta para verificar que problema tienes..

      Saludos,

      Borrar
  6. Buenas tardes amigo. la pagina es la siguiente http://megaconsolasjb.blogspot.com/ pero el problema principal es que no aparece nada.

    ResponderBorrar
    Respuestas
    1. Hola MEga Consolas JB Gracias lo estaré viendo con tiempo apra decirte el fallo ver si alcanzo ya que ando en exámenes de mi universidad. :)

      Saludos,

      Borrar
  7. ME HA ENCANTADO, PERO SOY DEMASIADO TORPE CON ESO DE LAS CSS Y EL FEDDBURNER, MI NIVEL DE INFORMATICA ES -10, TE AGRADECERIA QUE ME AYUDARAS CON ESTE PROBLEMA, CÓMO SE CUALES SON LOS MIOS (CSS Y FEDDBURNER)

    ResponderBorrar
    Respuestas
    1. Hola Soraya Mariano ¿Cuál es el problema exacto? te sale que ? no te funciona qué?

      Saludos,

      Borrar
  8. Andrés Felipe Lozano si es posible podemos cordinar para ver si te conectas via TeamViewer y revisas cual es el error.

    ResponderBorrar
    Respuestas
    1. Hola amigo, no, no puedo actualmente me encuentro en exámenes finales de mi Universidad...

      Saludos,

      Borrar
  9. Hermano no aparece la cajita.

    http://www.enghels.com/2015/11/como-aprender-orar.html

    ResponderBorrar
    Respuestas
    1. Hola Enghels y son muchas notificaciones de que no funciona verificaré el código para corregirlo disculpa el inconveniente pronto estará solucionado.

      Saludos,

      Borrar

ESTAMOS EN: