Para ello vamos a echar mano de lo que resulta más sencillo y que es la instrucción JavaScript setTimeout, que hace una tarea que se le indique, pero con una demora de tiempo que podemos programar.
Lo primero que necesitamos es un sistema para hacer que las cosas aparezcan/desaparezcan y vamos a utilizar uno bastante recurrente y que recomendamos tener siempre en plantilla, ya que sirve para bastantes cosas distintas. Si no lo tenéis todavía, aquí está el código para poner antes del </head>:
<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>El código es sencillo. Primero creamos las clases visible e invisible que le dan esas mismas características respectivamente a las capas a las que se asignen esas clases. Luego se crea una función (plegardesplegar) que cuando le llega un id de una capa concreta, comprueba su clase actual y la cambia. Por tanto, pasará lo visible a invisible y viceversa.
Una vez hecho esto ya podemos montar nuestro elemento temporal. Sólo tenemos que crear una capa con una id única y justo detrás de ella, para que el contador de tiempo comience a correr tras su carga, este script:
<script type='text/javascript'>
window.load=setTimeout("plegardesplegar('id_capa_a_cerrar')", 8000);
</script>
window.load=setTimeout("plegardesplegar('id_capa_a_cerrar')", 8000);
</script>
En verde lo que hay que ajustar: la id de la capa a cerrar y el tiempo (en milisegundos).
Un ejemplo. Recordamos que para hacer una pantalla de presentación para el blog, propusimos hace tiempo un sistema relativamente sencillo con cookies, de manera que a un mismo usuario sólo le apareciera una vez cada cierto tiempo y no todas las veces que accediera al Home en la misma sesion. Pero este sistema todavía sería más sencillo por permitirnos prescindir de las galletitas... aunque también se podrían combinar las dos cosas.
Para hacer esto y una vez instalado el primer código de esta entrada (el de la función plegardesplegar), sólo habría que buscar el <body> y justo detrás pegar esto. El contenido interior del div es el que deberíais personalizar vosotros para que pareciera una auténtica presentación que, por supuesto, desaparecería tras unos segundos. No os paséis con el tiempo.
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div class='visible' id='capasuperpuesta' style='z-index:99999; position:fixed; top: 0; left: 0; overflow:visible; width:100%; height:100%; background: #F4F8F9;'>
<div style='width:600px; height:400px; position:absolute; top:50%; left:50%; margin-left:-300px; margin-top:-200px; padding:100px 30px 0px 0px; color:#000000; font-size:20px; line-height:20px; text-align:center;'>
Dentro de esta capa interior es dónde podemos poner una imagen, enlaces, texto, un menú, un vídeo, una lista, un flash... en fin, lo que sea.
</div>
</div>
<script type='text/javascript'>
window.load=setTimeout("plegardesplegar('capasuperpuesta')", 8000);
</script>
</b:if>
<div class='visible' id='capasuperpuesta' style='z-index:99999; position:fixed; top: 0; left: 0; overflow:visible; width:100%; height:100%; background: #F4F8F9;'>
<div style='width:600px; height:400px; position:absolute; top:50%; left:50%; margin-left:-300px; margin-top:-200px; padding:100px 30px 0px 0px; color:#000000; font-size:20px; line-height:20px; text-align:center;'>
Dentro de esta capa interior es dónde podemos poner una imagen, enlaces, texto, un menú, un vídeo, una lista, un flash... en fin, lo que sea.
</div>
</div>
<script type='text/javascript'>
window.load=setTimeout("plegardesplegar('capasuperpuesta')", 8000);
</script>
</b:if>
VER EFECTO AHORA MISMO
(Tras 8 segundos desaparecerá automáticamente)
(Tras 8 segundos desaparecerá automáticamente)
Dentro de esta capa interior es dónde podemos poner una imagen, enlaces, texto, un menú, un vídeo, una lista, un flash... en fin, lo que sea.
¿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...
Muy buena la entrada Oloman en cuanto la necesite ya se de donde coger
ResponderEliminarSaludos
Muy buen efecto, para dejar notas
ResponderEliminarAun no había comentado en tu blog que llevo siguiendo durante casi dos años que abrí el mio. He seguido muchos consejos y trucos increíbles que no pensé llegar a utilizar.
ResponderEliminarHe estado buscando en el buscador de tu sitio y no pude encontrar la solución para cambiar mi botón de "leer más" por el mío diseñado y sin que se desplace de lugar aa la esquina de mi pre post involuntariamente, lo kiero en la misma posición. Supongo que es cuestión de poco código del que no tengo ni idea. xd.
buen trabajo este el tuyo, felicidades.
Echa un vistazo a esta entrada. Lo tienes que hacer exactamente igual pero sustituyendo .jump-link por .read-more, ya que esta última clase es la que utilizas tú en tu blog para el corte (Read on).
EliminarPara la posición ya tienes que añadir allí un text-align, un float o un position, según lo que quieras hacer exactamente, porque esa parte no la he entendido.
Oloman, soy un necio... no doy puesto ni imagen ni nada... :(yo tengo una web mediante magix) y el editor solo tiene una etiqueta de HTML, y ahi es donde pego todo lo que has puesto y en la ID_CAPA_A_CERRAR puse una foto en html, pero ... no me sale nada, ya que el editor de HTML que yo manejo, no tiene NADA, simplemente te deja pegar lo que quieras, y si está bien puesto, pues se ve, en éste caso... no tengo ni idea de donde coloco el texto, ni las etiquetas (ej. head body etc) ¿Me podrias ayudar POR FAVOR? soy novato, y me gusta mucho ésto, pero... yo solo no tengo ni idea. Te dejo mi e-mail por si pudieras ayudarme, te estaria muy agradecido. info@discomovilchisco.com GRACIAS de antemano, tanto si puedes ayudarme como si no.
EliminarPues si no es Blogger va a ser difícil que te eche una mano, pues no puedo conocer cómo funcionan todas las plataformas.
EliminarPor probar, prueba a poner todo el código aquí reproducido, pero sin la línea
<b:if cond='data:blog.homepageUrl == data:blog.url'>
...y...
</b:if>
Esas dos líneas son exclusivas para Blogger.
Gracias OLOMAN! este truco lo eh querido aplicar (en otro BLOG)
ResponderEliminareres grande Man de Nuevo Gracias, Saludos! :)
Gracias por este blog y sus informaciones. He aplicado este efecto en una portada de presentación mientras reformo la web para el blog, pero en el Ipad y otros navegadores se superponen los vídeos de youtube que tengo debajos en el blog por encima de la capa. Algo ocurre. Mi web es la siguiente.
ResponderEliminarhttp://www.orquestacostabella.com/
Muchas gracias
Añade a la dirección del src
Eliminar&wmode=transparent
Es mágico ;)
saludos oloman, te felicito x tu blog xk realmente he encontrado muy buenos trucos k voy a aplicar en mi blog k estoy creando... soy nuevo en esto y kisiera k me sakes de una duda; cuando te refieres a una "id única" te refieres a una url de la imagen k vamos a mostrar? te agradezco de antemano y disculpa mi ignorancia, como te repito soy nuevo en esto =/
ResponderEliminarEste comentario ha sido eliminado por el autor.
EliminarNo. Una id es un nombre o conjunto de caracteres que se le dan a un elemento. Por ejemplo: pepe, 203445, bloq254, capasuperpuesta, etc.
EliminarUna capa (span,div) puede llevar una clase (class) y/o un identificdor (id). Las clases pueden aplicarse a distintos elementos pero las id tienen que ser únicas, es decir, sólo puede haber una capa por página que lo lleve. De esa manera se puede saber a qué elemento te refieres cuando se nombra desde por ejemplo un programa.
Hola, mi nombre es Gabriel y disculpa, pero no soy muy bueno en esto, mi única duda porque lo demás funciona perfecto, es que le agregué un texto y sale perfecto, pero al intentar agregarle una imágen jpg alojada en Dropbox, me aparece el detalle del Link agregado (obvio que no me ha funcionado). Mi consulta es si debo agregarle algún código img u otro adelante del Link. Espero haber sido claro en la pregunta. Desde ya muchas gracias por la respuesta. Muy interesante tu Blog, soy un seguidor del mismo. Saludos desde Devoto, Córdoba, Argentina.
ResponderEliminarDevoto es un nombre muy adecuado después de haber comentado que eres seguidor de este blog ;)
EliminarPara que la imagen te salga tienes que escribir su dirección dentro de una etiqueta IMG. Sería así:
<img src="DIRECCION_IMAGEN"/>
Hola Olo...
EliminarTengo el script de un pequeño y sencillo calendario que pasa "solito" los días los meses y los años, pero necesito que haga algo más aún. Necesito crear un vinculo idéntico para cada día, pero que solo esté disponible para clickear sobre él el día actual que está remarcado y ninguno más. Lo ideal, me parece, sería que el remarque (highlight) que cambia cada día para señalar el día actual, "arrastrara" consigo mismo el link (pues es el mismo para cada dia) ¿Es posible hacer eso?
Gracias adelantadas.
Ceroid.
Sin ver el script me resulta imposible decirte algo. Seguro que se puede, pero como te dije tendría que ver si yo soy capaz de interpretar ese código.
EliminarHola
ResponderEliminar¿cómo harías para que un elemento apareciera después de cierto tiempo de navegar en la página.
Saludos
Con el mismo código Ernesto, pero al elemento ponle la clase "Invisible. Así al ejecutarse el JS, tras el tiempo programado se cambiará a "Visible" y aparecerá.
EliminarHola!!! Una consulta, me gustaría que al iniciar mi página web aparezca un video que tengo colgado ya en YouTube, y cuando termine de reproducirse (lo tengo configurado en forma automática) desaparezca, copié y pegué tus códigos el de SetTimeOut tal cual y también el segundo que es cortito de plegardesplegar y en id_capa_a_cerrar lo reemplacé por el código que me brindó el mismo canal de YouTube para colocar en mi página de internet, pero veo que algo está mal porque al realizar la prueba no aparece nada, básicamente la cuestión sería: en qué parte exactamente en tus códigos tendría qué colocar lo siguiente??? De tal forma que aparezca el video y al terminar de reproducirse desaparazca... MIL GRACIAS!!!
ResponderEliminarperdón, no me dejó copiarlo, tuve que separar todo, mi código es: < center > < i f r a m e w i d t h="500" h e i g h t="281" s r c="//www.youtube.com/embed/CPvtxoMVqYE?rel=0&autoplay=1" frameborder="0" allowfullscreen > < / i f r a m e > < / center >
ResponderEliminarTodo eso lo tienes que poner en lugar del texto del ejemplo "Dentro de esta capa interior e...". Y luego el retardo tendrá que ser el mismo que tiempo tiene de duración el vídeo. Quizás algún segundo más por si las demoras. Sólo eso.
EliminarHola Oloman: Gracias por responder, he seguido paso a paso tus indicaciones pero sigue sin aparecerme el efecto, de hecho sí que me aparece el vídeo en el inicio, pero debido a que no desaparece, entonces ya no me permite visualizar el contenido de mi web, lo que hice fue copiar y pegar exactamente el primer recuadro de códigos que va antes del < head > y el último de tus recuadros con códigos (entiendo que el segundo no es necesario porque ya lo incluye el 3ero.) también lo copié y pegué tal cual, a excepción que agregué mi código del vídeo de YouTube en lugar de tu texto que dice "Dentro de esta capa... lo que sea". Asimismo probé eliminando y
ResponderEliminary probé también agregando &wmode=transparent tal como aconsejaste en otros de tus comentarios, tmb he respetado tus milisegundos de 8000. Ojalá y pudieras orientarme qué estoy haciendo mal??? O no será que hay alguna otra variable que no he estado considerando y debería modificar??? De nuevo gracias por tu atención...
No sé C Kiryat, lo tendría que ver, pero primero prueba a añadir mi código tal cual (primer y tercer trozo, eso está bien) y si funciona ya está claro que tiene que ser cosa del código que sustituyes.
EliminarCodigo funciona perfectamente , se puede ver en mi sitio http://www.cadalsocomputer.es/
ResponderEliminarHe tenido que cambiar los carracteres especiales ;)
Gracias
Sí Popu. Eso es porque aquí los suelo ofrecer adaptados para Blogger. Me alegro de que te sirviera.
Eliminar