17 de octubre de 2014

Tutorial Blogger: personalizar suscripción por email


¿Os gustaría tener un gadget de suscripción así de bonito?


Seguro que muchas veces navegando entre otros blogs has visto ese gadget de suscripción que no se parece en nada al tuyo; el que viene por defecto, si ese... ¡el de feedburner! pues tengo que decirte que seguramente se trate de ¡¡ese mismo!!

Pero con una ligera modificación que le da un toque diferente y cabe decir, más atractivo.

Tenía muchas ganas de probar con algún tutorial y he decidido empezar por este.
Un tutorial quizás un poco extenso, pero a la vez, prometo, muy sencillo. 

Vamos a personalizar tanto el mensaje de suscripción, como el texto y el diseño del gadget.

¿Quieres saber cómo?


¡Empezamos!


1. Añadir el gadget

Accedemos al menú de blogger:

 [ Diseño➜   Añadir un Gadget ➜  Seguir Por Correo Electrónico]

* Un consejo es ponerlo en una de las sidebars hacia la parte de arriba, cuanto más visible mejor.


2. Cambiar el idioma de Inglés a Español

Primero de todo es IMPORTANTE hacer una copia de seguridad, por si hubiese algún problemilla.


Accedemos al menú de blogger:


[ Plantilla ➜  Editar HTML ]  y buscamos lo siguiente:

   
 <div class='follow-by-email-inner'>


 * Para buscar dentro de la plantilla, solo tenemos que clickar dentro de esta y pulsar ctrl + F

Aquí vamos a hacer dos cosas:

La primera; hacer que el mensaje de suscripción aparezca en español.


Para esto cambiamos ⇨  value="en_US" por value='es_ES'

La segunda; modificar el texto que aparece en el gadget por lo que nosotros queramos.

Para cambiar el texto de dentro de la cajita
placeholder='Email address...' por placeholder='Dirección de Correo



Para cambiar el texto del botón de suscripción
value= 'Submit' por value= 'Suscribirse

(o la opción que creáis más conveniente)


Una aportación visual siempre ayuda.
3. Modificar la apariencia del gadget

El mensaje está cambiado, pero sigue siendo igual de soso, así que vamos a animar un poco el gadget con unos cambios muy sencillos añadiendo CSS.
 Vamos a ➜ Plantilla ➜ Personalizar ➜ Avanzado ➜ Añadir CSS y pegamos lo siguiente



/* Suscribirse
----------------------------------------------- */

#FollowByEmail1{
background:#ffffff; /*Color de fondo del gadget*/
}
.FollowByEmail .follow-by-email-inner .follow-by-email-address { /*Donde se escribe el correo*/
text-align:center;
width:100%;
padding:3px 0;
margin-left:-2px;
border:1px solid #eeeeee; /*Borde de la caja*/
font: normal normal 11px Arial; /*Fuente y tamaño que queremos usar*/
color:#aaaaaa; /*Color de las letras de dentro de la caja*/
}
.FollowByEmail .follow-by-email-inner .follow-by-email-submit { /*Botón para suscribirse*/
width:100%;
margin-left:0;
border:1px solid #333333;
border-radius:0;
-moz-border-radius:0;
padding:7px 0px;
height:auto;
background:#333333; /*Color de fondo del botón*/
font:normal normal 11px Arial; /*Fuente y tamaño que queremos usar en el botón*/
color: #ffffff; /*Color de las letras del botón*/
}
.FollowByEmail .follow-by-email-inner .follow-by-email-submit:hover{
 background:#cccccc; /*Color de fondo del botón cuando pasas el ratón por encima*/
 color:#ffffff; /*Color de las letras del botón cuando pasas el ratón por encima*/
}


Esto nos quedaría en una misma linea:







  




Pero si lo que queremos es darle otro toque y que nos quede la caja arriba y el botón justo debajo, como os he mostrado al principio del post, el código CSS será el siguiente:



/* Suscribirse
----------------------------------------------- */

