x About... Servicios Portfolio BLOG Mis guest posts Contacto Codificando tu estilo
- 30.5.17 - Tutorial

Ultra-tutorial I: Caja de suscripción al blog


Quizá sea un título algo pretencioso, pero es que mega tutorial ya lo tienen quemado así que quise variar un poco.

El tutorial de hoy es sobre crear una caja de suscripción al blog y lo ultra viene de que en vez de explicar como enlazarla a un sistema de suscripción, lo haré para cuatro, sí, cuatro plataformas que actualmente son gratuitas (u ofrecen una versión gratuita): Mailrelay, Mailchimp, Mailerlite y la vieja pero aún confiable Feedburner.

El código es una renovación al que diseñé hace unos meses como bloguera invitada en Frikymama, haciendo de esta nueva versión una que se ajuste a su contenedor; es decir, una caja de suscripción que sea responsive totalmente.

Nuevamente está pensado para un formulario que solamente pide el correo del suscriptor y el resultado que obtendrás es el siguiente:


Códigos

CSS de caja para suscripción (es el mismo para cualquiera de las cuatro opciones)
/* CAJA DE SUSCRIPCION POR CYBALLRUIZ.COM */
.mail-cyball { padding: 0; margin: 25px 0 0 0; width: 100%; height: auto; border: 0; display: inline-block;
background-image: url(https://4.bp.blogspot.com/--2EToe0oN0c/WNlUaaHiogI/AAAAAAAAACM/oXpEIio24ZAgC4_BOKLWyNM-NgTYt2dyACLcB/s1600/symphony.png); }
.mail-cyball .mailform {padding: 0 0 20px 0; margin-left:5%;display: block; width: 90%; } 
.mail-cyball .mailform input  {text-align: center; padding: 8px; color: #333333; font-size: 15px; font-weight: normal; width: 100%; height: 35px!important; line-height: 1.5em; overflow: hidden!important; outline: none!important; display: block; background-color: #fff; border: 1px solid #333333; box-sizing: border-box!important;}
.mail-cyball .mailform .button, .mail-cyball .mailform button {color:#ffffff;text-align:center; cursor:pointer; font-size:14px; border:none; background: #333333; margin-top: 5px; outline: none!important; padding: 4px!important; float: none;text-transform: uppercase;}
.mail-cyball .mailform button {width: 100%; height: 35px!important;}
.mail-cyball .mailform .button:hover, .mail-cyball .mailform button:hover { background: #597fcb;text-decoration:none;}
.mail-cyball h3 {margin-top: 20px; margin-bottom: 20px; font-size: 20px; font-weight: 400; font-style: normal; line-height: 1.25; letter-spacing: 3px; text-transform: uppercase; text-align: center; color:#222;}


Mailerlite

<div class='mail-cyball'>
<h3>recibe mis posts</h3>
<div class='mailform'>
<form action='ENLACE DE TU FORMULARIO' class='ml-block-form' data-code='xxx' data-id='xxx' method='POST' target='_blank'><div class='form-group ml-field-email ml-validate-required ml-validate-email'><input class='form-control' name='fields[email]' type='text' value="correo..." onblur="if(this.value=='')this.value='correo...';" onfocus="if(this.value=='correo...')this.value='';" /></div><button class='primary' type='submit'>suscribir</button><button class='loading' disabled='disabled' style='display: none;' type='button'><img height='20' src='//static.mailerlite.com/images/rolling.gif' style='width: 20px; height: 20px;' width='20'/></button>
<input name='ml-submit' type='hidden' value='1'/>
</form>
</div>
</div>
</div>


Mailchimp

<div class="mail-cyball">
<h3>recibe mis posts</h3>
<div class="mailform">
<form action="ENLACE DE TU FORMULARIO" class="validate" id="mc-embedded-subscribe-form" method="post" name="mc-embedded-subscribe-form" target="_blank">
<center>
<input class="required email check" id="mce-EMAIL" name="EMAIL" type="email" value="correo..." />
 <div class="clear" id="mce-responses">
<div class="response" id="mce-error-response" style="display: none;">
<div class="response" id="mce-success-response" style="display: none;">
</div>
</div>
</div>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<input class="button" id="mc-embedded-subscribe" name="subscribe" type="submit" value="suscribir" /></center>
</form>
</div>
<!--End mc_embed_signup-->
</div>


Mailrelay

<div class="mail-cyball">
<h3>recibe mis posts</h3>
<div class="mailform">
            <form enctype="application/x-www-form-urlencoded" action="ENLACE DE TU FORMULARIO" method="post">
 <input type="hidden" name="groups[]" value="1" />
 <center><input name="email" id="email" type="text" value="correo..." onblur="if(this.value=='')this.value="correo...';" onfocus="if(this.value=='correo...')this.value='';" /></center>
 <center><input name="" type="submit" value="suscribir" class="button"/></center>
</form>
</div>
</div>


Feedburner

<div class='mail-cyball'>
                    <h3>recibe mis posts</h3>
<div class='mailform'>
<form action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=ID DE TU FEED', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><center><input type="text" value="tu correo..." name="email"/></center><input type="hidden" value="ID DE TU FEED" name="uri"/><input type="hidden" name="loc" value="es_ES"/><input class="button" type="submit" value="suscribir" /></form>
</div>
</div>


Instalación:

PASO 1. Como siempre, hacer copia de seguridad del tema y desde la edición HTML busca ]]></b:skin> y dentro pegas los estilos (CSS). Hago notar que la fuente que tengas predeterminada será la misma que tendrá la caja.


PASO 2. Luego localiza el espacio donde has de pegar la estructura (HTML), lo ideal es al final de cada post y esto puede variar de plantilla a plantilla. También, al ser responsive, puedes colocar la caja en el sidebar y se ajustará sin problemas.

O puedes hacerlo desde Configuración > Entradas, comentarios y uso compartido > Plantilla de entradas y dentro del recuadro pegar tu HTML o usarle en el sidebar dentro de un widget HTML/Javascript.

Dentro del HTML hay una línea coloreada que ajustar según cada caso:
  • Mailerlite: Desde Webforms ve a tu formulario de suscripción y en la pantalla donde te dan el script para insertar en tu blog, pulsa en la opción Mostrar HTML > Obtener código y copia TODA la etiqueta FORM, sólo esa línea es la que necesitas sustituir.
  • Mailchimp: Desde el Panel de tu Lista ve a Signup Forms > Embedded Forms > Naked Form y copia solamente la url que está dentro de action, comienza con //
  • Mailrelay: Desde el Dashboard ve a Formulario de suscripción > Obtener código y copia solamente la url que está dentro de action, comienza con http
  • Feedburner: Desde el Panel de tu feed ve a  Edit Feed Details… > Feed Address: y en la casilla verás tu ID.

Con esto termina la instalación de la caja de suscripción, con la que espero que aumente tu número de lectores fieles que recibirán tus entradas puntualmente. Lo que seguro te encantará es que basta con modificar unas cuantas líneas del CSS y podrás personalizarla cuantas veces lo desees.

Si tienes alguna duda sobre el proceso, puedes colocarla en los comentarios y con gusto te contestaré.


Se ha comentado...
  1. ¡Hola! me ha parecido muy interesante tu post! Ojalá, pudiese poner en práctica lo que nos has comentado. Pero yo utilizo Jekyll, aunque estoy pensando cambiar de plataforma, no sé aun.
    Y el título no me ha parecido nada pretencioso,considero que la información que nos das es muy valiosa. ^_^ Además, para mi es importante el tema de la suscripción, cosa que yo aun tengo pendiente, jeje.
    Muchas gracias por compartir.
    Un abrazo!

    ResponderEliminar
    Respuestas
    1. Hola Mireia, si bien entiendo en Jekyll igualmente puedes usar este tutorial, ya que es a base de HTML, lo que variaría es el lugar donde instalar

      Eliminar
    2. Wow! pues genial!! ^_^ Muchísimas gracias!!! Un abrazo wappa!

      Eliminar
  2. Me encanta leer este tipo de post, siempre aprendo algo, yo mi cajita de suscripción la tengo en una ventana flotante, y de momento me va genial, eso sí ya hemos llegado al límite gratuito de mailchimp y estamos buscando alternativas, echaré un vistazo a mail relay porque nos han hablado muy bien de esa plataforma

    ResponderEliminar
    Respuestas
    1. He probado las cuatro herramientas y Mailrelay es la campeona en soporte en español y en límite gratuito, lo importante aquí es tener nociones de HTML y CSS para el tema de las plantillas si quieres algo más acorde con tu marca personal... La migración desde Mailchimp es sencillísima. Saludos

      Eliminar
  3. a mi todo esto me suena a chino, me estan migrando el blog de blogspot a wordpress y se que me va a costar tela...me encantaria saber mas pero buffff

    ResponderEliminar
    Respuestas
    1. Pues con mayor razón deberías leer más del tema, la personalización en Wordpress puede ser más complicada a nivel técnico si no quieres siempre depender de terceros para cosas puntuales como aplicar un tutorial (este funciona igual en Wordpress), y entre más fácil es de personalizar una plantilla, más pesada es consumiendo espacio de hosting. Hormigas en la nube es un excelente sitio sobre Wordpress, tiene una guía para suscriptores que te podría ayudar. Saludos.

      Eliminar
  4. Hola!
    Me encantan los tutoriales pero que sencillo era cuando podía personalizar todo en blog, ahora en wordpress no puedo porque solo admiten pagos u.U
    Es muy valioso tu aporte porque crear codigos html es muy dificil ademas lo explicas de una manera que se entiende.
    Un beso!

    ResponderEliminar
  5. Hola! Me ha parecido un post muy interesante y con una información muy útil y muy bien explicada. Gracias por compartir estos códigos html para crear una caja de suscripción al blog para cuatro plataformas gratuitas. Un saludo.

    ResponderEliminar
  6. Un post genial y muy útil para bloggers, la gente le da mucha importancia a las redes sociales, cuando lo realmente importante es tu lista de suscriptores. Así les simplificas el trabajo técnico!

    ResponderEliminar
  7. Holaaa! Yo lo tengo puesto en mi blog y me va genial. Lo has explicado estupendamente y seguro que aquellos que quieran ponerlo no tendrán problema :) Gracias por tu aportación! Es un recurso que puede interesarle a mucha gente. Besos

    ResponderEliminar

Dejar comentario

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *