SLIDER

¡Hola!

Mónica Lemos
¡Hola! Soy Mónicay quiero que empieces a crear tu blog o tu canal de youtube sin complicaciones. Aquí descubrirás cómo.
TODO EL CONTENIDO

ES GRATUITO

Por ello no puedo crear contenido
con regularidad, de hecho tengo que dejarlo por el momento
Si quieres hacerme un regalo para agradecer todo el contenido gratuito de que puedes disfrutar gracias a mi esfuerzo puedes hacerlo aquí , quizás pueda seguir creando nuevo contenido útil. Gracias!

Suscríbete

¿Quieres asegurarte de que tus posts estén perfectos antes de ser publicados?
Te regalo una Check-List que te ayudará en esto.


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

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.

 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

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.

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




   

6 comentarios

  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

© Blogger Paso a Paso • Theme by Maira G. Adaptada por Mónica Lemos, autora de este blog.
Todas las imágenes son del banco de imágenes Unsplash.com o bien de mi propia autoría.
Si quieres puedes reclamar tu autoría - Contactar con la autora del blog.