La idea es más o menos la misma que se comentó en su momento, pero ahora sólo utilizaremos CSS. Cómo el código se va cargando por el orden en que está escrito, lo que haremos en esta ocasión será cargar primero de todo una capa con el aviso y justo al final del código (cuando se haya cargado todo), la hacemos invisible.
Para ello, justo después de <body> insertaremos el código de la capa:
<!-- DIV AVISO -->
<div id='aviso' style='text-align:center;margin:0px auto;position:absolute;left:20px;top:80px;width:136px;background-color:#eeeeee;border:1px #000000 solid;padding:5px;'>
<img style='display:block;margin:0px auto;' src='http://img38.imageshack.us/img38/8775/ajaxloader2h.gif'/>
<span style='font-family:Verdana;font-size:10px;font-weight:bold;color:#990000;'>Cargando datos.</span>
</div>
<div id='aviso' style='text-align:center;margin:0px auto;position:absolute;left:20px;top:80px;width:136px;background-color:#eeeeee;border:1px #000000 solid;padding:5px;'>
<img style='display:block;margin:0px auto;' src='http://img38.imageshack.us/img38/8775/ajaxloader2h.gif'/>
<span style='font-family:Verdana;font-size:10px;font-weight:bold;color:#990000;'>Cargando datos.</span>
</div>
Este es sólo un ejemplo y vuestra creatividad es la que decidirá qué poner dentro del DIV. Lo único imprescindible es que tenga un ID (en el ejemplo aviso) y que lo recordemos, porque es el que necesitaremos a continuación.
Como decíamos, ahora al final del código colocamos estilo CSS para para que el anterior ID se vuelva no-visible. Por tanto, justo antes de </body>, tenemos que insertar:
<style type='text/css'>
#aviso {
visibility:hidden;
display:none;
}
</style>
#aviso {
visibility:hidden;
display:none;
}
</style>
Y eso es todo. Gracias José GDF.
Bonus: Ajaxload. Una aplicación online para diseñar tus propios iconos animados de carga.
Actualización: Loader Generator. Otra aplicación para crear cargadores que en este caso nos chiva Rodry D.
¿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...
Este comentario ha sido eliminado por el autor.
ResponderEliminarHola oloman! ya conocia esa pagina. te dejo esta que me gusta mas: Load info - gif generator
ResponderEliminaruuoooo!! justo lo que buscaba! thx a Jose!!
ResponderEliminarHola Olomán:
ResponderEliminarAcudo a este rincón guiado de la mano de un amigo; http://antoniomartnortiz.blogspot.com/
Mi blog: extremeoencataluablogspot.com
Soy un "zote" en informática y acudo a ti porque tengo un problema.
Tengo grabadas en audio "Goear" varias poesías, de pronto, sin saber por qué, cada vez que entro en mi blog se me disparan todos los audios a la vez pareciendo un verdadero gallinero.
¿Puedes ayudarme a resolver este problema? Te estaría muy agradecido y me das alguna pista para solucionarlo.
Un afectuoso abrazo.
¿Cómo podría hacer un formulario de contacto en el que los lectores te puedan mandar texto e imágenes sin ir al correo?
ResponderEliminarHola Oloman! tengo una pequeña duda, pero no relacionada con el tema:
ResponderEliminarPor qué con algunas plantillas es como si mi blog no existiera? por ejemplo: cuando intento editar Archivo de blog o etiquetas directamente desde la sidebar me dice que esa página no existe y al buscar mi blog desde otros computadores efectivamente no aparece, pero yo puedo editarlo y visualizarlo. Es un error en el código de la plantilla? Algo más serio? Sabes si puedo hacer algo para arreglarlo?
No le había tomado mucha importancia, pero me sucede con muchas plantillas.
Desde ya gracias^^
Eres un crack. Me alegro que te haya llegado para toda una entrada uno de mis comentarios.
ResponderEliminarPD: a veces, menos es más. ;)
Bueno Terly, ya somos dos (zotes informáticos) GoEar lo he usado muy esporádicamente y he visto los ficheros que tengo publicados y no me dan ese problema. Eso y Occam (amigo también de Antonio) me hacen pensar que has tenido que cambiar algo en tu blog o en la configuración de GoEar y con ello ahora se arranquen solos los audios. Haz memoria y a ver qué puede ser. No tengo otras pistas para darte aparte de que mires que es kriteria.adswizz, porque se trata de algo que te deja la página medio colgada.
ResponderEliminar...
Antes de cerrar este comentario he podido por fin cargar toda tu página y no se ha arrancado ningún audio. He tenido que pinchar en el "play" para que lo hiciera, lo cual me hace pensar que quizás el misterioso cambio esté en tu navegador en lugar de en la página o en GoEar. Prueba a usar otro.
Javierlota, hay varios servicios de formularios y casi todos tienen la opción de meter un campo para el envío de texto e incluso ficheros en general (incluidas imágenes, claro). emailmeform es uno de los que he probado satisfactoriamente. En este blog puedes ver un ejemplo de su funcionamiento.
ResponderEliminarSi quieres probar otros: Crear formularios
Makiss, no entiendo muy bien lo que pasa, pero hay cosas que sólo son visibles cuando estas logueado y Blogger detecta que se trata del administrador del sitio. También he detectado que en ocasiones, algunos gadgets sólo se pueden editar desde Elementos de Página y da error si se hace desde el icono de edición rápida, pero esto último no tengo ni idea de por qué ocurre.
ResponderEliminarJosé GDF, tú si que eres un crack. :D
Amigo Oloman:
ResponderEliminarNo sé como agradecerte todas las explicaciones que me das con respecto a mi problema. Ya me dijo Antonio que me atenderías por cuyo motivo, doble agradecimiento, a ti por hacerlo y a Antonio por enviarme a ti.
Copio y me llevo cuanto me dices pata intentar resolver el problema o apoyarme en alguien que sepa hacerlo.
De nuevo mi agradecimiento y un fuerte abrazo.
Muchas Gracias por tu Esfuerzo!!!!
ResponderEliminarHe utilizado bastantes de tus post para mejorar (creo) mi blog, pero el problema que tengo es que mi plataforma es fullblog y muchos de los trucos/consejos no son aplicables.
Fullblog es mucho más modesta, pero a mí, que ni papa de diseño, me ha resultado más sencillo diseñar mi sitio que en blogguer o wordpress (tengo pequeños intentos).
Pedirte que ofrezcas trucos para fullblog sería demasiado y lo que pretendo con este comentario es intentar entrar en contacto con otros que como yo hayan optado por fullblog e intercambiar nuestras experiencias y truquillos de amateurs.
Para los que eséis interesados mi sitio es www.quieroabogado.com (despachoabogados.fullblog.com.ar)
Un Abrazo y sigue así.
José
Oloman, gracias por poner mi web sujerida en tu entrada. ;)
ResponderEliminarPregunta: como hago para que las entradas de mi blog se vea el "publicado por Rodry.D"?
Puse la opcion pero no aparece, y cuando agrego el efecto "fondo de color en los comentarios del autor del post" noi me funciona porque no aparece que lo publique yo.
desde ya gracias.
Hola! ya puse el mio, saludos y gracias!
ResponderEliminarRodry.D, con artilugios expandidos busca el lugar dónde quieres que aparezca (post-footer-line, post-header, etc) y allí inserta esto:
ResponderEliminarAuthor: <data:post.author/>
Esa etiqueta data es la que guarda el autor de cada post.
gracias blogmaster! :D
ResponderEliminarExcelente.!
ResponderEliminarUn saludo desde Bogotá, Colombia.
Gracias Oloman me funciono de maravilla, solo que le tuve que agregar z-index por que me salia debajo de las imagenes xD Saludos y gracias por tus publicaciones que ayudan mucho, seguid asi :D
ResponderEliminarSí, claro. Si hay otros z-index rulando por la plantilla, en este caso habrá que aplicar otro con mayor valor para que se solapen por encima. Gracias por el dato.
ResponderEliminarThor, el código es tal cual lo ves para la imagen que se propone. Si cambias esta o el texto, tendrás que ajustar el ancho y quizás otros valores de posición. No puedo ver tu perfil para decirte más.
ResponderEliminar