¡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.

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*/

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

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

*Descargar códigos para gadget/slider