Basándonos en el script para generar/leer/borrar cookies que vimos anteriormente, ahora intentaremos que cualquier elemento de nuestra página metido en una capa concreta, no se vea constantemente, sino sólo con la periodicidad que nosotros determinemos.En concreto, vamos a crear un cuadro que se solapará por encima de la página con un fondo oscuro semitransparente (ver Simular una ventana modal), que contendrá un aviso. Para no aburrir al personal mostrándolo contínuamente, se verá de manera individual PARA CADA VISITANTE, una sola vez cada 24 horas. En honor a la verdad, al tratarse de una cookie, el sistema discriminará realmente CADA ORDENADOR que se conecte a nuestra página.
En primer lugar hay que instalar las funciones que se citaron en Generar y recuperar cookies. Una vez hecho esto, ahora añadimos a continuación otro pequeño script que servirá para cerrar el cuadro emergente. Bueno, más bien para hacerlo visible o no-visible:
<style type='text/css'>
.visible {display:block;}
.invisible {display:none;}
</style>
<script type='text/javascript'>
function plegardesplegar(identificacion){
var menu = document.getElementById(identificacion);
if(menu.className == 'visible'){
menu.className = 'invisible';
}else{
menu.className = 'visible';
}
}
</script>
.visible {display:block;}
.invisible {display:none;}
</style>
<script type='text/javascript'>
function plegardesplegar(identificacion){
var menu = document.getElementById(identificacion);
if(menu.className == 'visible'){
menu.className = 'invisible';
}else{
menu.className = 'visible';
}
}
</script>
El funcionamiento es bien sencillo. Se envía una ID de determinada capa a la función, que recogemos con la variable identificacion. Si esta capa tiene la clase visible, la pasamos a invisible y viceversa. Dicho de otra forma, cada vez que lleguemos a la función, la capa cambiará su visibilidad (display:block, display:none). Esto lo usaremos adecuadamente después.
Ya tenemos los pasos previos para que todo funcione y ahora es cuando justo detrás de <body> colocaremos la capa y el código que comprobará si es la primera vez que el usuario ha estado en las últimas 24 horas. Si es así, la capa se verá. De lo contrario, no se verá:
<div class='invisible' id='idatenuar' style='z-index:99; position:fixed; top:0px; left:0px; overflow:visible; height:100%; width:100%; background:#000000; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; -khtml-opacity: 0.8;'/>
<div class='invisible' id='idbloque' style=' z-index:100;position:fixed; overflow:visible; top:50%; left:50%; width:400px; height:300px; margin-top:-150px; margin-left:-200px; border:5px solid #990000; background:#ffffff; color:#000000; padding:20px; text-align:center;'>
Ya he leído este aviso y ahora quiero <a href='javascript:plegardesplegar("idatenuar");javascript:plegardesplegar("idbloque");'>ENTRAR</a>
</div>
<script type='text/javascript'>
var comprobar = getCookie("vezprimera");
if (comprobar != null) {}
else {
var expiration = new Date();
expiration.setTime(expiration.getTime() + 86400000);
setCookie("vezprimera","1",expiration);
plegardesplegar("idatenuar");
plegardesplegar("idbloque");
}
</script>
<div class='invisible' id='idbloque' style=' z-index:100;position:fixed; overflow:visible; top:50%; left:50%; width:400px; height:300px; margin-top:-150px; margin-left:-200px; border:5px solid #990000; background:#ffffff; color:#000000; padding:20px; text-align:center;'>
Ya he leído este aviso y ahora quiero <a href='javascript:plegardesplegar("idatenuar");javascript:plegardesplegar("idbloque");'>ENTRAR</a>
</div>
<script type='text/javascript'>
var comprobar = getCookie("vezprimera");
if (comprobar != null) {}
else {
var expiration = new Date();
expiration.setTime(expiration.getTime() + 86400000);
setCookie("vezprimera","1",expiration);
plegardesplegar("idatenuar");
plegardesplegar("idbloque");
}
</script>
El primer DIV de este código, sólo es para construir una capa oscura semitransparente que ocupará el 100% del espacio disponible en el navegador, colocándose por encima de la página.
El segundo DIV crea otra capa por encima de la anterior (esto se hace con z-index) con un pequeño texto y un enlace que lleva a la función antes creada (plegardesplegar) y que permite hacer invisible las dos capas solapadas, para ver el contenido normal de la página. Dentro de esta capa es donde pondremos también lo que queramos: publicidad, un aviso, un flash... en fin, lo que deseemos mostrar.
Todo esto no presenta ninguna novedad sobre lo que ya vimos en anteriores entradas, salvo que las capas las haremos inicialmentes invisibles (class='invisible').
A continuación, dentro del último script, es cuando:
- recuperamos el valor de la cookie vezprimera
- abrimos un condicional para comprobar si tiene algún valor
- si lo tiene (ya se ha visitado la página anteriormente)
- no se hace nada y por tanto las capas permanecen invisibles
- si no tiene ningún valor (null)
- primero hacemos la variable expiration igual a la fecha actual (incluye hora)
- le sumamos a esa variable el tiempo requerido (24h en milisegundos=86400000)
- añadimos (setCookie) la cookie vezprimera al ordenador del usuario con el valor 1 y una fecha de caducidad igual a expiration (24 horas después)
- cambiamos la clase de idatenuar (capa oscura); como estaba en invisible ahora será visible
- idem con idcapa (el contenido del segundo DIV); ahora será visible
Evidentemente podeis hacer esto para un tiempo mayor o menor que 24 horas cambiando el valor sugerido (86400000). De hecho, para hacer pruebas lo mejor es cambiarlo a uno más pequeño, por ejemplo 15000 (15 segundos). Desde este enlace podeis lanzar una capa de prueba. Una vez vista y durante 15 segundos, por mucho que pincheis, no volverá a ser visible. Una vez transcurridos los 15 segundos, si pinchais volverá a salir sin problemas.
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
Perfecto Oloman! Sabes que llevo tiempo detrás de este efecto, y lo tenía ya olvidado! Y me meto hoy y lo veo! Muchas gracias, y a seguir currándotelo como lo haces!!
ResponderEliminarSolo por tocar un poquito más las narices... =)
ResponderEliminar¿Sería posible darle estilo al 2ºDIV, es decir, al cuadro blanco, y REDONDEAR LAS ESQUINAS?
Dentro de la etiqueta STYLE puedes meter lo que quieras.
ResponderEliminarHay un sistema moderno, pero que no es visible en todos los navegadores.
Hay un sistema más pesadito, pero que vale para todos los navegadores y como sólo hay que prepararlo una vez...
Por último está el que usaría yo para trabajar poco.
1.Quitas los bordes y el color de fondo.
2.Metes una imagen en un background en formato gif con transparencia y la forma que quieras.
Con eso tu aviso podrá tener las esquinas redondeadas, forma de estrella, triangular... o como quieras, sin necesidad de ceñirte a un formato ni tener que programar más código.
Hola gente! perdón que pregunte acá pero no encontré el tema en buscador y quería saber si me podían ayudar. Encontré finalmente una plantilla soñada que se llama Zinmag primus y tiene un Slider que configuré y curiosamente me anda genial en el dashboard de Diseño y en el blog de testeo pero en mi página principal se queda estático y no se mueve, solo muestra la primera imagen y enlace.Tampoco aparece el botón de start/stop que si aparece en el blog de testeo y el dashboard.Pregunté en el sitio de donde aparece para bajarla y nada, seguí instrucciones de otros comentarios de la gente en diferentes páginas que la tienen para bajar pero tampoco, nada. Como agregado hay una barra blanca en el encabezado que no puedo quitar con nada.Esta es mi página: http://amo-el-cine.blogspot.com si por ahí ustedes saben qué es lo que sucede los bendeciré más de lo que hago siempre!! jeje. La barra blanca de úlitma no me importa pero el slider es lo que más distingue al sitio!. Millón de gracias de antemano.
ResponderEliminarPues has pinchado en hueso :) porque de esa plantilla no tengo la menor idea.
ResponderEliminarSupongo que el slider se consigue con JQuery y un script que se llama de esa misma manera. Si dices que en el blog de prueba funciona, por darte alguna idea de qué hacer, puedes probar a ir quitando (provisionalmente, por ejemplo añadiendo símbolos de comentarios) otros scripts que puedan estar interfiriendo. Al menos he visto uno, que es el de los posts resumidos en portada.
Gracias Oloman, veré si es eso! Porque lo del Jquery lo tengo al igual que el scrip. Pero veré si es lo que me dices. Mil Gracias!!!!
ResponderEliminarMe lo miro con calma y te cuento cosas.
ResponderEliminarUn saludo.
Hola Oloman.
ResponderEliminarCuando leí lo de las galletas, me pregunte que para que servia esto, pero que algún motivo tendrías, y ahora al ver el post, me ha parecido estupendo, lo he puesto y funciona perfectamente, pero me he encontrado con un inconveniente. Como sabes el chat esta fijo, y ese, sí aparece delante, ¿habría alguna solución?
Por si acaso no lo tienes te pongo la dirección.
http://pruebasparadekarlatissa.blogspot.com/
Un saludo.
cocodrolo.
PD. Gracias por tu esfuerzo.
¿Puedes probar a añadir esto al código que te forma el chat?
ResponderEliminar<param name="wmode" value="opaque" />
Puede ir delante o detrás de cualquier otra etiqueta param, por ejemplo, detrás de
<param name="AllowFullScreen" value="true" />
2ª prueba si lo anterior no funciona:
<param name="wmode" value="transparent" />
Hola oloman, hace tiempo hice mi primer blog gracias a vos, y anduvo muy bien, pero ya cerré ese ciclo y ahora estoy en algo nuevo. te agradezco por eso.
ResponderEliminarResulta que mi nuevo blgo es este http://incojerencias.blogspot.com/, obviamente no está terminado, porque necesito que el header, el body y el footer encajen las imagenes. eso va bastante bien, el problema es el espacio que queda con la imagen de abajo y el limite de la pantalla, ya que se ve una parte del background del body y me arruina la trama. si te pasas me vas a entender.
espero me puedas ayudar a encajar las imagenes de alguna forma, :D
Saludos y seguí así
Hola Oloman.
ResponderEliminarHe estado intentando lo del chat, pero parece que es rebelde y no hace caso, posiblemente lo mande ejem. a su sitio, de todas formas si se te ocurre algo, no dudes en decírmelo, pues lo suyo seria dejarlo ahí, o como anónimo ha comentado, cambiarlo de columna.
Por otra parte pienso que a este post se le puede sacar mucho partido, (la diferencia que va desde que leí lo de las galletas) te comento.
La imagen fija la he cambiado por una imagen flash, queda bien, pero lo bueno de esto es que se puede poner una introducción en flash que es cuando se le sacara buen partido a este post.
Voy a ver que puedo poner de intro y te aviso.
Un saludo.
cocodrolo
Arriba del parquet, prueba a añadir a la línea que forma el fondo con imagen, un color:
ResponderEliminarbackground: url(http://www.lafoto.com.ar/images/bodynuevit.jpg) top center repeat-y #FFCC66;
Esto es una cosa. No entiendo muy bien si necesitas algo más...
Cocodrolo, sobre lo del flash, incluso puedes hacer que el fondo negro sea de otra manera en lugar de semitransparente (por ejemplo con una imagen) y simularía una página aparte.
Hola oloman, mira mi blog: http://rodrycompany.blogspot.com/
ResponderEliminarporque la imagen en la esquina tienen un contorno violeta? como se lo saco?
muy interesante
ResponderEliminarwww.tutoshector.blogspot.com
Oloman, sobre la plantilla Zinmag que te preguntaba, era nomás como decías. Desinstalé la barra de Wibiya y ahora anda bien!. ADOREEEEEEE ESTE SITIO siempre me resuelven todo. Gracias. Por eso siempre los recomiendo!!!
ResponderEliminarRodry, prueba a meter dentro de la etiqueta IMG un border="0" ;)
ResponderEliminarGracias Héctor.
Suerte, Pabela. Sólo he tenido suerte en acertar.
Oloman, me acao de dar cuenta que a los enlases vicitados se le pone el borde violeta. como hago para que los enlases vicitados no tengan color, es decir, que desaparesca el borde? eso se puso solo, yo no modifique nada. una bronca! ¬¬
ResponderEliminarIncluye esto en la parte de estilo de tu blog a ver si se cura:
ResponderEliminara:visited {
border:0px;
}
Lo hice de otra manera pero gracias!
ResponderEliminar¿Cual?
ResponderEliminaragrague un HTML/javascrip. no me deja postear el codigo. no se porque. pero puse A:visited {COLOR: transparent; TEXT-DECORATION: none}
ResponderEliminar;)
Te confieso que soy algo torpe con esto de las cookies, pero lo dificulta más el hecho de que el primer ejemplo que has elegido para su uso se me hace un poco cuesta arriba, al haber un botón para mostrar/ocultar de por medio.
ResponderEliminarHubiera sido más sencillo haber empezado con un ejemplo más simple, al menos para mi, por ejemplo, un cuadro con un mensaje, que es lo que yo quiero hacer... Esto es demasiado para mi... :S
Ya me lo volveré a mirar con más calma, a ver si puedo adaptar esta idea a mi necesidad concreta.
Gracias por el esfuerzo, como siempre.
PD: definitivamente, lo mío es lo sencillo :D
José GDF, el botón es sólo esto
ResponderEliminarYa he leído este aviso y ahora quiero <a href='javascript:plegardesplegar("idatenuar");javascript:plegardesplegar("idbloque");'>ENTRAR</a>
Pero si no lo pones o al menos lo sustituyes por un temporizador, el aviso se quedará in eternum ahí. Es imprescindible.
Prueba a copiar todo tal cual está aquí y luego sólo cambia el contenido del DIV con ID=ID_BLOQUE. Te quedará lo que tú quieres.
¡Uf! Te agradezco la ayuda, pero ya lo intentaré en otro momento. Ahí quedan estos comentarios para futuras consultas... :S
ResponderEliminarTengo un pequeño problema con este ejemplo. Intento hacerlo en mi blog y no hay manera de que funciones.
ResponderEliminarSi pongo div class=visible si que me aparece, pero si pongo lo pongo en invisible no me aparece nada. Creo que he hecho bien lo de las cookies. Mi blog es piscinasarnedo.blogspot.com y no consigo ver el error. Me puedes ayudar??
Creo que has mezclado este sistema y el de esta otra entrada y por el aspecto, creo que quieres precisamente lo de la otra. Borra lo que pusiste (excepto el script general de gestión de cookies, que es el mimso) y vuelve a instalarlo todo según ese otro post. Lo he vuelto a comprobar y tanto en este como en aquel, lo que se proponía funciona.
ResponderEliminarPor si acaso, coloca el valor del tiempo en 10.000 mientras haces pruebas para que sólo tengas que esperar 10 segundos para ver los distintos resultados. Cuando esté a tu gusto, ya coloca el tiempo que necesites.
hola oloman, me ha gustado mucho el script pero quisiera que el DIV se muestre en forma automática al ingresar al sitio, es decir, cada vez que se accede al index. cómo sería el código JavaScript en este caso?
ResponderEliminarespero puedas ayudarme..
muchas gracias!!
Hola Agostina. Este código funciona desde la página index y desde todas. Lo que ves aquí es una demo y sólo aparece en este post.
ResponderEliminar¿Lo que quieres es que salga SIEMPRE y no una vez al día? ¿Que salga sólo en el INDEX? ¿Ambas cosas?
Hola Oloman
ResponderEliminarYa he agregado las funciones de generar y recuperar cookies, tambien el script que pones hacer visible he invisible.
El problema que tengo es que yo tengo un codigo el cual es para dar una advertencia antes de antrar a la pagina pero esta advertencia se muestra siempre que ingresan a la pagina principal,lo cual es molesto y quiero que esta advertencia se muestre cada 24 horas pero no tengo idea de como hacerlo funcionar y quisiera saber si me puedes ayudar aca te dejo el codigo es largo por lo que lo pongo en tinypaste.
http://tinypaste.com/0a068c
Te dejo mi correo AndieRvs@live.com
Espero que me puedas ayudar :]
Andie, pásate a este otro post, que allí está explicado al detalle tu caso particular: http://goo.gl/F622f
ResponderEliminarHola!
ResponderEliminarYo la verdad pruebo pero no me sale (tengo una intro sacada de CiudadBlogger)
Necesito que esa intro solo se repita una vez cada día...pero no puedo aplicar tu truco
Me podrías ayudar?
Este es mi blog: http://alegriahogar.blogspot.com/
Y este mi correo: veronicamonyo@gmail.com
Curu-Curu, actualmente voy fatal de tiempo y no puedo ver casos concretos tan al detalle. Explícame en pocas palabras (sin código, sólo el sistema usado) cómo hiciste esa intro e intentaré hacer lo propio para que incluyas el sistema de cookies que es el único que sé aplicar para esto.
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarHice un comentario pero lo poco que pude explicar no me dejo porque supuestamente tenía códigos...y no tenia nada! jaja..
ResponderEliminarbueno a ver...el truco lo saque de aqui http://ciudadblogger.com/2011/05/crear-un-intro-para-el-blog.html
Es básicamente ocultar el blog bajo dos capas (una es ".BlogOculto" y la otra es "#Intro") todo el código esta debajo de Body, se agrega /span arriba de /body.
Yo probe en un blog de pruebas mio tu truco (junto con lo de agregar cookies) sin usar la intro de ciudad blogger, y la verdad que anda una maravilla.
Pero no se como adaptarlo a la intro de ciudad blogger.
Disculpa por hacerte perder tiempo, gracias de antemano por querer ayudarme :)
Curu-Curu si ya has probado el truco de esta entrada y te funciona, nos va a costar infinitamente menos adaptar este que el de El Potro. Para el de Ciudad Blogger habría que añadir JavaScript y como he dicho, para eso mejor usar este.
ResponderEliminarSi lo tienes todavía en tu prueba, sólo tienes que cambiar este DIV...
<div class='invisible' id='idbloque' style=' z-index:100;position:fixed; overflow:visible; top:50%; left:50%; width:400px; height:300px; margin-top:-150px; margin-left:-200px; border:5px solid #990000; background:#ffffff; color:#000000; padding:20px; text-align:center;'>
Ya he leído este aviso y ahora quiero <a href='javascript:plegardesplegar("idatenuar");javascript:plegardesplegar("idbloque");'>ENTRAR</a>
</div>
...y cambiarle el tamaño y contenido para que se convierta en la Intro que quieres. Si no deseas transparencia o color negro en la capa de abajo, entonces también tendrías que cambiar las propiedades de estilo del DIV que está en el código justo antes de este.
De todas formas, eso es para que practiques. Si prefieres partir de cero, en esta entrada está explicado exactamente lo que quieres :D
Este comentario ha sido eliminado por el autor.
ResponderEliminarTe aviso que en ningun lado me aparece "body" asi solo...solo aparece "/body" no se si en mi plantilla aparecera de otra forma (uso las del diseñador de plantillas de blogger)Pero igual mas o menos le ubique creo jajaja
ResponderEliminarTengo un problemita, no se si es en mi compu no más o no anda lo del div que se muestre en 24hrs.
Podrías fijarte por favor si anda?
prueba280590.blogspot.com
cuando salgo del intro y estoy en el blog y quiero volver a la pagina principal me devuelve a la intro
Perdón por las complicaciones, gracias nuevamente por ayudarme ^^
Curu-Curu, TODAS las plantillas tienen un <body> y su correspondiente cierre </body>. Es una etiqueta obligatoria para cualquier página web.
ResponderEliminarSobre los problemas, HOY observo que tienes dos veces las capas INVISIBLE. Eso provoca conflictos porque las ID tienen que ser únicas y ahora mismo tienes dos. Se ve que con las pruebas te dejaste una por ahí extraviada. Compruébalo.
Ah si tenes razón, tengo una abajo de /head y luego otra arriba de /body...
ResponderEliminarPor las dudas antes de hacer macana jaja cual debería borrar?
Bueno probe mucho y no anda el truco, una lastima, pero bueno voy a desistir no más.
ResponderEliminarGracias igual por la ayuda, chau.
Curu-Curu puesto que el sistema funciona, lo que te iba a proponer es que borraras todo lo que encontraras y empezaras de nuevo. No cuesta mucho trabajo y seguro que así no se producen "efectos indeseados", pero si no te interesa tanto como para seguir, pues perfecto ;)
ResponderEliminarMe sale errores al usar el code alguna ayuda me sale l error de syntaxis te lo pase a facebook
ResponderEliminarTe lo comenté también por allí, pero seguramente es porque no instalaste el sistema de gestión de cookies que se dice y enlaza en la primera parte del post.
EliminarHola, me funciono perfectamente pero quisiera saber si es posible que la funcion no se ejecute hasta unos segundos despues de entrar al sitio o blog, gracias de antemano
ResponderEliminarHola Siegfried
EliminarEslo. Es posible. Lo puedes hacer con setInterval. En este post alguien explica cómo utilizarlo.
Hola Olo... una pregunta, es posible personalizar la imagen? Me gustaría poner una imagen personalizada y que aparezca solo la primera vez que la persona entra a la página y que le aparezca 1 vez cada 24 horas cuando ingrese al blog... es posible hacerlo¿?
ResponderEliminarHola Carlos. Claro que puedes poner la imagen que quieras. Cualquier cosa puede ir dentro de es DIV. Y lo de que aparezca cada 24h es justo lo que explico en esta entrada.
EliminarHola Olo, he hecho todo lo que dice tu tutorial pero no me funciona..una pregunta el div que define el "pop up" va dentro de head o dentro de body?
ResponderEliminarHola Sergio. Va dentro del BODY. Si relees el post verás que indiqué que esa parte va justo tras la apertura <body>
EliminarQuizás no pusiste previamente en plantilla el sistema de cookies que enlacé y el "pequeño script" que también hay que añadir antes de construir la parte "pop up".