Widget suscripcion y configurar correctamente feedburner

Widget suscripcion gratis blogger configurar correctamente feedburner blogger

Demostración

La suscripción mediante feedburner permite a nuestros usuarios recibir actualizaciones del blog vía correo electrónico. En blogger podemos hacer uso de este servicio gratuito simplemente agregando un widget.


El dia de hoy vamos a aprender a mejorarlo reemplazandolo con un widget reestructurado personalizable que he desarrollado. Ademas tambien aprenderemos a configurar correctamente feedburner para aprovechar su potencial.


Instalar

Desde la pestaña "Diseño" agregamos el gadget "Seguir por correo electrónico" y guardamos los cambios. Posteriormente vamos a editarlo y eliminarlo. Se que suena raro, pero lo que buscamos con esto es generar nuestra url en feedburner, el widget lo eliminamos porque instalaremos otro y no nos hacía falta tenerlo.


Ahora vamos a ir a "Temas", presionamos "Personalizar". Ya en el Diseñador de plantillas, buscamos las opciones avanzadas y la opción "CSS Personalizado", en ese campo agregaremos lo siguiente:


/*!
* Widget: Suscripcion v1.0.1
* by zkreations
*/.followEmail__container,.followEmail__email,.followEmail__figure,.followEmail__sumit,.followEmail__text{background:0 0;padding:0;margin:0;border:0;outline:0;box-shadow:0 0 transparent;font-family:inherit}.followEmail{font-size:15px;overflow:hidden}.followEmail__container{width:100%;padding:2em;position:relative;z-index:5}.followEmail__text{font-weight:400;margin-bottom:1em;text-align:center;z-index:20;position: relative}.followEmail input.followEmail__sumit,.followEmail__email{padding:1em;width:100%;font-weight:500;border-radius:3px;text-align:center}.followEmail input.followEmail__sumit{margin-top:1em;cursor:pointer;-webkit-transition:opacity .3s,box-shadow .3s;transition:opacity .3s,box-shadow .3s}.followEmail input.followEmail__sumit:hover{opacity:.9;box-shadow:0 1px 3px -1px rgba(0,0,0,.5),0 0 4px 0 rgba(0,0,0,.1)}.followEmail__figure{text-align:center;background-size:cover;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;border-radius:3px 3px 0 0;padding:2em 2em 2.5em}.followEmail__figure figcaption{font-size:1.2em;font-weight:700;color:#fff;-ms-flex-item-align:end;align-self:flex-end;text-shadow:0 1px 3px rgba(0,0,0,.1);position:relative;z-index:2}.followEmail__container::before{right:-1px;-webkit-transform-origin:top right;transform-origin:top right;-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}.followEmail__container::after{left:-1px;-webkit-transform-origin:top left;transform-origin:top left;-webkit-transform:rotate(5deg);transform:rotate(5deg)}.followEmail__container::after,.followEmail__container::before{content:"";width:60%;position:absolute;top:-1em;height:1em}.followEmail__figure::before{background-image:-webkit-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.5));background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.5));content:"";bottom:0;left:0;right:0;height:6em;width:100%;position:absolute;z-index:1}
/*Personalizar*/
.followEmail__figure{
   background-image: url(https://i.imgur.com/LYR2GRJ.jpg);/*<= url de la imagen de fondo*/
   background-position: center;/*<= posicion de la imagen*/
   background-color: #263238;/*<= color de fondo de la imagen */
   height:150px;/*<= alto de la imagen (el ancho es automatico)*/
}
.followEmail__container,
.followEmail__container::after,
.followEmail__container::before{
   background:#f5f5f5;/*<= Color de fondo (formulario)*/
}
.followEmail__text{
   color:rgba(0,0,0,.5);/*<= Color de texto informativo*/
}
.followEmail input.followEmail__sumit{
   background-color:#3F51B5;/*<= Color del boton*/
   color:#fff;/*<= color de texto del boton*/
}
.followEmail__email{
   background-color:rgba(0,0,0,.05);/*<= fondo del campo "email"*/
   color:rgba(0,0,0,.5);/*<= color de texto del campo "email"*/
}

No olvides presionar el botón Aplicar para guardar los cambios. Ahora regresaremos al administrador de Blogger y a la pestaña "Temas", esta vez presionamos el botón "Editar HTML" buscamos </b:section> y arriba de eso pegamos lo siguiente:


<b:widget id='FollowByEmail1' locked='false' title='Suscribete' type='FollowByEmail'>
   <b:includable id='main'>
      <b:if cond='data:title.length != 0'><h2><data:title/></h2></b:if>
      <div class='widget-content'>
      <div class='followEmail'>
         <figure class='followEmail__figure'>
            <figcaption>Suscripcion por correo</figcaption>
         </figure>
         <form class='followEmail__container' action='https://feedburner.google.com/fb/a/mailverify' expr:onsubmit='"window.open(\"https://feedburner.google.com/fb/a/mailverify?uri=" + data:feedPath + " \", \"popupwindow\", \"scrollbars=yes,width=550,height=520,left=\"+(screen.width/2-275)+\",top=\"+(screen.height/2-260));return true"' method='post' target='popupwindow'>
            <p class="followEmail__text">No te pierdas nunca el <strong>nuevo contenido del blog</strong>. Agrega un correo y nosotros hacemos el resto.</p>
            <input class='followEmail__email' name='email' onblur='if(this.value=="") this.value = this.defaultValue' onfocus='if(this.value==this.defaultValue) this.value = ""' value='Escribe un correo' type='text'/>
            <input class='followEmail__sumit' type='submit' value='Suscribirme ahora'/>
            <input expr:value='data:feedPath' name='uri' type='hidden'/>
            <input name='loc' type='hidden' value='es_ES'/>
         </form>
      </div>
      </div>
   </b:includable>
</b:widget>

Guardamos los cambios y listo, ya tendremos el widget instalado. Recomiendo visitar la sección "Diseño" nuevamente, buscar el widget "Suscripción" y moverlo al sidebar.


Personalizar

Como ya es costumbre, he dejado comentarios en el código sobre las propiedades que pueden modificar a su gusto. El widget es personalizable, e incluye una imagen de libre uso tomada desde Pexels. Modifica el widget a tu gusto:


personalizacion suscripcion por correo

Configuración feedburner

Muchos olvidan configurar feedburner ya que no lo consideran necesario, pero es importante. Vamos a dirigirnos a la página principal de feedburner y seleccionamos el feed que corresponda a nuestro blog:


selecionar feed de feedburner

Ahora en el panel que nos aparece, seleccionamos la pestaña "Publicize", nos dirigimos a la opcion "Email Subscriptions" y "Communication Preferences":


email confirmacion traducir ingles español feedburner

El texto corresponde al mensaje de confirmación que recibirán nuestros usuarios al suscribirse, por lo general viene en ingles. Borra todo lo que contenga ese campo y reemplazalo por el siguiente texto,:


Hola.

Recientemente solicitó una suscripción por correo electrónico a zkreations. No podemos esperar para enviarle las actualizaciones que desea por correo electrónico, así que haga clic en el siguiente enlace para activar su suscripción de inmediato:

${confirmlink}

(Si no puede hacer clic en el enlace, cópielo y péguelo en la barra de direcciones de su navegador web).

Puedes modificar el texto anterior a tu gusto, pero siempre manteniendo la etiqueta ${confirmlink} intacta. una vez hayas agregado el texto presiona el botón de guardar:


guardar traducir ingles español feedburner

Ahora vamos a dirigirnos a la opción "Email Branding" para editar el mensaje que recibirán los suscriptores. Primero marcamos el check "Change Subject when an email has 2 or more items" lo que nos habilitará un segundo campo, ahora en ambos reemplazamos el texto y agregamos lo siguiente:


website: ${latestItemTitle}

website: ${latestItemTitle} y ${m} más

Reemplaza "website" por el titulo que corresponde a tu blog. No modifiques ${latestItemTitle} ya que se reemplazará en los mensajes por el título de tu entrada más reciente, mientras que ${m} se reemplazará por el número de artículos restantes, si publicaste más de una entrada en un dia:


personalizar titulo principal mensaje feedburner

El siguiente campo corresponde al logo, simplemente sube tu logo a blogger o imgur (recomiendo este ultimo) y pegalo en ese campo:


logo mensaje feedburner

Por último solo nos queda cambiar fuentes y colores, esto también es a gusto de cada quien asi que tomate tu tiempo, esta es la configuracion que yo uso:


personalizar texto colores fuentes mensaje feedburner

Al terminar de configurar todo, en la vista previa puedes comprobar como se verá tu mensaje cuando lo reciban tus suscriptores, por lo que solo resta presionar el boton de guardar para que los cambios se mantengan:


Guardar cambios mensaje feedburner

Consejos

Gracias a estas modificaciones, el título de tu último post siempre saldrá en el campo "Asunto" del mensaje y ya que tus seguidores recibirán mensajes con tus articulos, intenta ser creativo en el título con algo mas de carácter viral (se usa mucho en seo). Aqui dos ejemplos:


Algunos alimentos beneficiosos para la salud

5 alimentos que podrian salvar tu vida

¿Cuál llamó más tu atención?, pues ese titulo ya no solo formará parte de los resultados de búsqueda. Tus suscriptores directamente reciben ese título en su bandeja de entrada. Cualquiera puede ignorar un mensaje, pero la curiosidad es más fuerte.


Espero que este aporte les haya sido de utilidad, si fue asi, no olvides compartir este articulo en tus redes sociales, ayudarás a mas personas y tambien me ayudara mucho. Que esten bien.