personalizar caja suscripcion feedburner

Personalizar caja de suscripción FeedBurner + 6 modelos

personalizar-caja-suscripcion-blog

En este tutorial vamos a ver cómo modificar el diseño de nuestra caja de suscripción Feedburner, a través de la cual nuestros/as suscriptores/as recibirán nuestros posts en su e-mail.  

ACTUALIZACIÓN IMPORTANTE ! !

Este método de suscripción no sigue La nueva ley de protección de datos y por lo tanto tiene los días contados. Cuando recoges datos de otras personas, sea cuales sean, debes tener el permiso expreso de la persona para usar sus datos. Te recomiendo que no lleves a cabo este tutorial y que pases directamente al modelo de e-mail márketing que Mailerlite nos ofrece.

Este tutorial es algo extenso en el vídeo, porque te explico el significado del código que FeedBurner nos proporciona. Puede que no creas conveniente verlo, porque no quieras aprender esta parte, pero sin duda, son 5 minutos que te harán poder modificar a tu gusto el código si así  lo quisieras. Si no te ofrezco algunos códigos para cajas molonas de suscripción en las que tan solo tendrás que modificar una parte.

  •  Para esto lo primero que debemos hacer es ir a Feedburner  

    Aparece en inglés pero siempre podrás hacer Click derecho a un lado de la página, para traducir a español, click en Traducir a español. Así podrás leer todo lo que te explica FeedBurner al respecto de cada página.

  • Click en el nombre de nuestro blog
  • Click en Publicize
  • Luego  clic en Email Subscriptions
  • y luego en Subscription Management: Aquí tendremos el código necesario para poder personalizar la caja de suscripción.
  • En Language elegimos Español
  • Copiamos el código que hay justo después. El del ejemplo es este:
<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=PruebasBloggerPasoAPaso', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="PruebasBloggerPasoAPaso" name="uri"/><input type="hidden" name="loc" value="es_ES"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="https://feedburner.google.com" target="_blank">FeedBurner</a></p></form>

El formato quedaría en inglés y muy poco personalizado. Se vería tal que así:

caja-suscripcion-feedburner

 Te aconsejo que más abajo selecciones la opción de recibir un e-mail cuando tus suscriptores/as se den de baja, aquí, mira:

  •  Después de haber copiado el primer código que nos aparece y haber clicado en esta anterior opción, le damos a Save/Guardar y listo. Pasamos a personalizar nuestra caja de suscripción Feedburner.

Para personalizar nuestro código, lo mejor es comprenderlo, y por eso te dejo un vídeo con otra forma de llegar a conseguir el código en FeedBurner si ya tienes suscriptoras/es

 Te explico qué partes corresponden a cada parte de tu caja de suscripción Feedburner para poder personalizarla de forma más concreta y autónoma.

Ahora te comparto los códigos ya personalizados para que los uses como quieras 🙂

Caja de suscripción FeedBurner personalizada

Ahora os dejo los diseños que he hecho por si se te complica el hecho de modificar código. Si quieres uno de estos códigos al final de ellos te lo explico.

IMPORTANTE: para copiar el código haz clic derecho sobre él y dale a seleccionar todo luego haz clic derecho de nuevo y dale a copiar, ya tendrás copiado el código.

  Caja de suscripción – Con borde de líneas:

caja-suscripcion-feed-burner-personalizada
VER CÓDIGO caja de suscripción de Feed Burner con borde de líneas
<span style="font-family: Courier New, Courier, monospace;"><form style="font-family: Arial; font-size: 12px; text-transform: uppercase; letter-spacing: 3px; color: #8fb59e; border:1px dashed #8fb59e;padding:10px;text-align:center;" action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=PruebasBloggerPasoAPaso', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<p><input type="text" style="width:175px; height: 30px; margin: 0 5px; padding: 5px; font-family: Arial; font-size: 11px; text-transform: uppercase; letter-spacing: 3px; color: #8fb59e;" name="email" placeholder="Escribe tu e-mail"/></p>
<input type="hidden" value="PruebasBloggerPasoAPaso" name="uri"/><input type="hidden" name="loc" value="es_ES"/><input style="font-weight: bolder; background-color:#8fb59e; font-family: Arial; font-size: 12px; text-transform: uppercase; letter-spacing: 3px; width: 190px; height: 40px; margin: 0px 10px 10px 10px; padding: 10px; color: #FFF; cursor: pointer; border: 0px solid #eee;" type="submit" value="Subscribirme ya!" /></form>
</span>

  Caja de suscripción Feedburner – En línea botón redondo

