Cuadro de suscricion a nuestro blog

ver demo

 Hoy vamos a mostrar varias manaras de hacer una caja de suscripción para nuestra pagina.



1. Cuadro de suscripción de un texto con hipervínculo.

Esta caja saldrá cuando un visitante haga clic en el texto del hipervínculo,apareciendo cono teaser de suscripción.
Para ello por ejemplo ponemos un texto debajo de nuestra entrada como SUSCRIBETE y al pichar en este link nos parecerá esta ventana emergente, donde pueden suscribirse por vía e-MailPara agregarlo nos tenemos que  ir a 
Plantilla> Editar HTML
Como siempre sugiero tenemos que hacer una copia de seguridad de nuestra plantilla y guardarla en el disco duro por si algo no nos sale bien.

     Buscamos con CTRL+F 
 ']]> </ b: skin>'
     Una vez lo tengamos visualizado en nuestra plantilla pegamos el siguiente código encina.

 .newsletter-sm {
background:#fff;
width: 100%;height: 253px;
margin: 0;
padding: 20px;
}
.newsletter-sm form {
padding: 10px;
margin-top: -37px;
}
.newsletter-sm h3 {
color: #FFF;
font-family: algerian;
font-size: 24px;
font-weight: normal;
text-align: center;
padding: 10px;
text-shadow: 2px 2px 2px #000;
margin-top: -18px;
box-shadow: 0px 0px 5px 2px #000;
margin-right: -20px;
position: static;
margin-left: -20px;
margin-bottom: 10px;
background: #009EFF;
}
.text {
  font-size: 14px;
  color: #FFF;
  margin-left: -20px;
  padding-bottom: 28px;
  margin-right: -20px;
  background: #009EFF;
  font-family: cursive;
  line-height: 20px;
}
.newsletter-sm .fa {
  float: left;
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 16px;
  padding-top: 7px;
  font-size: 140px;
}
.newsletter-sm .newsletter-input-sm {border: 0;
  padding: 5px 10px;
  width: 69%;
  float: left;
  height: 40px;
  font-family: oswald;
  color: #555;border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px;}
.newsletter-sm .newsletter-sm-bot{  background: #009EFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHhTxWVFcKU8JxNbqmccI5fhaemvrZNEvgJyS3zRHCW96tXuz9bO6PScznSzuzhk_Yjz_v93cw3b0TKfYgEJWdE5A1eahP8DV2qjrIuAqryqpRlRQqHLPLHSq5gAVgLD3b705Iff6PLj8/s1600/bg.png) no-repeat;
  margin: 27px -30px 0px;
  height: 64px;
  padding-left: 16px;
  padding-top: 16px;
}
.newsletter-sm .newsletter-button-sm {
  float: right;
  height: 50px;width:23%
  display: inline-block;
  text-shadow: 2px 2px 1px #000;
  font-size: 16px;
  font-family: oswald;
  padding: 10px 22px;
  position: relative;
  color: #fff;
  text-align: center;
  margin-right: 16px;
  background: #009EFF;
  border: 1px solid #fff;
  cursor: pointer;
  border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
.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!important;
position: absolute;
top: 1px;
right: -40px;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 16px;
}
.close:hover { text-decoration:none; }
.close:hover { color:#555; } 
         

Ahora buscamos </body> y justo encima pegamos este otro código que hará que funcione la caja.

<div class="modalDialog" id="signup">
<div>
<a class="close" href="#close" title="Close"><i class="fa fa-times"></i></a>
<div class="signup-container">
<div class="newsletter-sm">
<h3>Subscribe to Newsletter</h3>
<div class="text"><i class="fa fa-envelope"></i><br><div class="texts">Subscribe us to get all our juicy article fastly. You know how and where? Directly on your inbox! Just enter your nice and good looking email id below and click on subscribe button! After that, verify it through the verification email and start learning more!</div></div>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=tntbystc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<div class="newsletter-sm-bot">
<input class="newsletter-input-sm" name="email" placeholder="Enter Your Email" type="text">
<button class="newsletter-button-sm" type="submit">Subscribe</button>
</div>
<input name="uri" type="hidden" value="tntbystc">
</form>
</div>
</div>
</div>
</div>
         

Ahora haremos algunos cambios antes de guardar la plantilla.

tntbystc lo cambiaremos por el codigo de su Feed

Cambiamos el texto resaltado por el texto que deseemos.

<input class="newsletter-input-sm" name="email" placeholder="Enter Your Email" type="text">

Cambiamos Enter Your Email por nuestro email  ejem… nombre@gmail.com

 text por el texto que queramos

Imprimir entrada