x About... Servicios Portfolio BLOG Mis guest posts Contacto Codificando tu estilo
- 9.9.16 - Tutorial

Crea un slider para anuncios en el blog, con CSS3 y cookie incluida

Slider Box para anuncios en Blogger

Existen muchos servicios, gratis y de pago, para crear ventanas modales para anunciar a nuestros lectores algún evento especial.

Con motivo del #4tocumpleblog de mi sitio personal diseñé un slider cuqui para anunciar el sorteo para quienes me han acompañado en El Blog de Cyball. Pues ahora te enseñaré como insertar uno en tu blog de manera rápida y sin tocar la plantilla.

Pero eso no es todo sino que te traigo dos modelos, ajustables a pantallas móviles:



Desde la izquierda:
<style>
#slide-cyball {background: transparent; position:fixed;z-index: 9999990;width:320px; height:auto;bottom:50px; left:-110%;display:none;padding:10px; animation:slidecc .5s;-webkit-animation:slidecc  .5s;animation-delay:25s;-webkit-animation-delay:25s;animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;}
@keyframes slidecc {
  100%{left:0px;
  }
 }
 @-webkit-keyframes slidecc {
  100%{left:0px;
  }
 }

#slide-cyball a {top:5px; right:5px; left:auto;bottom:auto;}
#slide-cyball .anuncio { padding: 0px 0px; margin: 10px auto 10px; display: block; width: 350px; } 
@media only screen and (max-width: 767px) {
#slide-cyball {width:265px; height:auto;bottom:30px;}
#slide-cyball .anuncio {margin: 0px; width: 250px; }
#slide-cyball .anuncio img {width:75%;height:auto; }
}
</style>
<script>
// JavaScript Document
$(document).ready(function() {

  // If the 'hide cookie is not set we show the message
  if (!readCookie('hide')) {
    $('#slide-cyball').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-cyball').hide();
    createCookie('hide', true, 1)
    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 < 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-cyball'>
<a href='JavaScript:void(0)' id='close'><i aria-hidden='true' class='fa fa-times-circle'/></i></a>
<div class='anuncio'><center>
<a href='http://www.cyballruiz.com/p/media-kit-del-blog.html' target='_blank'><img src="https://4.bp.blogspot.com/-OytgZOxQlQg/V70uoya0g3I/AAAAAAAAFhQ/MhPovptGfjwF1WXr7sdQyO0M_U8mn3yXACLcB/s1600/anuncios-en-soycyball.jpg" /></a></center></div></div>





Desde la derecha
<style>
#slide-cyball {background-image: url('https://3.bp.blogspot.com/-E2Ufc4p_K5Q/V704MN15SYI/AAAAAAAAFhs/Cw4AHge4wMMkqWghrDoJARIGO7MGeR84ACLcB/s1600/Coffee_Yellow.png'); position:fixed;z-index: 9999990;width:400px; height:auto;bottom:50px; border-top: 5px solid #000; border-left: 1px solid #000; border-radius: 5px; right:-110%;display:none;padding:10px; animation:slidecc .5s;-webkit-animation:slidecc  .5s;animation-delay:25s;-webkit-animation-delay:25s;animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;}
@keyframes slidecc {
  100%{right:0px;
  }
 }
 @-webkit-keyframes slidecc {
  100%{right:0px;
  }
 }

#slide-cyball a {top:5px; right:5px; left:auto;bottom:auto;}
#slide-cyball .anuncio { padding: 0px 0px; margin: 10px auto 10px; display: block; width: 350px; } 
#slide-cyball .anuncio a.boton {font:normal normal 15px Arial;text-transform:uppercase;background:#000;color:#fff;text-decoration:none;display:inline-block;padding:15px;margin-bottom:0;line-height:120%;text-align:center;white-space:nowrap;vertical-align:middle}
#slide-cyball .anuncio a.boton:hover{color:#000;background: #fff; border: 2px solid #000; text-decoration:none}
#slide-cyball h3 { margin-top: 30px; font-family:Arial; 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;}
#slide-cyball p { margin-top: 1px; font-family:Arial; font-size: 17px; 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-cyball {width:265px; height:auto;bottom:30px;}
#slide-cyball .anuncio {margin: 0px; width: 250px; }
}
</style>
<script>
// JavaScript Document
$(document).ready(function() {

  // If the 'hide cookie is not set we show the message
  if (!readCookie('hide')) {
    $('#slide-cyball').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-cyball').hide();
    createCookie('hide', true, 1)
    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 < 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-cyball'>
<a href='JavaScript:void(0)' id='close'><i aria-hidden='true' class='fa fa-times-circle'/></i></a>
                    <h3>
 ¿Nos tomamos un café?
                    </h3>
              <p>
Participa en nuestra comunidad
              </p>
<div class='anuncio'><center>
<a class='boton' href='https://www.facebook.com/soycyball/' target='_blank'>únete ya</a></center></div></div>



Bueno, manos a la obra.


Ve a Diseño > Agregar Gadget, selecciona HTML/JAVASCRIPT y dentro coloca el código completo del modelo y orientación que hayas escogido. 

Indicaciones de configuración

La primera parte, <style>, corresponde a los estilos del slider y desde allí 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...).

La segunda parte es el <script> que crea la cookie, está configurado para desaparecer por 1 día (y así no molestar a nuestra visita si sigue navegando en nuestro blog), esto lo modificas en esta línea, cambiando el 1 por los días que necesites:

createCookie('hide', true, 1)

Con respecto al <div>:
En la versión de imagen
Te recomiendo subir esta a una entrada del mismo blog que guardarás como borrador y copias el enlace directo a ella.. Luego lo pegas dentro de la etiqueta <img>, sin olvidar colocar la url a la que deseamos que lleguen dentro de la etiqueta <a> que envuelve a la imagen.

En la versión de texto
Aquí la configuración es más amplia, tanto en diseño como en el contenido. Asumo que ya tienes nociones de css y html así que seré directa:
  • Para cambiar la imagen de fondo, en <style> tienes que encontrar background-image y dentro del paréntesis que le sigue sustituyes la url de la imagen que coloqué con la tuya. Si no quieres imagen elimina:
    background-image: url('https://3.bp.blogspot.com/-E2Ufc4p_K5Q/V704MN15SYI/AAAAAAAAFhs/Cw4AHge4wMMkqWghrDoJARIGO7MGeR84ACLcB/
    s1600/Coffee_Yellow.png');
    y coloca
    background: #ffff00;
    donde pondrás el código del color que gustes.
  • En <h3>: va el título que llamará la atención de quien te lee.
  • En <p>: va la frase explicativa, aunque puedes prescindir de ella y para eso elimina toda la etiqueta.
  • Y en la <a>: coloca la url a donde quieres dirigir la atención.

¡Listo! ya tienes un anuncio llamativo y ligero instalado en tu blog, y cuando termine la campaña  que mostrabas solamente tienes que eliminar en un segundo el gadget que lo contiene. 

NOTA FINAL
Este slider puede ser usado para insertar cualquier elemento y ser modificado a nuestro gusto, y próximamente en el blog de Frikymamá verás mi tutorial para usar este slider para obtener suscriptores y conectarlo con Mailrelay. Sin duda, un slider multifuncional.


Se ha comentado...

Dejar comentario

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *