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í:
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:
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
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
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
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 🙂
¡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^^
Hola María!! 🙂
¿A que dan mucho juego? Cambia mucho la impresión del formulario! Estoy deseando ver cómo te queda!! ya me contarás 🙂
Muaack
Hola Mónica!!
Gracias por el tutorial, ya cambié la mía también y estaré atenta al siguiente 😀
Besos guapa <33
Hola Sandra!! Me he ido corriendo a ver tu blog!! y menuda sorpresa! ya has hecho muchos cambios! 😉 Me encanta!! Sigue así! 🙂
Muaaack!!!
Me hago tu fan! Dónde has estado todo este tiempo? jaja
Gracias por todos los recursos que nos pones al alcance de las más novatas en el mundo blogger. Un beso!
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!
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
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
por que no se copian los códigos???
Mil gracias!!!Hecho. De momento he probado en una entrada (la última) y lo he añadido para las futuras.
De nuevo muchas gracias por tanta y tan buena información. :-*
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
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.
Hola Junior,
solo elimina esto
border:5px solid #8fb59e;
y listo!!, la parte del border, es la que da bordes.
Un saludo y gracias!
¡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
Hola Bárbara, qué lindo está quedando tu blog!! Pues la verdad , no sé qué puede ser… debes revisar el código, no deberías tener problema.
Uns aludo!!
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
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
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.
¡Un placer!??✨
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
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!
Holaaaa, que yo sepa no, es que feedburner está muy desactualizado :(((
saludos
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!!
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
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
Eso es Leyda, muchas gracias me alegra haberte ayudado
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.
Hola Monica , cuando pongo el nombre de mi blog me sale esto. cual pincho, gracias por todo , decir que tengo tu plantilla woman, por si te sirve de ayuda . mil gracias por tu labor. me esta ayudando mucho.
Atom 1.0: https://www.conexionmagica.com/feeds/posts/default
RSS 2.0: https://www.conexionmagica.com/feeds/posts/default?alt=rss