Caja de aviso al entrar al blog con cookies

¿Que es una Cookie?

Las cookies almacenan información sobre tí, como nombre de usuario o información de registro, o preferencias de usuario, pero no espían, como el spyware.

Si tienes una cookie de un sitio web al que vas a menudo, la cookie recuerda cosas que harán tu próxima visita a esa página un poco más fácil, e incluso hace que las páginas se carguen un poco más rápido.

En este caso vamos a utilizar las cookies para recordar las visitas en el blog y así mostrar el aviso cada determinado tiempo, y no cada ves que entran al blog.

Lo va a mostrar la primera ves que visita el blog y después de un determinado tiempo, tipo recordatorio.

Los cookies se activan si cerramos la caja, si el visitante no cierra la caja, esta se mostrará en todas las visitas.

En esta caja podemos mostrar un aviso de bienvenida o invitando a los visitantes a registrarse a nuestras redes sociales y/o a suscribirse a los feed.

¿Cómo se hace...?

Ir a Diseño, Elementos de la página y añadir un gadget HTML/Javascript.

Poner los siguientes tres códigos, todos dentro del mismo gadget:

1- Código de la Caja:

<div id="avisosusc">
<a id="avisosuscerrar" href="#" onclick="closeGreetBox('4')">Cerrar X</a>

CONTENIDO

</div>

Colocar el CONTENIDO que quieran mostrar.

Podemos cambiar Cerrar X por una imagen.

2- Código CSS:

<style>

/* Estilos de la caja */

#avisosusc {
propiedad:valor;
propiedad:valor;
propiedad:valor;
}

/* Botón para cerrar la caja */

#avisosuscerrar {
propiedad:valor;
propiedad:valor;
propiedad:valor;
}
</style>

Le damos el estilo a la caja.

3- Código JavaScript: (es importante que este al final)

<script type="text/javascript">
function showHideDiv(){if(readCookie("ct")){document.getElementById("avisosusc").style.display="none"}else{document.getElementById("avisosusc").style.display="block"}}function closeGreetBox(a){createCookie("ct","true",a);document.getElementById("avisosusc").style.display="none"}function createCookie(c,d,e){if(e){var b=new Date();b.setTime(b.getTime()+(e*24*60*60*1000));var a="; expires="+b.toGMTString()}else{var a=""}document.cookie=c+"="+d+a+"; path=/"}function readCookie(b){var e=b+"=";var a=document.cookie.split(";");for(var d=0;d<a.length;d++){var f=a[d];while(f.charAt(0)==" "){f=f.substring(1,f.length)}if(f.indexOf(e)==0){return f.substring(e.length,f.length)}}return null}; showHideDiv();
</script>

La caja la movemos en donde se quiera mostrar, puede ser arriba de las entradas.

Pueden ver el ejemplo en el blog, abajo de la cabecera, también acá.

Código que utilizo en mi caja de aviso de suscripción:

Código de la Caja:

<div id="avisosusc">
<a id="avisosuscerrar" href="#" onclick="closeGreetBox('4')">Cerrar X</a>
<span style="margin:10px;;font-size:12px;">
Bienvenido amig@!!! Recuerda que puedes recibir las actualizaciones del blog a través de <a style="color:#3366CC" href="http://www.facebook.com/loseasi" target="_blank">Facebook</a> y/o <a style="color:#33CCFF" href="http://twitter.com/v_ku" target="_blank">Twitter</a>, o Suscríbase al Feed vía <a style="color:#FF9933" href="http://feeds.feedburner.com/blogspot/qygH" target="_blank">RSS</a> o vía <a style="color:#FF9933" href="http://feedburner.google.com/fb/a/mailverify?uri=blogspot/qygH" target="_blank">Email</a>.</span>
</div>

Código CSS:

<style>
#avisosusc{background:#E7F9F8;border-top: 2px solid #B5D4FE;border-bottom: 2px solid #B5D4FE;color:#3399FF;font-weight:bold;text-align: center;padding:5px;width:97%;margin-left:auto;margin-right:auto}
#avisosuscerrar{float:right;text-decoration:none;margin:0;color:#ccc;font-size:10px;}
</style>

Código JavaScript: (Es el mismo anterior visto)

<script type="text/javascript">
function showHideDiv(){if(readCookie("ct")){document.getElementById("avisosusc").style.display="none"}else{document.getElementById("avisosusc").style.display="block"}}function closeGreetBox(a){createCookie("ct","true",a);document.getElementById("avisosusc").style.display="none"}function createCookie(c,d,e){if(e){var b=new Date();b.setTime(b.getTime()+(e*24*60*60*1000));var a="; expires="+b.toGMTString()}else{var a=""}document.cookie=c+"="+d+a+"; path=/"}function readCookie(b){var e=b+"=";var a=document.cookie.split(";");for(var d=0;d<a.length;d++){var f=a[d];while(f.charAt(0)==" "){f=f.substring(1,f.length)}if(f.indexOf(e)==0){return f.substring(e.length,f.length)}}return null}; showHideDiv();
</script>

Si van a utilizar el código mío, cambiar los enlaces por los suyos.