Estoy encantada de tener como invitada a una bloguera  apasionada del mudo blogger y que no duda en compartir sus conocimientos para ayudarte a mejorar tu blog siempre que puede. Cyball usa Mailrelay como proveedor de email marketing y es muy buena investigando nuevas maneras para integrarlo con nuestro blog. Por esta razón pensé que sería una buena idea incluir su post en mi serie mensual que dedico a optimizar tu cuenta de mailrelay. Te dejo con ella……

¿Cómo vamos frikyestudiantes? La búsqueda de nuevos suscriptores es materia obligada para toda bloguera y hoy deseo compartirles una manera para insertar al final de cada post el formulario de Mailrelay en Blogger, mediante CSS y HTML. Puedes verlo funcionando en mi blog .

El primer paso es realizar un backup de nuestra plantilla. Luego, buscamos en ella la sección final de nuestros post: esto varía de plantilla a plantilla, en las preinstaladas de Blogger buscamos:div class=’post-footer’

mientras que en las personalizadas es un pelín más difícil, yo lo que hice fue guiarme de los div ya existentes como el de los botones de compartir y justo después pegué el del formulario.

 

Friky nota: En mi caso probé poner el formulario en mi blog de pruebas con plantilla simple de blogger y pegué el siguiente código encima de post-footer.

 

Si te sirve de guía puedes ver el resultado aquí.

Si lo quieres quieres que aparezca en el mismo lugar que Cyball, puedes ver el lugar exacto donde pego el código, dentro de la sección de post del html debajo de las etiquetas de final del post (div class=”entry-tags gray-2-secondary”)

Cuando ya localizaste el sitio correcto, solamente pega esto:<div id=’mailrelay-post’>
<h3>
Puedes suscribirte también
</h3>
<div class=’mailrelayform’>
<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=”aquí va tu correo” onblur=”if(this.value==”)this.value=’aquí va tu correo’;” onfocus=”if(this.value==’aquí va tu correo’)this.value=”;” /></center>
<center><input name=”” type=”submit” value=”CLARO” class=”button”/></center>
</form>
</div></div>

 

Friky Nota: Lo marcado en rosa en el texto que puedes personalizar. El numero rojo corresponde al id del grupo de suscriptores del formulario. Si tienes varios grupos es importante que pongas el id correcto. 

Luego, buscamos b:skin y dentro de esta sección pegamos:


#mailrelay-post { padding: 0; margin: 0; width: 100%; height: auto; border: 0; display: inline-block; background: #c3e3d6; }#mailrelay-post .mailrelayform { padding: 0px 0px; margin: 30px auto 30px; display: block; width: 300px; }#mailrelay-post .mailrelayform input { text-align: center; padding: 8px; color: #000; font-size: 13px; border-radius: 1px; font-family: Open Sans; font-weight: normal; width: 100%; height: 45px!important; line-height: 1.5em; overflow: hidden!important; text-transform: capitalize; outline: none!important; display: block; background-color: #fff; border: 1px solid $(label.color); box-sizing: border-box!important; }#mailrelay-post .mailrelayform .button {color:$(label.color); text-align:center; cursor:pointer; font-size:14px; font-family: Open Sans; border:none;
background: #F2F2F2; margin-top: 15px; outline: none!important; padding: 4px!important; float: none; }#mailrelay-post .mailrelayform .button:hover { color:#ffffff; background:#333333; text-decoration:none;}

#mailrelay-post h3 { margin-top: 40px; font-family:Open Sans; font-size: 20px; font-weight: 400; font-style: normal; line-height: 1.25; letter-spacing: 3px; text-transform: uppercase; text-align: center; color:#222; margin-bottom: 20px;}

 

Friky nota: En mi opinión los estilos que le ha dado Cyball están genial. Lo mejor es hacer un formulario simple con algún tipo de “regalito” para motivar a suscribirse. Por lo menos en mi blog no tuve que modificar nada . Si acaso el color de fondo ( backgroung: #c3e3d6 ) para adecuarlo a mi paleta de colores.

En ambos puedes cambiar los estilos y textos para que se ajuste a tu sitio (texto marcado en rosa referente a colores, tamaños y separaciones). En el DIV del formulario, localiza la parte <form…. y allí inserta el formulario personalizado de Mailrelay (en mi post anterior ya te expliqué ). Solamente recuerda que este DIV está diseñado para usarse sólo con la variable e-mail pero lo puedes instalar en diferentes lugares, como tu sidebar o dentro de una página de suscripción como hice yo. Ajústalo a tus necesidades.

 

 

Como ves y si dispones de algún producto o tutorial que requiera una segmentación de lista, sólo basta conque hagas el formulario personalizado en Mailrelay con el grupo adecuado y lo ingreses en cada div según tus necesidades. Y también puedes insertarle iconos sociales, alguna imagen coqueta, lo que se te ocurra, todo gratis al no requerir servicios externos. ¡El cielo es el límite!

 

Para que veas que funciona a la perfección, simplemente ve a cualquiera de mis historias en Mami 507 y suscríbete, no te preocupes que no te agobiaré con mensajes 😉 y además me harías muy feliz.
¿Qué te ha parecido esta manera de usar nuestro formulario de Mailrelay? Mantente atenta a las redes de Frikymama y de mi blog que pronto te enseñaré como insertar un slider modificable con el mismo formulario sin depender de servicios externos que te imponen sus condiciones.

-Cyball Brigitte

Soy panameña de nacimiento y bloguear por vocación. En El Blog de Cyball comparto mis historias como madre, con mi peque como co-protagonista e inspiración.  Y en Cyball Ruiz – Studio Blogger comparto mi pasión por todo lo que implica llevar un blog personal.

Friky nota: Si quieres seguir profundizando en la personalización de tus formularios de mailelay no dejes de visitar→ Como crear y personalizar formularios para pop up o sidebar.

Diseñoblogs

 

No te puedes perder...

¿Y lo bonito que es compartir ?
Email this to someonePin on PinterestShare on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn
The following two tabs change content below.

Ana María

Mamá, bloguera y emprendedora por sorpresa con alma inquieta. El diseño es mi pasión y la redes sociales mi hábitat preferida. Mi misión: ayudar a otros bloggers a crear su proyecto online de una manera creativa, personalizada y profesional.

EBOOK "3 CLAVES PARA UNA MARCA POTENTE

Aprende a enamorar a tus visitas con un diseño magnético, fotos impactantes y un buen posicionamiento.

Gracias por suscribirte. Recuerda revisar tu carpeta de promociones y spam. Si mi email cayó allí, asegúrate de que no vuelva a pasar añadiendo mi email a tu libreta de direcciones. Un saludo y hasta pronto.