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»)
<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.
#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!
-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.
¡Cuando vi este post hace unos días me puse a temblar! Porque era justo lo que estaba buscando… pero después de tres intentos me voy por vencida: no me sale nada.
He puesto los dos códigos justo como explicas, pero no me sale nada… No es que me salga mal o deforme o de otro color o en plan feo, es que no me sale nada.
Seguro que es un tonti fallo mío y puede que tenga que ver con mi codigfobia jajaja…
De todas formas gracias por tu tuto, por tu tiempo y por ser tan maravillosa.
¡Un muackiles!
Hola Sonia, ¿Has mirado poner el código en la zona post-footer correcta? Casi siempre hay dos. El primero suele ser de la versión móvil y el segundo (el bueno) de la versión pc.Tu plantilla es versión gratis o de pago? Algunas gratuitas no permiten ciertas modificaciones. Si no lo consigues puedes hacer unas capturas de pantallas de donde pones el código y publicarla en mi grupo de fb ayuda para bloggers y emprendedores. Un saludo
Hola Sonia, veo que usas la plantilla Voux que es la base de la mía. Si deseas que te salga en la misma posición que a mi, basta con que localices 'categorías:' en tu plantilla, y pegues el div de mailrelay después del de categorías. Verás que es cuestión de segundos pegarle y minutos personalizar. Saludos y con gusto me escribes si necesitas algún dato más.