¡Hola frikylectores! Como prometí en mi anterior entrada, les traigo hoy una manera distinta de mostrar nuestro formulario de suscripción (y que sirve para mostrar cualquier otra información) mediante una cajita que se desliza desde el lado izquierdo, cuya animación es a base de puro CSS3.

Si no utilizas herramientas como Sumome o Hellobar, este slider es una excelente opción y además incluye un script sencillo para crear una cookie para que no aparezca al usuario por 5 días (o hasta que borre su historial de cookies)
Bueno, vamos manos a la obra.
Como primer paso, recordemos que al tocar la plantilla siempre debemos guardar una copia antes de hacerlo, en esta ocasión será igual.
Luego, nos vamos al b:skin de nuestra plantilla, ese lugar donde editamos el CSS y justo antes del cierre ]]></b:skin> pegamos el siguiente código:

/*slider box responsive por cyballruiz.com*/

#slide-mailrelay {background-image: url(«https://3.bp.blogspot.com/-1DFraasOv7A/V4iGeZdNqSI/AAAAAAAAFBQ/pZu6Cg-g9XYvaA4mSwriM8p4XACjjj_KACLcB/s1600/paper_mami.jpg»); border-color: #009380 #800093 #938000 #930013; border-style: solid; border-radius:5px;position:fixed;z-index: 9999990;width:450px; height:auto;bottom:50px;left:-110%;display:none;padding:20px; animation:slidecc .8s;-webkit-animation:slidecc .8s;animation-delay:25s;-webkit-animation-delay:25s;animation-fill-mode: forwards;

-webkit-animation-fill-mode: forwards;}  /*imagen de fondo del slider +colores de los bordes*/

@keyframes slidecc {

100%{left:0px;
}
}
@-webkit-keyframes slidecc {

100%{left:0px;
}
}

#slide-mailrelay .mailrelayform { padding: 0px 0px; margin: 30px auto 30px; display: block; width: 300px; }

#slide-mailrelay .mailrelayform input { text-align: center; padding: 8px; color: #222; font-size: 15px; font-family: Open Sans; font-weight: normal; width: 100%; height: 45px!important; line-height: 1.5em; overflow: hidden!important; outline: none!important; display: block; background-color: #fff; border: 1px solid #222; box-sizing: border-box!important; }

#slide-mailrelay .mailrelayform input.button {color: #222; text-align:center; cursor:pointer; font-size:14px; font-family: Open Sans; border:none;

background:#009380; margin-top: 15px; outline: none!important; padding: 4px!important; float: none; }

#slide-mailrelay .mailrelayform input.button:hover { color:#ffffff; background:#333333; text-decoration:none;}

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

#slide-mailrelay p { margin-top: 1px; font-family:Open Sans; font-size: 14px; font-style: normal; line-height: 1.25; letter-spacing: 1px; text-transform: uppercase; text-align: center; color:#222; margin-bottom: 20px;}

@media only screen and (max-width: 767px) {

#slide-mailrelay {width:300px; height:auto;bottom:20px;}

#slide-mailrelay .mailrelayform {margin: 10px auto 10px; width: 250px; }
}

 

El slider está configurado para aparecer a los 25 segundos desde que llegan a nuestro blog. Si deseas modificar esto, localiza la palabra delay, la verás dos veces y en las dos cambia el 25s por lo que gustes (5s, 10s, 60s…).Opcional: Si tu blog es de los que tienen el sidebar del lado izquierdo y deseas que tu slider salga del lado derecho, sólo pega este código en vez del anterior:

/*slider box responsive por cyballruiz.com*/

#slide-mailrelay {background-image: url(«https://3.bp.blogspot.com/-1DFraasOv7A/V4iGeZdNqSI/AAAAAAAAFBQ/pZu6Cg-g9XYvaA4mSwriM8p4XACjjj_KACLcB/s1600/paper_mami.jpg»); border-color: #009380 #800093 #938000 #930013; border-style: solid; border-radius:5px;position:fixed;z-index: 9999990;width:450px; height:auto;bottom:50px;rightt:-110%;display:none;padding:20px; animation:slidecc .8s;-webkit-animation:slidecc .8s;animation-delay:25s;-webkit-animation-delay:25s;animation-fill-mode: forwards;

-webkit-animation-fill-mode: forwards;} /*imagen de fondo del slider +colores de los bordes*/

@keyframes slidecc {

100%{right:0px;
}
}
@-webkit-keyframes slidecc {
100%{right:0px;
}
}

#slide-mailrelay .mailrelayform { padding: 0px 0px; margin: 30px auto 30px; display: block; width: 300px; }

#slide-mailrelay .mailrelayform input { text-align: center; padding: 8px; color: #222; font-size: 15px; font-family: Open Sans; font-weight: normal; width: 100%; height: 45px!important; line-height: 1.5em; overflow: hidden!important; outline: none!important; display: block; background-color: #fff; border: 1px solid #222; box-sizing: border-box!important; }

#slide-mailrelay .mailrelayform input.button {color: #222; text-align:center; cursor:pointer; font-size:14px; font-family: Open Sans; border:none;

background:#009380; margin-top: 15px; outline: none!important; padding: 4px!important; float: none; } /*color botón*/

#slide-mailrelay .mailrelayform input.button:hover { color:#ffffff; background:#333333; text-decoration:none;} /*color botón al poner el ratón encima*/

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

#slide-mailrelay p { margin-top: 1px; font-family:Open Sans; font-size: 14px; font-style: normal; line-height: 1.25; letter-spacing: 1px; text-transform: uppercase; text-align: center; color:#222; margin-bottom: 20px;}

@media only screen and (max-width: 767px) {

#slide-mailrelay {width:300px; height:auto;bottom:20px;}

#slide-mailrelay .mailrelayform {margin: 10px auto 10px; width: 250px; }
}

 

Luego de hacerle los ajustes necesarios para adaptarle a tu sitio, buscamos </body y justo antes de esta etiqueta pegamos esto:

 

<b:if cond=’data:blog.pageType != &quot;index&quot;’><script>
// JavaScript Document
$(document).ready(function() {
// If the ‘hide cookie is not set we show the message
if (!readCookie(‘hide’)) {
$(‘#slide-mailrelay’).show();
}

// Add the event that closes the popup and sets the cookie that tells us to
// not show it again until five days has passed.
$(‘#close’).click(function() {
$(‘#slide-mailrelay’).hide();
createCookie(‘hide’, true, 5)
return false;
});

});

// —
// And some generic cookie logic
// —
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = «; expires=»+date.toGMTString();
}

else var expires = «»;
document.cookie = name+»=»+value+expires+»; path=/»;
}

function readCookie(name) {
var nameEQ = name + «=»;
var ca = document.cookie.split(‘;’);
for(var i=0;i &lt; ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==’ ‘) c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}

return null;
}

function eraseCookie(name) {
createCookie(name,»»,-1);
}

</script>
<div id=’slide-mailrelay’>
<h3>
No te pierdas ni una historia
</h3>
<p>
Recibe cada mes en tu correo un resumen del blog
</p>

<div class=’mailrelayform’>
<form action=’http://mailrelay.mami507.com/ccm/subscribe/index/form/b4xcb5yio4′ enctype=’application/x-www-form-urlencoded’ method=’post’ target=’_blank’>
<input name=’groups[]’ type=’hidden’ value=’1’/>
<center><input id=’email’ name=’email’ onblur=’if(this.value==&apos;&apos;)this.value=&apos;aquí va tu correo&apos;;’ onfocus=’if(this.value==&apos;aquí va tu correo&apos;)this.value=&apos;&apos;;’ type=’text’ value=’aquí va tu correo’/></center>
<center><input class=’button’ name=» type=’submit’ value=’CLARO’/></center>
</form>

</div><center><a href=’JavaScript:void(0)’ id=’close’><i aria-hidden=’true’ class=’fa fa-times-circle’/>Cerrar</a></center>
</div>
</b:if>

La primera parte es el script que crea la cookie, está configurado para desaparecer por 5 días, esto lo modificas en esta línea, cambiando el 5 por los días que necesites:
createCookie(‘hide’, true, 5)

Con respecto al div, la modificación es idéntica a la del formulario al final de los post, aunque hago la acotación que dentro del form verás la frase ‘aquí va tu correo’ en tres ocasiones y en las tres debes poner tu frase, no sólo en una.Verás que tanto el script como el div están dentro de una condicional, esta hará que el slider saldrá en cada página EXCEPTO en las Index (página principal y entradas anteriores, las de etiquetas y las de archivo).

 

AYUDA PARA PERSONALIZAR Y ACLARACIONES

Si copias el código tal cual te saldrá con el mismo aspecto que en el blog de pruebas de Cyball. Para facilitarte la personalización te he marcado en colores ciertas partes del código además de añadir aclaraciones.
  • Morado: Se trata del código de los colores más importantes y texto que puedes personalizar a tu conveniencia.
  • Rosa: No olvides sustituir el enlace al formulario de suscripción de Cyball por el tuyo propio. No querrás que tus suscriptores vayan a su lista, verdad?
  • Azul: Si queréis cambiar al imagen de fondo del formulario solo tenéis que sustituir la url de la imagen de Cyball por la vuestra. Si simplemente queréis un color de fondo deberéis cambiar esta línea
background-image: url(«https://3.bp.blogspot.com/-1DFraasOv7A/V4iGeZdNqSI/AAAAAAAAFBQ/pZu6Cg-g9XYvaA4mSwriM8p4XACjjj_KACLcB/s1600/paper_mami.jpg»);
Por esta…………….
background: #códigodecolor;
 
 
El ejemplo está creado para usar el enlace al formulario que te proporcionar Mailrelay. No he comprobado si funciona con otro proveedor de email marketing. Así que si decides probarlo tu, estaré encantada de conocer tu experiencia.
Para terminar este es el resultado en el blog de pruebas:

 

Puedes verla en funcionamiento en este blog de prueba.Recomendación: Si deseas que el slider salga en todo tu blog, te recomiendo agregar en un gadget HTML/JAVASCRIPT  uno de los códigos (izquierda o derecha) incluidos en el siguientes zip:

*Descargar códigos para gadget/slider

Y desde allí (en la ventana de edición del gadget) puedes hacer las modificaciones antes mencionadas.
Y como decía el puerquito Porky: ¡Esssso eeeees tooodoooo amigos! Aquí mi último post como invitada en Frikymamá sobre el tema Mailrelay, encantada de compartir con ustedes esta información y agradecida con Ana María por darme un espacio en su blog.

 

¿Te ha sido de utilidad el artículo?
(Votos: 0 Promedio: 0)

Pin It on Pinterest