#FollowByEmail1{
background:#ffffff; /*Color de fondo del gadget*/
}
.FollowByEmail .follow-by-email-inner .follow-by-email-address { /*Donde se escribe el correo*/
text-align:center;
width:100%;
padding:5px 0px;
margin-left:5px;
 position: absolute;
  top:  -35px;  /* Distancia de el título del gadget*/
  left: 0px;
border:2px solid #eeeeee; /*Borde de la caja*/
font: normal normal 12px Arial;  /*Fuente y tamaño que queremos usar*/
color:#aaaaaa; /*Color de las letras de dentro de la caja*/
}
.FollowByEmail .follow-by-email-inner .follow-by-email-submit { /*Botón para suscribirse*/
width:100%;
margin-left:0px;
border-radius: 0px; /*Si queremos bordes redondeados o no*/
 position: relative;
  top:  10px;  /*Distancia entre el botón y la caja de suscripción*/
  left: -115px; /*Margen izquierdo puede ser negativo o positivo*/
border:2px solid #eeeeee;
-moz-border-radius:0;
padding:10px 15px;
height:auto;
background:#333333; /*Color de fondo del botón*/
font:normal normal 14px Arial; /*Fuente y tamaño que queremos usar en el botón*/
color: #ffffff; /*Color de las letras del botón*/
}
.FollowByEmail .follow-by-email-inner .follow-by-email-submit:hover {
background:#cccccc; /*Color de fondo del botón cuando pasas el ratón por encima*/
color:#ffffff; /*Color de las letras del botón cuando pasas el ratón por encima*/
}



Consejos: Si le tienes pavor al código o aún no te sientes capaz de desenvolverte te recomiendo que empieces por el primero, más sencillo. Y cuando le cojas costumbre, pruebes con el segundo.



Algunas cosas que viene bien saber:



- No hay que temerle al código, es cuestión de ir probando.



-Para los margenes y posición, cada blog tiene su tamaño así que hay que ir ajustando el que mejor se adapte al nuestro. No hay que estresarse, al principio puede dar un poco de miedo, pero animo a probar, se consiguen cosas ¡muy chulas!



 - Para acceder al color que queramos os recomiendo Colorhexa.



- Para los bordes redondeados: 15-20px



- Opciones para border:










Podemos cambiar lo que esta de otro color, está indicado con un mensaje al lado del código lo que es cada cosa. Esto no interfiere en el código, así que nos puede servir de guía y no hay porqué borrarlo.





Modificar mensajes FeedBurner:



Una vez realizado todo esto tendremos listo nuestro gadget de suscripción, pero vamos a ir un poquito más allá y a darle un toque más personal a esos mensajes que se envían por defecto desde feedburder.


Para ello vamos a acceder al menú de feedburner. En nuestro feed tenemos unas pestañas, nos interesa la tercera: Publicize, y dentro de esta a Email Suscriptions.

Tenemos cuatro apartado, pero nosotros accederemos directamente a Comunication Preferences.
Aquí tenemos varias opciones por cambiar:


1. El mail desde el que llegan nuestros mensajes a los sucriptores, por defecto viene el de google, pero siempre es bueno poner el nuestro.



2. El mensaje de notificación de suscripción, que les aparecerá a nuestro seguidores. Viene en ingles por lo que recomiendo traducirlo a castellano.



3.  Y por último el mail que llega para confirmar la suscripción. También está en ingles, aconsejo personalizarlo. Pero hay una cosa que NO debemos borrar, puesto que es el enlace de confirmación, os lo muestro en esta imagen.






Si queremos darle un toque aún más personal a los mails que se enviarán a nuestros suscriptores, dentro de Email suscriptions, accedemos a Email Branding.











Y ahora si, por último! Dentro del apartado Delivery Options, cambiamos la zona horaria y el intervalo de horas en el que queremos que lleguen nuestros mensajes a los suscriptores.








Espero que no os haya aburrido demasiado, que hayáis conseguido vuestro objetivo o ayudado de alguna forma, si tenéis alguna duda no dudéis en comentar.



Muchas gracias, y ¡feliz día! :)

