17 octubre 2015

Cómo crear un banner de suscripción y personalizarlo



Crear un banner de suscripción en Blogger con Feedburner




Has creado tu blog, lo estás poniendo bonito, a tu gusto y quieres que todos lean tus contenidos y lo que tienes que contar. Puede que aún no lo veas como un futuro negocio, puede que ni te hayas planteado vivir de lo que cuentas en él (que podrías, tiempo al tiempo), pero lo que tienes claro es que no le quieres hablar sólo a los grillos que pululan por alrededor.


Así que aquí vengo con el 1º paso que debes dar, para empezar a atraer lectores hacia tu contenido: el banner de suscripción.








Esta parte de tu blog es importantísima (de las que más) y desde ya te digo, que aunque ahora mismo sólo veas tu blog como un hobby, te debes tomar este paso muy en serio, porque de él dependerá en gran medida que tus contenidos se lean.

Piensa que una persona que descubre tu blog, (ya sea a través de una búsqueda en Google o cualquier enlace en redes sociales) puede mostrar interés por algunos de tus artículos, pero una vez termine de consumir la información que le interesa, se marchará, quizás para nunca volver... a menos que se lo pongas fácil, ofreciendo mandarle los contenidos directamente a su bandeja de entrada.

Y eso, sí que lo consultan prácticamente a diario, sino, dime cuántas veces a la semana (o al día) consultas tú el e-mail ¿eh?



En este tutorial te voy a mostrar cómo instalar un banner para que tus entradas se envíen automáticamente a los lectores que se suscriban y de paso, vamos a ponerlo "guapete", para que den más ganas de apuntarse ¿te parece?

Eso sí, te aviso de que este banner es provisional (o debería serlo), porque si quieres ir en serio con tu blog, debes trabajarte tu marca, sobre todo si deseas monetizarlo y un feed automático, no deja de ser un robot y ya se sabe, que son máquinas frías, que ayudan, pero no transmiten nada.

Tienes a tu alcance un curso gratuito que he preparado para mi Comunidad Demo 2.0, sobre cómo crearte una cuenta en Mailrelay y empezar a cuidar la relación con tus lectores mediante su bandeja de correo, porque es un sistema que aporta muchos beneficios (y no sólo a nivel material), pero si aún no te ves preparada para dar un paso más con tu blog, te dejo este método de suscripción, que te permitirá no perder para siempre de vista a las visitas que te llegan.

Y lo mejor es que después podrás exportar todos esos suscriptores a tu lista en Mailrelay, para poder crear una relación más cercana con tu público.

Así que, dicho esto, vamos a empezar. 



Activa tu feed en Feedburner


  • Dirígete a Feedburner
  • Te aparecerá este recuadro de acceso, identifícate con tu cuenta y contraseña gmail.


Registrarse en Feedburner

  • Nada más entrar, te aparecerá tu blog, si ya lo habías activado a través de RSS.
  • Si no te aparece, en la casilla de texto, escribe la dirección de tu blog y elige la opción RSS
  • Ponle un título a tu feed, no te quedes con el que te propone Feedburner por defecto. Si tu nombre ya está cogido, añade una palabra más. Por ejemplo, imagina que el nombre de tu blog es "Mi blog bonito" y has elegido miblogbonito para el feed, pero no te lo acepta porque ya lo está usando otra persona en Blogger. Entonces una opción sería añadirle una palabra detrás, por ejemplo, miblogbonitoposts



