13 jul. 2016

Tutorial Blogger: Personalizar caja de suscripción de FeedBurner + 6 modelos

  • 8:00
  • por
personalizar-caja-suscripcion-blog

Empezamos con los extras del curso gratuíto crea y diseña tu blog desde cero paso a paso, y en esta primera clase extra, que me habéis solicitado, vamos a ver, cómo modificar el diseño de nuestra caja de suscripción de Feedburner, a través de la cual nuestros/as suscriptores/as recibirán nuestros posts en su e-mail.

Este tutorial es algo extenso en el vídeo, porque te explico lo mejor que puedo, 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.

ACTUALIZACIÓN: La nueva ley de protección de datos RGPD impide que el uso de este tipo de suscripción sea válido. NO LO USES, pronto te daré nuevos recursos gratuitos.

 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 mío 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.

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



  Caja de suscripción - En línea botón redondo

caja suscripción en línea redondo

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


caja suscripción en línea cuadrado


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








Caja de suscripción - Con fondo de color y botón cuadrado






Caja de suscripción - Marco y efecto en botón

personalizacion de formulario de suscripcion



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 discontínuas, 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 :)

¿Te ha resultado fácil? ¿Quieres modificar la caja de suscripción de otro proveedor de suscripciones? Déjame en comentarios todas las respuestas y todas tus dudas, porfa :)



Curso gratis paso a paso para crear un blog y diseñarlo a tu gusto con videotutoriales

Mónica Lemos

Me apasiona la educación, en su sentido más amplio. Son muchos mis centros de interés, por ello creo que ser Blogger o Youtuber es una oportunidad de compartir lo mejor de cada persona al mundo. Mientras estoy intentando evolucionar 'educadamente' en esta 'loca' sociedad. Desde este rincón puedo ayudarte con asesorías y servicios ¿Te animas?

Comenta dudas, opiniones...



Ya han comentado 14 veces:

  1. ¡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^^

    ResponderEliminar
    Respuestas
    1. 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

      Eliminar
  2. Hola Mónica!!
    Gracias por el tutorial, ya cambié la mía también y estaré atenta al siguiente :D
    Besos guapa <33

    ResponderEliminar
    Respuestas
    1. Hola Sandra!! Me he ido corriendo a ver tu blog!! y menuda sorpresa! ya has hecho muchos cambios! ;) Me encanta!! Sigue así! :)
      Muaaack!!!

      Eliminar
  3. 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!

    ResponderEliminar
    Respuestas
    1. 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!

      Eliminar
  4. 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

    ResponderEliminar
  5. 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

    ResponderEliminar
  6. 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. :-*

    ResponderEliminar
    Respuestas
    1. 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

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

    ResponderEliminar
    Respuestas
    1. Hola Junior,
      solo elimina esto
      border:5px solid #8fb59e;

      y listo!!, la parte del border, es la que da bordes.

      Un saludo y gracias!

      Eliminar
  8. ¡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

    ResponderEliminar
    Respuestas
    1. 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!!

      Eliminar