17 comentarios:

  1. ¡Gracias! la verdad es que uso uno que regalan en una web, pero se nota de lejos que no es mio jajaja.

    ResponderEliminar
    Respuestas
    1. Si lo pruebas de hacer ya me dirás si has tenido algún problema o hay algo que no se entienda bien!! :)

      Eliminar
  2. Y yo justo que me di de alta a Mailchimp :( que bonito!!!

    ResponderEliminar
    Respuestas
    1. A mi mailchimp me da la impresión que es de cara a algo más profesional, y que hay que dedicar más tiempo en cuanto a contenido exclusivo... prefiero algo más sencillo de momento :)

      Eliminar
  3. En primer lugar muchas gracias por el post, el cuál me ha sido muy útil. Con respecto al segundo código, he podido comprobar que el botón se ve bien en el navegador Google Chrome. Sin embargo, en internet explorer aparece situado un poco más abajo y en firefox aparece muy estrecho (impidiendo prácticamente que se vea el texto de su interior) :)

    ResponderEliminar
    Respuestas
    1. Me alegro de que te haya sido útil! es posible que en chrome se vea bien porque es el navegador que utilizo normalmente y lo ajusté desde ahí.

      Lo que puedes probar para solucionar el el hecho de que el botón esté situado más abajo te recomiendo ir cambiando el:

      position: relative;
      top: 10px; /*Distancia entre el botón y la caja de suscripción*/
      left: -115px; /*Margen izquierdo puede ser negativo o positivo*/

      El top y el left.

      y para solucionar el tamaño cambiar el:

      padding:10px 15px;

      Espero haber ayudado, muchas gracias por comentar! :)

      Eliminar
  4. No puedo modificar en mi plantilla el gadget, y al meterme en Feedburner no puedo modificar el código hexadecimal del color del título de cada entrada, pero me parece un tutorial formidable. Muuuuuuuuuuuuchas gracias. Un besazo.

    ResponderEliminar
    Respuestas
    1. No puedes modificarlo en la opción de CSS?? Tienes otra opción que es modificarlo directamente desde el HTML, pero es más líoso.

      Lo del código de feedburner, tienes que introducirlo de forma manual en base a la tabla de colores que acepta. Aunque elijas un color y a ti no te salga, al enviarlo, si que sale ese color. Recuerdo que me pasaba lo mismo,, y pensaba que no podía modificarlo.

      Me alegro mucho que te haya gustado el tutorial a ver si me pongo con alguno más!!

      mil gracias! :)

      Eliminar
    2. Gracias Ainara. Lo de los colores en Feedburner ya lo he averiguado. Ahora mi duda es si se puede incorporar algún campo extra en la caja. Quiero personalizar desde Mailchimp mi lista y por supuesto la newsletter, y quisiera poder disponer del nombre de cada suscriptor. Un abrazo.

      Eliminar
    3. Cómo se modifica desde HTML? A mi no me funciona hacerlo por CSS...

      Eliminar
    4. Para modificar HTML, deber ir a diseño, edición HTML. Click en la plantilla, click Ctrl+F, y buscas /b:skin. Justo antes de esto, pegas el código del tutorial, y te debería funcionar sin problemas.

      Eliminar
  5. Hola! Justo ayer agregue la suscripcion a mi blog asi que luego voy a intentar personalizarlo. Este post me viene de maravilla. Besito

    ResponderEliminar
  6. Hola. El tutorial es buenísimo, pero no me funciona. Hice todo, pero cuando quiero suscribirme (con otra cuenta, por supuesto), me aparece un cartel que dice "The feed does not have subscriptions by email enabled". Qué hice mal...? Mil gracias y feliz año!

    ResponderEliminar
    Respuestas
    1. Ana! perdón por no contestar lo vi tarde y ya lo habías solucionado!! cualquier cosa que necesites ya sabes!! :)

      Eliminar
  7. No se como modificar la forma del mismo, gracias a que tuve un enredo con el código CCS, me echan una mano?;(

    ResponderEliminar
  8. Gracias por este tutorial y la explicación muy entendible! Me sirvió. Saludos!

    ResponderEliminar

LinkWithin