Crear un feed en feedburner













  • Ahora ve directamente a la gestión del feed, clica en la pestaña "Publicize" , activa "Suscripciones por email" y cambia el lenguaje a español.


  • Y aquí tenemos dos opciones:

     Copiar el codigo que aparece debajo e insertarlo directamente en el blog, para personalizar el banner que nos suministra Feedburner.

     Diseñar un banner de suscripción desde cero y añadir el código después.

    personalizar el banner de suscripción



    Vamos a ver las dos alternativas por separado.

     Personalizar el código de Feedburner


    Copia este código en un documento de texto, por ejemplo el bloc de notas y personaliza todo lo que te he marcado en celeste:


    <div class= "suscripcion-feed"><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=EnvuelveloBonito', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>TEXTO QUE QUIERES QUE APAREZCA EN EL BANNER</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="EnvuelveloBonito" name="uri"/><input type="hidden" name="loc" value="es_ES"/><input type="submit" value="TEXTO PARA EL BOTON" /><p>Delivered by <a href="https://feedburner.google.com" target="_blank">FeedBurner</a></p></form></div>


     En border:1px solid #ccc; podemos elegir el grosor del borde del banner, cuanto más aumentemos, más gordito será. A continuación definiremos el tipo de línea de nuestro banner, yo he elegido solid, pero puedes cambiar entre estos 6 tipos de líneas (solid, dashed,dotted,double, ridge,groove). Aquí debajo te dejo una imagen de la apariencia de cada una:

    tipos de lineas css

    Y en #ccc, podrás ponerle el color que quieras. Si no tienes ni idea de cómo añadir color con números hexadecimales, no te pierdas este artículo, en el que lo explican muy bien.



     Con padding: 3px; podemos ampliar la separación entre la caja y el texto. Yo te aconsejaría que lo pusieras al menos en 10px, para que no quede muy agobiado.


     También puedes elegir la disposición del texto gracias a text-align: center; que significa centrado, pero si prefieres que quede a la izquierda (left), a la derecha (right) o justificado (justify), sólo tienes cambiarlo.


     El resto de código a modificar es el texto que deseas que aparezca en tu banner (tanto en el mensaje inicial como en el botón). Te aconsejo que elijas bien el mensaje que vas a dar, por ejemplo, si por ahora sólo estás dispuesta a enviar tus contenidos sin más, puedes poner un mensaje similar al que tienes en los ejemplos de banner que vas a ver a continuación. Y si por el contrario, ya tienes pensado algún tipo de contenido exclusivo para tus suscriptores, hazlo saber igualmente. Lo importante es que pongas lo que pongas, lo cumplas a rajatabla, no prometas nada que después no vayas a hacer, porque eso te dará mala reputación.

     Por último, antes de ver los ejemplos de banner que he personalizado, te comento que lo que está en negrita es la dirección del feed (en este caso del feed de uno de mis blogs), eso quiere decir que tienes que sustituirlo por el tuyo, o esos suscriptores me llegaran a mi    ¡Ah, se me olvidaba!, lo que está en verde es la atribución de Feedburner, asi que si no quieres que aparezca, elimínalo directamente)


    Aquí tienes algunos ejemplos de personalización que le he dado al banner (pasa el ratón por encima para ampliar la imagen):





    • En la 1ª imagen, he redondeado las esquinas de la caja, añadiendo border-radius: 25px; antes  de border:2px solid #ffadaa; también he añadido un fondo de color y he cambiado el tamaño del texto, de modo que el código quedaría así:




    <div class= "suscripcion-feed"><form style="border-radius: 25px;border:2px solid #ffadaa;padding:3px;text-align:center;font-size: 16px;background: #fecdc9; " action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=EnvuelveloBonito', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>¿Te gustan los contenidos? Dame tu correo y te los envío directamente</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="EnvuelveloBonito" name="uri"/><input type="hidden" name="loc" value="es_ES"/><input type="submit" value="Me suscribo" /></form></div>


    (Tan sólo tienes que cambiar los valores de border-radiusfont-size y background, por los que te apetezcan. Ten en cuenta que cuanta más cantidad añadas al valor de border-radius, más se redondearan las esquinas)




    • Para la 2ª imagen he vuelto a dejar las esquinas cuadradas, he anulado el borde de la caja (no hace falta que lo borres, tan sólo deja el valor a 0, por si en un futuro se lo quieres añadir) y he ampliado el espacio desde el texto hasta los márgenes, para darle "aire" a la caja ¿a que queda mucho mejor? pues recuerda que se consigue aumentando el padding, en este caso lo lleva de 25px. Aquí tienes el código:





    <div class= "suscripcion-feed"><form style="border-radius: 0px;border:0px solid #ffadaa;padding:25px;text-align:center;font-size: 16px;background: #fecdc9; " action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=EnvuelveloBonito', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>¿Te gustan los contenidos? Dame tu correo y te los envío directamente</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="EnvuelveloBonito" name="uri"/><input type="hidden" name="loc" value="es_ES"/><input type="submit" value="Me suscribo" /></form></div>





    • La 3ª imagen, lleva un borde punteado y el fondo blanco. Transmite limpieza y sencillez, que es la estética que impera actualmente en el diseño de un blog. ¿Te gusta? pues este sería el código:





    <div class= "suscripcion-feed"><form style="border-radius: 0px;border:1px dotted #ffadaa;padding:25px;text-align:center;font-size: 16px;background: #fff; " action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=EnvuelveloBonito', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>¿Te gustan los contenidos? Dame tu correo y te los envío directamente</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="EnvuelveloBonito" name="uri"/><input type="hidden" name="loc" value="es_ES"/><input type="submit" value="Me suscribo" /></form></div>





    • Y si quieres añadir una imagen de fondo para tu banner de suscripción, debes  pegar la dirección de la imagen, en el apartado background de esta manera background: url (dirección de tu imagen). Eso si, cuida que sea un fondo suave o tus lectores se van a dejar los ojos tratando de adivinar lo que pone en tu texto. Aquí el código de la 4ª viñeta, para incluir una imagen de fondo:





    <div class= "suscripcion-feed"><form style="border-radius: 0px;border:1px dotted #ffadaa;padding:25px;text-align:center;font-size: 16px;background: url(http://i61.tinypic.com/23h5b34.jpg); " action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=EnvuelveloBonito', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>¿Te gustan los contenidos? Dame tu correo y te los envío directamente</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="EnvuelveloBonito" name="uri"/><input type="hidden" name="loc" value="es_ES"/><input type="submit" value="Me suscribo" /></form></div>


    *Por cierto, el fondo pertenece a May de Creative Mindly, es uno de los 100 preciosos fondos, que diseñó para ofrecer a sus lectoras. Me imagino que ya la conoces, pero por si acaso, ahí tienes el link para echarle un vistazo y disfrutar de todos los backgrounds tu también.


    Ok, ya tengo el código personalizado ¿y ahora qué hago?



    Ahora tienes que copiar todo el código, dirigirte a Diseño y clicar en Añadir un gadget en la parte del sidebar. Debes elegir HTML/Javascript y pegarlo en el contenido. Una vez lo hayas hecho, guarda los cambios y ¡ya lo tienes listo!


    Pero ahí no queda la cosa, porque igual te preguntas si es posible cambiar la tipografía de la letra y el color del botón ¿verdad? pues si, ¡es posible!. Así que si te apetece, vamos a ello.


    Dirígete a la Plantilla y elige la opción Personalizar. Una vez entres, haz clic en Avanzado, que es la última opción que te encuentras. Haz scroll en la ruletilla y vete al final donde pone Añadir CSS,







    clica y pega este código en el contenido:




    .suscripcion-feed {/*Tipografía y color del texto*/
    font-family: Open Sans !important;
    color: #666666;
    }
    
    .suscripcion-feed p input, textarea {
    background: #fff !important;
    border: 1px solid #888888;
    }
    
    .suscripcion-feed input{/*Personalizar el botón*/
    width: 100px;/*Ancho del botón*/
    font-size: 14px;/*Tamaño del texto*/
    font-family: Open Sans !important;/*Tipografía del botón*/
    color: #444444;/*Color del texto*/
    border: 1px solid #888888;/*Si prefieres el botón con relieve, pon el valor a 0*/
    background: #cbf3ee;/*Color de fondo del botón*/
    padding: 5px;/*Espacio desde el texto al borde*/
    }



    Y ahora te explico un poquito:


    • En el primer párrafo, puedes cambiar la tipografía y el color de tu mensaje.
    • El segundo párrafo, mejor ni lo toques, porque es la cajita donde se introduce el e-mail y el blanco es el color que mejor queda.
    • Para el tercer párrafo, puedes personalizar el ancho del botón de suscripción (width: 100px) cambiando el valor 100, para dar más o menos anchura, el tamaño del texto (font-size:14px), el tipo de letra (font-family) y su color. También puedes elegir que tu botón tenga borde (border: 1px) y en qué color, además de elegir el color de fondo (background) y el espacio entre texto y márgenes (padding).
    Si prefieres que el botón quede en relieve, pon el valor del borde a 0px y te quedará de esta manera:


    boton de suscripcion  en relieve




    Bueno, ahora sí que sí hemos terminado, guarda los cambios y ya tienes tu banner presentable y preparado para recibir suscripciones.




     Diseñar un banner de suscripción y añadir el código después


    Si ya tienes destreza en diseñar imágenes, puede que prefieras esta opción, para crear un banner 100% a tu gusto. Para ello, lo primero es tener en cuenta el espacio del que disponemos en el lugar donde vaya a colocarse el banner.

    No es lo mismo, diseñar un banner para el post que para el sidebar, así que, antes de ponerte manos a la obra, mide el espacio que tienes.

    ¿Y eso cómo lo hago?


    Pues simplemente tienes que hacer clic derecho sobre el lugar donde vas a colocar tu caja de suscripción. Para esto, vete a la página principal del blog y situa el ratón en el lugar deseado. A continuación haz clic derecho con el ratón y elige la opción "Inspeccionar elemento"

    Verás un monton de código en la parte inferior, pero tú sitúate en la parte derecha, en esa especie de sidebar con infinidad de código que te aparece y ve haciendo scroll hasta llegar abajo. Ahí encontrarás un recuadro con las medidas exactas de la zona que has seleccionado. Apunta el ancho y diseña tu banner con esa medida.




    Una vez lo tengas preparado, instala el banner en el lugar que hayas elegido:

     Si es en el Sidebar, añade un gadget de Imagen en la parte de Diseño>Añadir un gadget y sube tu imagen. Si no quieres poner ningún texto en el título, añade el código &nbsp; ya que Blogger no te dejará guardar los cambios de otra manera y en la parte dónde pone Enlace, pega este código añadiendo tu feed de Feedburner en la parte que te he dejado en celeste




    http://feedburner.google.com/fb/a/mailverify?uri=mifeed&loc=es_E S



    instalar el banner de suscripción en blogger



     Tu feed será el que hayas añadido siguiendo los primeros pasos al comienzo del post (donde te indicaba que te dirigieras a Feedburner)





     Si vas a incluir tu banner en el post, sube tu imagen, selecciónala  y clica en Enlace (repite este paso 2 veces) para añadir el código (es el mismo para ambos casos, ya que se trata de la dirección de tu feed) y si deseas que a partir de ahora tu banner aparezca automáticamente en todas tus entradas, cambia la vista a HTML y copia el código que ha aparecido al subir tu imagen y colocar el enlace. Debe de ser algo así:




    <div class="separator" style="clear: both; text-align: center;">
    <a href="http://feedburner.google.com/fb/a/mailverify?uri=Envuelvelobonito&amp;loc=es_E%20S" target="_blank"><img border="0" src="http://s8.tinypic.com/33dvzw0_th.jpg" /></a></div>



    Recuerda que la parte celeste debe ser la de tu feed y la parte verde, la dirección de tu imagen, asi que no copies este código, ya que esta es mi dirección y sólo te la pongo para que te orientes en medio de tanto código.

    Una solución más sencilla para que no te líes, es subir la imagen a una entrada nueva, en la que no hayas escrito nada aún. Una vez que subas la imagen y le añadas el enlace hacia tu feed, cambias la vista a HTML , seleccionas todo el código y le das a copiar.

    Ahora, si quieres guarda la entrada o elimínala, lo que prefieras y vete a Configuración>Entradas y comentarios y donde pone Plantilla de las entradas, le das a Añadir y pegas todo el código que habías copiado. Tras esto, guarda los cambios y a partir de ahora tendrás el banner automáticamente en cada entrada nueva que hagas.


    Si quieres aprender más sobre las opciones de Configuración de tu blog (algo super necesario para evitar problemas y optimizarlo correctamente), te invito a que le eches un vistazo a Cómo crear y configurar un blog en Blogger, en el que te lo cuento todo todito, con videotutorial incluido.


    En fin, ahora sí que sí hemos terminado ¡ya era hora! ¿verdad?   sé que ha sido eterno, pero quería ofrecerte todas las opciones posibles para que lo hagas bien y disfrutes haciéndolo. Además, tras esta entrada, seguro que has ganado bastantes conocimientos de HTML y CSS ¿a que sí?, pues yo que me alegro infinito.




    Si quieres aprender más sobre diseño gráfico, quizás te interese el Curso de Photoshop para Blogueras Creativas, con el que podrás perfeccionar tu manejo de Photoshop, a la vez que desarrollas tu marca y creas el blog que deseas tener. Es un curso muy completo, en el que sin duda, habrá un antes y un después en tus diseños. Échale un vistazo:





    Si quieres seguir aprendiendo, no olvides unirte a la Comunidad Demo 2.0, porque te esperan contenidos, guías, descargables y secretillos de gran valor, exclusivos para mis chicas, que no verás en el blog, como esta super-guía para que aprendas a usar imágenes en la red (sin buscarte problemas) en la que además tendrás acceso a millones de imágenes gratuitas para usar en tu blog, sin ningún miedo.


    ¿Qué me dices? ¿te apuntas? si es así, encantada de contar contigo   que tengas una gran semana!


     Únete a la Comunida Demo 2.0


    No hay comentarios, ¡cuéntame algo!

    Me encantaría escuchar tu opinión ¿charlamos?

    demo