Tutorial Blogger: Atractivo formulario de suscripción FeedBurner

CONSIGUE MILES DE SUSCRIPTORES POR FEEDBURNER

Este tutorial de formulario atractivo de suscripciones por FeedBurner, es espectacular para conseguir miles de suscriptores ya que está programado con style y script, al colocar tu correo electrónico correctamente el formulario detectara que está bien escrito con el @ y se colocara el borde del campo color verde, si no detecta el @ se colocara el botón en celeste y el borde del campo del E-Mail en Rojo, si el campo del E-Mail se encuentra vacío y le das clic en el botón suscribirse aparecerá un aviso que le dirá al usuario: (rellene este campo), si escribes el E-Mail sin el @ dirá: (introduzca una dirección de correo).

Imagen Nº1 Atractivo formulario de suscripción FeedBurner

Imagen Nº2 Atractivo formulario de suscripción FeedBurner

Su presentación o titulo es muy llamativo para animar al usuario a suscribirse ya que dice lo siguiente: ¡Suscríbete al Blog! ¿Quieres recibir los artículos directamente en tu email? Suscríbete aquí.

Cuando coloques tu E-Mail correctamente y le des clic a Suscríbete saldrá una ventana pop de 550 ancho por 520 de largo donde colocaras el código o letras del captcha para prevenir el spam.

Comencemos:

Nos vamos a la pestaña que esta a mano izquierda a PLANTILLA = > EDITAR HTML, luego le damos a la tecla Ctrl + F y luego pegamos </style> antes de </style> pegamos el siguiente código style, que es el que le dará el color a lo que hablamos anteriormente:

Imagen Nº 3 Atractivo formulario de suscripción FeedBurner

#subscribe-floater.open{right:50px}
#subscribe-floater input{border:1px solid #47C8C3;height:26px;float:left;-webkit-border-radius:0;-moz-border-radius:0;-webkit-appearance:none;border-radius:0}
#subscribe-floater input[type="email"]{width:189px;height:32px;border-top:1px solid #e6e6e6;border-left:1px solid #e6e6e6;border-bottom:1px solid #e6e6e6;background:#fff!important;padding:1px 5px;color:#999}
#subscribe-floater input[type="submit"]{height:36px;background:#47C8C3;color:#fff;font-size:15px;padding:0 20px}
#subscribe-floater input[type="submit"]:invalid{border-color:#ED5260;background:#ED5260}
#subscribe-floater input[type="email"]:required:focus:valid{border-color:#4aa342}
#subscribe-floater input[type="email"]:required:focus:valid + input[type="submit"]{border-color:#4aa342;background:#4aa342}#subscribe-floater .x{position:absolute;right:13px;top:9px;font-size:14px;color:#222}
#subscribe-floater h1{font-size:32px;color:#333;margin:0}

 Una vez echo ese paso nos vamos a la pestaña que está a mano izquierda => Diseño para agregar por fin el formulario de suscripción FeedBurner, le damos clic a Añadir Gadget y luego buscamos HTML/Javascript Añadir le das clic y pegas el siguiente código:

Imagen Nº 4 Atractivo formulario de suscripción FeedBurner

<div id="subscribe-floater">
   <h1>¡Suscríbete al Blog! <i></i></h1>    <p>
¿Quieres recibir los artículos directamente<br /> en tu email? Suscríbete aquí.</p>

<div class="follow-by-email-inner">
<form action="https://feedburner.google.com/fb/a/mailverify" method="post" onsubmit='window.open("https://feedburner.google.com/fb/a/mailverify?uri=BienvenidosAHablachento", "popupwindow", "scrollbars=yes,width=550,height=520"); return true' target="popupwindow" method="post" onsubmit="if ((/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/).test(this.email.value))subscribe(this.email.value);this.email.value='';return !1">
<input class="follow-by-email-address" type="email" required="required" pattern="^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$" name="email" placeholder="Ingresa tu Email" />
<input class="follow-by-email-submit" value="Suscríbete" type="submit" />
<input name="uri" value="BienvenidosAHablachento" type="hidden" />
<input name="loc" value="es_ES" type="hidden" />
   </form>
</div></div>



Demo: AQUI

Si crees que este tema te intereso puedes suscribir tu E-Mail AQUI para seguir de cerca nuestros temas.