caja suscripción en línea redondo
Ver código   Caja de suscripción – En línea botón redondo
<span style="font-family: "courier new" , "courier" , monospace;"><form style="text-align:center;" action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('PruebasBloggerPasoAPaso', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<p>
</span><span style="font-family: "courier new" , "courier" , monospace;"><input type="text" style="width:45%; height: 25px; margin: 0 5px; padding: 5px; font-size: 16px;" name="email" placeholder="Tu e-mail" /><input type="hidden" value="PruebasBloggerPasoAPaso" name="uri"/></span><span style="font-family: "courier new" , "courier" , monospace;"><input type="hidden" name="loc" value="es_ES"/></span><span style="font-family: "courier new" , "courier" , monospace;"><input style="border-radius:50px;background-color:#8fb59e; font-size: 10px; letter-spacing: 2px;width: 35%; height: 40px; margin: 0 5px; padding: 5px; color: #FFF; cursor: pointer;text-transform:uppercase; border: 0px solid #eee;" type="submit" value="Suscribir" /></span><span style="font-family: "courier new" , "courier" , monospace;"></p>
</form>
</span>

Caja de suscripción Feedburner- En línea botón cuadrado

caja suscripción en línea cuadrado
Ver código   Caja de suscripción – En línea botón cuadrado
<span style="font-family: "courier new" , "courier" , monospace;"><form style="text-align:center;" action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('PruebasBloggerPasoAPaso', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<p>
</span><span style="font-family: "courier new" , "courier" , monospace;"><input type="text" style="width:45%; height: 25px; margin: 0 5px; padding: 5px; font-size: 16px;" name="email" placeholder="Tu e-mail" /><input type="hidden" value="PruebasBloggerPasoAPaso" name="uri"/></span><span style="font-family: "courier new" , "courier" , monospace;"><input type="hidden" name="loc" value="es_ES"/></span><span style="font-family: "courier new" , "courier" , monospace;"><input style="background-color:#8fb59e; font-size: 10px; letter-spacing: 2px;width: 35%; height: 40px; margin: 0 5px; padding: 5px; color: #FFF; cursor: pointer;text-transform:uppercase; border: 0px solid #eee;" type="submit" value="Suscribir" /></span><span style="font-family: "courier new" , "courier" , monospace;"></p>
</form>
</span>

Caja de suscripción Feedburner- Con fondo de color y botón redondo

VER CÓDIGO Caja de suscripción – Con fondo de color y botón redondo
<span style="font-family: "courier new" , "courier" , monospace;"><form style="background: #8fb59e;font-family: Arial; font-size: 12px; text-transform: uppercase; letter-spacing: 3px; color: #fff; border:0px dashed #fff;padding:10px;text-align:center;" action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=PruebasBloggerPasoAPaso', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<p>
Recibe en tu e-mail todas las novedades</p>
<p>
<input type="text" style="width:85%; height: 30px; margin: 0 5px; padding: 5px; font-family: Arial; font-size: 11px; text-transform: uppercase; letter-spacing: 3px; color: #8fb59e;" name="email" placeholder="Escribe tu e-mail"/></p>
<input type="hidden" value="PruebasBloggerPasoAPaso" name="uri"/><input type="hidden" name="loc" value="es_ES"/><input style="font-weight: bold;background:#fff; border:1px solid #fff; font-family: Arial;border-radius:20px; font-size: 12px; text-transform: uppercase; letter-spacing: 3px; width: 90%; height: 40px; margin: 0px 10px 10px 10px; padding: 10px; color: #8fb59e; cursor: pointer; border: 0px solid #eee;" type="submit" value="Subscribirme ya!" /></form>
</span>


Caja de suscripción Feedburner – Con fondo de color y botón cuadrado

VER CÓDIGO Caja de suscripción – Con fondo de color y botón cuadrado
<span style="font-family: "courier new" , "courier" , monospace;"><form style="background: #8fb59e;font-family: Arial; font-size: 12px; text-transform: uppercase; letter-spacing: 3px; color: #fff; border:0px dashed #fff;padding:10px;text-align:center;" action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=PruebasBloggerPasoAPaso', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<p>
Recibe en tu e-mail todas las novedades</p>
<p>
<input type="text" style="width:85%; height: 30px; margin: 0 5px; padding: 5px; font-family: Arial; font-size: 11px; text-transform: uppercase; letter-spacing: 3px; color: #8fb59e;" name="email" placeholder="Escribe tu e-mail"/></p>
<input type="hidden" value="PruebasBloggerPasoAPaso" name="uri"/><input type="hidden" name="loc" value="es_ES"/><input style="font-weight: bold;background:#fff; border:1px solid #fff; font-family: Arial; font-size: 12px; text-transform: uppercase; letter-spacing: 3px; width: 90%; height: 40px; margin: 0px 10px 10px 10px; padding: 10px; color: #8fb59e; cursor: pointer; border: 0px solid #eee;" type="submit" value="Subscribirme ya!" /></form>
</span>


Caja de suscripción Feedburner – Marco y efecto en botón

personalizacion de formulario de suscripcion
VER CÓDIGO Caja de suscripción – Marco y efecto en botón
<span style="font-family: "courier new" , "courier" , monospace;"><form style="border:5px solid #8fb59e;font-family: Arial; font-size: 12px; text-transform: uppercase; letter-spacing: 3px; color: #fff; padding:10px;text-align:center;" action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=PruebasBloggerPasoAPaso', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<p>
<input type="text" style="width:85%; height: 30px; margin: 0 5px; padding: 5px; font-family: Arial; font-size: 11px; text-transform: uppercase; letter-spacing: 3px; color: #8fb59e;" name="email" placeholder="Escribe tu e-mail"/></p>
<input type="hidden" value="PruebasBloggerPasoAPaso" name="uri"/><input type="hidden" name="loc" value="es_ES"/><input style="font-weight: bold;background:#8fb59e; border:1px solid #8fb59e; font-family: Arial; font-size: 12px; text-transform: uppercase; letter-spacing: 3px; width: 90%; height: 40px; margin: 0px 10px 10px 10px; padding: 10px; color: #fff; cursor: pointer; border: 2px dotted #fff;" type="submit" value="Subscribirme ya!" /></form>
</span>

Para usar estos diseños / códigos antes debes hacer un par de cambios muy sencillos en el código que copies.  

 Lo más importante es cambiar donde pone PruebasBloggerPasoAPaso y cambiarlo por lo que pone en tu código original de FeedBurner después de    uri=”   entre las comillas estará el nombre de tu feedburner, y es muy importante porque si no las personas que se suscriban no lo harás a tu blog, si no ¡¡Al mío de pruebas!! Modifícalo.  

Para hacer las modificaciones usa el Bloc de notas de tu PC que resulta muy cómodo.     

También deberías cambiar el color de las líneas, de los fondos… Los colores ya sabes que van después de la almohadilla.    

background: #fff; 

Este código se refiere al fondo, le da un color blanco, si modificas lo que va después de la almohadilla con el código de color HTML que elijas ya lo tendrás modificado    

color: #fff; 

Este código suele dar color al texto de la zona donde lo pongamos. Si lo modificas pasará lo mismo que en el caso anterior pero con el texto.     

border: 1px solid #fff; 

Este otro código da forma y color a la línea que rodea “algo” según donde lo coloques. Se compone de un número de píxeles ( 1px ) que define el grosor de la línea, cuanto más grande el número más gruesa la línea. Le sigue la forma de la línea, que la puedes poner solid que será una línea normal, o dashed que serán líneas discontinuas, o bien dotted que son puntos (aunque en píxeles al final son cuadraditos 😉 y por último encontramos el color, que viene siendo lo mismo que en los casos anteriores en los que te he hablado de modificar el color. Código HTML del color que elijas y listo.

VÍDEO QUE COMPLETA EL TUTORIAL

Una vez que lo tengamos todo listo y nuestro código modificado y personalizado en nuestro bloc de notas, vamos a añadirlo a nuestro blog.

O bien en nuestro sidebar / barra lateral de nuestro blog, o bien al final de nuestras entradas, ¿Te apetece?

En el próximo post te cuento cómo 🙂

Comparte

CONSIGUE

LA VIDA QUE DESEAS

GRACIAS A UN NEGOCIO ONLINE RENTABLE

Disfruta de mi curso gratuito “Cómo tener un Negocio Online Rentable no solo económicamente”, en el que comparto las áreas más importantes a trabajar para conseguir la vida que deseas con tu Emprendimiento Online.

Interacciones con los lectores

27 comentarios

  1. María Coll (Cazadores de Libros)

    ¡Holaaaa!
    Gracias por este tutorial, la verdad hacía tiempo que estaba buscando como hacerlo para que quedara una cajita de suscripción al menos medio decente y las que nos enseñas aquí son una pasada *-*
    Lo puse en el sidebar y me funcionó a la primera (^-^)/
    Estaré atenta al siguiente post, pues me gustaría ponerlo también en el pie de entradas.

    Besos^^

    • Mónica Lemos

      Ey!! Sabela!! jaja, muchas gracias!!! pues es que he nacido aquí hace unos 5 mesitos nada más 😉 per he intentado hacerlo lo mejor posible para que todo os resulte sencillo, claro y fácil!!! Espero haberlo conseguido!! 🙂
      Muaaack!

  2. Litta Kishkinda

    Hellow, gracias por ayudarnos 🙂 Tengo un problema con las cajitas que nos dejaste, ya he usado vaarias, pero al probarlas no sirven, es decir, me aparecen en el blog super cutes, pero al escribir un email y suscribirse no aparece ninguna ventana para llenar el feed burner, que será? me ayudas?

    (Yo solo le cambie lo que nos enseñaste, nada más)
    gracias

  3. Mónica Lemos

    Hola Litta, acabo de ver uno de tus articulos y he inspeccionado y hay muchísimos errores en el código. Ten cuidado al pasar al modo edición HTML y luego al normal… si editas después se estropea el código… Mi consejo es que lo elimines y lo vuelvas a realizar y que sea lo último que edites en el post.

    Tienes unas fotos muy chulas!!! Sigue trabajando en el diseño de tu blog 🙂

    Un saludo y gracias por el comentario

    • Mónica Lemos

      Genial Sara!!!, me alegro que te haya gustado… aunque lo mejor es ponerlo de forma automática!! Por que si luego quieres eliminar las cajas tienes que ir entrada por entrada eliminando!! A mi me ha pasado!

      Un saudo

  4. Junior

    Hola, linda. Gracias por estos maravillosos tutoriales que me son de mucha ayuda,
    Tengo una duda: elegí el ultimo cuadro de suscripción, pero lo quiero sin el cuadro que lo rodea ¿cómo hago para quitárselo? me ayudarías muchísimo si me respondes. De antemano muchas gracias.

  5. barbara manzanares

    ¡Hola Mónica! tengo un problema al insertar la caja, verás elegí la primera cajita pero al insertar el código ya modificado me sale el borde superior mas delgado que el de abajo. no se que habre hecgo mal pero si me pudises ayudar e lo agradeceria mil.
    gracias de antemano

  6. JR VerNo

    Que tal monica un gusto leerte la verdad excelente post, pero me quedo solo la duda de la actualizacion que pones que RGPD, lo puedo usar? Y no tendras por ahy algo sobre como poner el mensaje de cookies, yo lo tenia pero por mas que eh intentado, NO SALTA NUNCA, saludos

    • monicalemos

      pues es necvecsario que acepten la política de privacidad SIEMPRE… así que…yo no se lo recomendaría a nadie y mucho menos con negocio profesional… en sí solo se aplica a gente que vende cosas o usa sus datos para ciertos fines denunciables.
      Pero siempre mejor andar con todo legal
      Feedburner está muy obsoleto
      Gracias por tu comentario

  7. Saiduby

    Muchísimas gracias Mónica, por tomarte el tiempo de hacer esas cajitas tan lindas y además de explicarlo tal cual como se llama tu Blog: ¡Paso a Paso! Me encanta como quedó en mi blog. Un abrazo grandote.

  8. Brucedafalda

    Holaa! Me ha sido muy útil este post, está genial explicado. Me sale tal y como sale en esta página el único problema que no te deja subscribirte me sale una ventana de feedburner diciendo que no tengo la suscripción por email activa, no sé si es que no estoy copiando bien los códigos o no sé e.e

  9. Darío

    Hola, ¿a 2019 hay alguna posibilidad de implementarlo, alguna actualización para cumplir con la ley o alguna alternativa?

    Gracias por la información y muy buen blog. Saludos y que tengas buen día!

  10. Anónimo

    Hola !!! Por lo que leo, para cumplir con la RGPD entiendo que hay que dejar de usar Feedburner no? ¿cual es al alternativa? ¿tienes algún otro post para llevarlo a nuestro blogger? Con la RGPD me asusté y quité todo: comentarios, caja de suscripción…. pero creo que estoy perdiendo oportunidades y quiero retomarlo de nuevo.. ¿Por dónde crees que debo empezar? ¡1000 gracias!!

  11. Lorena

    Muchas gracias Monica. A la hora de editar el codigo eligiendo una plantilla d elas tutas no me permite eliminar el antiguo copido y pega el nuevo. ¿podrias echarme una mano por favor?
    Muchas gracias

  12. Leyda

    Hola, pero sí para cumplir con la solo debes de poner un checkbox que informe correctamente quien es , finalidad, eetc ,que está de acuerdo y listo.
    No tendrás problema cuando dejes tu enlace a política de privacidad o asunto legal
    Por cierto, este artículo me ayudo un mundo, mil gracias

  13. Edo

    Hola Mónica,

    Me gusta mucho la caja que tú llamas: “Caja de suscripción Feedburner- Con fondo de color y botón redondo” y la he puesto en mi blog. Un par de preguntas rápidas, ¿hay algún modo de cambiar el color verde del fondo? ¿Y de darle color al botón “suscribirme ya”?

    Muchas gracias por compartir tus diseños.

Deja tu comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *