Tutorial: Formulario atractivo para suscripciones en FeedBurner

  • Autor Autor davidtorresruiz
  • Fecha de inicio Fecha de inicio
davidtorresruiz

davidtorresruiz

Delta
Programador
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Hola mis amigos de ForoBeta!

:drunk: Aca les dejare un hermoso formulario hermoso para que se suscriban miles de usuarios en su Web o Foro mediante Feedburner, dure varias horas desarrollandolo para publicarlo en mi Blog y en Forobeta, espero que les guste mucho, lo hice con mucho amor a la programación.

Tutorial%u00252BBlogger%u00252BAtractivo%u00252Bformulario%u00252Bde%u00252Bsuscripcion%u0025...webp

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).

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:



PHP:
<!--  Style Suscríbete al Blog HablaChento.BlogSpot.Com!  -->

    #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=&quot;email&quot;]{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=&quot;submit&quot;]{height:36px;background:#47C8C3;color:#fff;font-size:15px;padding:0 20px}
    #subscribe-floater input[type=&quot;submit&quot;]:invalid{border-color:#ED5260;background:#ED5260}
    #subscribe-floater input[type=&quot;email&quot;]:required:focus:valid{border-color:#4aa342}
    #subscribe-floater input[type=&quot;email&quot;]:required:focus:valid + input[type=&quot;submit&quot;]{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}

     <!-- FIN  Style Suscríbete al Blog HablaChento.BlogSpot.Com!  -->

:encouragement: 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

PHP:
 <!-- Suscripcion FeedBurner de HablaChento -->

<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>

  <!-- FIN suscripcion FeedBurner de HablaChento -->

SPAM | REFERIDOS

Gracias a los compañeros que les gusto mi tutorial, cualquier duda, sugerencia me la hacen llegar al privado o por este medio, más imagenes o información en la fuente del tutorial. :encouragement:
 
Última edición por un moderador:
Increible me lo llevo!
 
Gracias por compartirlo con nosotros, está de lujo:welcoming:
 
Tiene buena pinta, solo has olvidado actualizar el del lado derecho de tu web.
 
Esta muy bueno bro! Gracias por compartir 😱
 
Verga mijo vos como que sois paisano mio, que molleja de bueno esta el blog tuyo. :encouragement:
 
Muchas gracias me sirve :encouragement:
 
Se agradece:encouragement:
 
Jajajaja tu eres maracucho rajado jajaja paisano! Si a la orden. :encouragement:

Verga mijo vos como que sois paisano mio, que molleja de bueno esta el blog tuyo. :encouragement:
 
Me agrada la parte de evitar spam, voy a darle una checada y muchas gracias por compartir, a muchos nos sera util
 
No entiendo por que mis tutoriales el moderador le quita mi URL que es la fuente de donde provienen los tutoriales ?? SPAM | REFERIDOS, Última Edición por cicklow; Ayer a las 15:40
 
Al parecer colocaste algún enlace de referido en tu tutorial, otro problema es que los tutoriales deben tratar de ser originales y en este caso al parecer es un copy paste de algún articulo de tu blog lo cual se puede confundir que estas haciendo spam para que visiten tu blog o ganar un enlace.
 
No entiendo por que mis tutoriales el moderador le quita mi URL que es la fuente de donde provienen los tutoriales ?? SPAM | REFERIDOS, Última Edición por cicklow; Ayer a las 15:40

¿Preguntas porqué te tienen fichado luego de que pusiste código malicioso en un tutorial?

Además que es obvio que lo haces como spam y no por aportar :/.

kj
 
Gracias man de seguro le sacare provecho

- - - Actualizado - - -

¿Preguntas porqué te tienen fichado luego de que pusiste código malicioso en un tutorial?

Además que es obvio que lo haces como spam y no por aportar :/.

kj

El codigo es malicioso?? el de este tutorial? 😵
 
A revisar, gracias 🙂
 
¿Que hay que modificar para que la suscripcion sea a nuestro blog y no la de el?
 
Para nada no voy a estar colocando codigos malisiosos en forobeta... :grumpy:


Gracias man de seguro le sacare provecho

- - - Actualizado - - -



El codigo es malicioso?? el de este tutorial? 😵
 
dentro del codigo aparece la url de tu blog, eso se puede cambiar?
 
Atrás
Arriba