Cargando página...
Lo vi hace algún tiempo en el blog de Gem@ y me pareció una forma ideal de pedirle paciencia a nuestras visitas cuando nuestro blog, por el motivo que sea, se demoré un tiempo en cargar.
Se trata de una imagen en movimiento que indica que la página se está cargando y una vez que el blog ha cargado por completo, la imagen desaparece. Podéis ver un ejemplo a la derecha de mi blog, casi arriba del todo de la página.
Para empezar necesitaremos tener una imagen "de carga", que podemos obtener fácilmente en alguna página de Internet.
En NapyFab, por ejemplo, las hay muy bonitas.
En Load Info podemos personalizar su color y escoger tamaño.
En Ajax Load generamos la imagen que más nos guste a partir de varios modelos base.
En Mentalized hay algunas muy originales.
En San Baldo son pocas pero muy lindas. Una vez decidida la imagen que vamos a usar, la subimos a una página de alojamiento de imágenes, podría ser ImageShack, por ejemplo, y copiamos la dirección (url) que nos proporciona el alojamiento. En el caso de ImageShack, la url a copiar sería la última que aparece una vez subida la imagen. Nos situamos en la parte de Editar - HTML de nuestra plantilla y justo antes de </head> añadimos este código:
<!-- imagen de carga -->
<script type='text/javascript'>
window.onload = detectarCarga;
function detectarCarga() {
document.getElementById("imgLOAD").style.display="none";
}
</script>
<!-- fin imagen de carga-->
He añadido <!-- imagen de carga --> y <!-- fin imagen de carga--> para que si en algún momento necesitáramos localizar el código nos resulte más fácil, los navegadores no lo interpretan, así que no va a darnos ningún error.
¡Guardamos cambios!
Ahora hemos de añadir un nuevo elemento HTML-Javascrip y pegar dentro este código donde incluiremos la url de nuestra imagen, después lo arrastramos a donde mejor nos parezca:<div id="imgLOAD" style="text-align:center;">Cargando...
<img src="URL_DE_LA_IMAGEN"/></div>
He añadido "Cargando..." para que se lea delante de la imagen, cuando la carga termine y la imagen se oculte, el texto también se ocultará. Si solo queremos mostrar la imagen, borramos el "Cargando..." y listo. De la misma manera, podemos cambiar ese texto por cualquier otra cosa..."Espere por favor", "Paciencia, estoy en carga", "Me estoy poniendo las pilas", en fin, lo que sea. :-)
Podemos también colocar la imagen de carga fuera del cuerpo del blog, es decir en una de las esquinas superiores de la página, para ello seguimos los mismos pasos anteriores, con la diferencia de que el código para mostrar la imagen será distinto y tendremos que colocarlo antes del <head> de la plantilla y no en un elemento:<div align='left' id='imgLOAD' style='position:absolute;top:30px;left:30px'>Cargando...
<img src='http://img165.imageshack.us/img165/1922/loadinganimationliferaysd8.gif'/></div>
<div align='right' id='imgLOAD' style='position:absolute;top:30px;right:30px'>Cargando...
<img src='http://img165.imageshack.us/img165/1922/loadinganimationliferaysd8.gif'/></div>
Nota
He incluido en el código la url de mi imagen de carga, por si queréis usarla.
En "top" podemos cambiar la distancia de la imagen a la parte superior de la página, yo he puesto 30px para que los que tengan visible la Navbar de Blogger no tengan el problema de que la imagen se vea sobre ella.
En "left" y en "right" cambiaremos la distancia de la imagen al borde de la página, según hayamos escogido derecha o izquierda para mostrar la imagen.
a las
Etiquetas:
Gadget,
Trucos Blog,
Trucos imagenes,
Utilidades Online
Vitua Radio
Foro SpamLoco
Seguir el Escaparate
64 comentarios:
hola jeje otravez yo..
ahora solo kise opinar para ser el primero jejeje....
e insitir en eso de la radios plizzz ^_^
adios
Muchas gracias, como siempre. Yo he puesto en mi blog :-D
muy buen eso.!!
Hola Rosa encontre estas paginas, no se si las has visitado pero como buena ayudante para blogger ahi va:
http://nestavista.com/2007/09/como-crear-una-plantilla-para-blogger-y.html
http://nestavista.com/2007/10/5-plantillas-tres-columnas-para.html
Saludos!!
Hola Rosa, queria preguntarte algo:
Los iconos chiquitos que tienes al final de todos los post..Cuando publicas algo, la cosa va a todos esos sitios ?..Y si es asi podrias publicarlos para copiarlos ?. Y otra cosita, he intentado colocar el tenma ese de ver todos loc oemntarios que tiene publicado tu otra colega genio llamada Genma, pero hay algun error, no me deja situarlo en plantilla. Gracias por todo. Besitos
Silvestrosvky, muchas gracias por el aporte! En cuanto pueda le hecho un vistazo...
Bukowski, esos botones son para que tus visitas envien si así lo desean cada entrada a su marcador social favorito, o a varios, para hacer eso tu visita tiene que estar registrada en la web del marcador en cuestión.
Para ponerlos no hace falta que tu estés registrado.
Las webs de los marcadores, son como periódicos online, donde van apareciendo las noticias que los usuarios deciden más relevantes.
Puedes ver como colocarlos aquí:
http://elescaparatederosa.blogspot.com/2007/05/marcadores-sociales-en-blogger.html
Y quizá te interese esta otra forma:
http://elescaparatederosa.blogspot.com/2007/02/marcadores-sociales-en-un-solo-botn.html
En cuanto a lo que dices de "ver todos los comments" no se exactamente a que "truco" te refieres...
Las cosas como son Rosa, yo aprendí mucho con tu blog y esto me ayudó a crecer. La verdad sea dicha! un saludo.
Muchas Gracias...
Lo tendre funcionando un tiempo para ver si me acostumbro o no...
peor muchas gracias por el dato...
Muchas gracias!!
Me re funciono!!!
Saludos reina!!
Nati, hija me alegro por ti que estés tan contenta con las cosillas del Escaparate, pero oye, un consejo...no pongas "de todo" y sobre todo no abuses de los script que pueden sobrecargar el blog, se selectiva y escoge lo que más te interese...
Hola:
Que bueno este blog te felicito y gracias esto me sirvió y queda muy bien en uno de mis blogs... Yaquee desde Argentina!!
Me ha venido de perlas, muchimas gracias Rosa!
Hola Rosa, de nuevo por aquí abusando de tu ayuda.
Quisiera cambiar el color de la palabra "Cargando". Sabes que debería de hacer?
Talín, así:
<span style='color: #fff;'>Cargando...</span>
MUCAHS GRACIAS Rosa!!! Esta vez me salió a la primera,... OK era facilito.
Ya he puesto la imagen de carga y hasta la he modificado un poco, pero tengo una duda: ¿es posible que pare de cargar cuando la página se haya cargado del toso?. Supongo que para eso se necesita algo más, pero ni idea de qué... :-(
Nefert,no se necesita nada...tal cual esta explicado se oculta una vez carga el blog...revisa el código.
Hola Rosa! Te comento rápido porque no tengo mucho tiempo ;) Escribo porque como vos me ayudaste, quería devolver parte del favor.
Te cuento que para mí queda mejor fijar la animación a una de las esquinas del navegador, y no del blog. En mi caso, como saqué la barra de Blogger (lo único que servía era el Buscar y lo puse como widget) lo puse bien arriba, pero vos sabrás cómo ajustarlo.
Te dejo el código, y mi blog para que veas cómo queda (espero que salga bien, porque los comentarios no aceptan pre, code ni blockquote):
<div id="imgLOAD" style="position:fixed;top:0;right:0"><img src="http://img262.imageshack.us/img262/5629/ajaxloaderuj9.gif"/></div>
Vista previa ;)
He implementado este truco de "cargando" y me funciona a la perfección, nuevamente ¡GRACIAS ROSA! por tener un sitio tan útil como éste, que he decidido enlazar como "recomendado" desde la portada de mi blog de poesías. Pondré un pequeño banner con el vínculo hacia aquí, porque de todos los sitios de ayuda para bloggers, éste es el que se explica más claramente los métodos.
¡Saluditos!
Hola Rosa!
Quería hacerte una consulta. Me fue muy útil este truco para mi blog. Sin embargo, por más que intento quitar links, la página tarda mucho en cargarse, incluso siempre desaparece el logo de "cargando página" y el blog se 'cuelga' durante más de un minuto, y tampoco deja trabajar con otra sesión de Firefox. Algunos visitantes se me han "quejado" de que el blog tarda en exceso en cargarse. ¿Tu sabes porqué puede ser y que podría hacer para que no pasara?
Gracias!!
natxo
Natxo, cada cosa que colocamos en el blog "pesa", cuanto más añadimos más "engordamos" el blog.
Sobre todo pesan las imágenes grandes ,las presentaciones de fotos tipo slide y los widgets.
No se trata de incluir en nuestro blog todo lo que nos gusta o llama la atención...tendremos que ser un poco selectivos en esto y pensar que merece la pena y que no. Algo como un reloj o un widget que dice el tiempo, por ejemplo, es una completa inutilidad que "carga" el blog con un peso inútil.
Cuando incluimos una presentación de fotos, normalmente usamos el servicio de una página externa, cada vez que accedemos al blog, este ha de "conectarse" con esa web, si la web en cuestión anda mal (por el problema que sea), está conexión se volverá superlenta e incluso llegará a "bloquear" el blo, que puede llegar a quedarse cargando eternamente e incluso colapsarse.
Otro problema son los headers (cabeceras) excesivamente pesadas (como es tu caso)...
En fin, el problema en estos casos en general es el uso excesivo de cosas, a menudo superfluas.
Los leds (letreros luminosos) yo los prohibiría directamente (está es una opinión personal) según mi experiencia en varios casos, no hacen más que impedir la carga óptima del blog...
Como ves, no hay una causa concreta, pero es altamente recomendable el buscar la mayor sencillez posible en cuanto a diseño, los tamaños pequeños o medianos en cuanto a imágenes y, a menudo, el prescindir de cosas llamativas en beneficio del contenido y de nuestras visitas.
Un saludo!
rosa
agradezco mucho tus aportes
apenas comienzo a utilizarlos, ya mejoraré
en este caso logré poner el cartel de cargando, pero en internet explorer no me funciona bien, se tranca
quizá tenga muy pesado el blog, no sé.
aqui lo dejo
saludos y gracias nuevamente
levearquitectura.blogspot.com
leve, el IExplorer es así...ya sabes que interpreta los códigos como le da la gana...en Firefox tu blog va perfecto, en IE tarda algo más en cargar y por eso la imagen parece que se "atasca" pero no es así, una vez cargado el blog, la imagen se cierra.
También depende de la velocidad de conexión, en mi caso, si he notado la diferencia entre los dos navegadores, pero tampoco es mucho...con mi conexión, claro.
Tu blog se esta convirtiendo en una adicción! De a poco voy aprendiendo!
Mil gracias!
Lucero*
Botella, gracias y cuidadin con las adicciones que son muyyy malass! :-)
ROSA HOY INSTALE LA IMAGEN DE CARGA PERO SOLO TARBAJA EN UN ELEMENTO, EN LOS OTROS SIGUE TRABAJANDO
David, no entiendo lo que quieres decir...solo en un elemento, en los otros sigue trabajando...no entiendo nada.
La imagen desaparece una vez el blog se ha cargado por completo, esté colocada en el elemento que esté...unas veces se ocultará primero y otras no, dependerá del tiempo de carga del blog...
Aca estoy yo por otros lados... como siempre con problemas... Es que una vez que la pagina se tmin de cargar, el gif sigue estando ahi... no deberia desaprecer?
Besos
J.W, suponiendo que lo hayas aplicado correctamente, así es, una vez carga la página el gif deja de verse...
El caso es que he estado en tu blog y a pesar de que parece que ha cargado, en la barra de abajo del navegador se sigue viendo:
"Transfiriendo datos desde i.ytimg.com" lo que quiere decir que no ha cargado por completo...he esperado unos minutos y no ha cambiado a: "terminado" no se que es i.ytimg.com pero supongo que una we, por el .com, así que algo que se carga o se usa desde allí no termina de cargar...
Ya lo solucioné (eso creo) el problema habia surgido al agregarle todo el texto que le agregue, de alguna manera se habia borrado el "id=imgLOAD" y por eso no se ocultaba y lo tomaba como un elemento mas de la pagina.
Gracias.
hola Rosa, he puesto todo bien, y me sale cargando permanentemente. Incluso cuando abajo en la barra de estado me dice "Listo", porque puede ser?
Manu, si colocas la imagen en la parte superior de la página y colocas su código en un elemento en algunas plantillas no funciona correctamente...como digo en la entrada, cuando va a emplearse en esa parte el código se coloca antes del <head>
Hola Rosa:
Grcias por tu widget es muy bueno; eres una artista;te queria comentar una duda, veras la imagen se carga correctamente, pero se ve junto con el resto de la página mientras carga. Es decir, a mi me gustaría que sólo se viese el cargador mientras carga la página y que cuando la página estuviese totalmente cargada cargada ent desapareciera, y no las dos cosas al mismo tiempo como hace ahora. No se si me he explicado bien, si quieres ver lo que te digo puedes entrar en mi blog. Muchas gracias... un saludo.
humberto, no tengo idea de como hacer eso en Blogger , de hecho no creo que sea posible, ya que el blog no es como una página web, no tiene páginas estáticas, por lo tanto no hay página principal.
Muchas gracias por tu respuesta Rosa, ahora ya me quedo más tranquilo. Todos mis aplausos para tu magnífico blog y para tu gran sabiduría, pero sobretodo por la generosidad con la que la transmites.
Muchas gracias por todos los trucos que publicas en tu blog :D hasta el momento solo me he animado a usar esta, pero seguire intentando para lograr comprender mejor esto de el uso de HTML y cosas asi @___@
Conejo ¡Gracias a ti!:-)
hola...necesito una ayuda para mi blog..
yo necesito que mis entradas antiguas solo aparescan en el archivo..como se hace???
desde ya muchas gracias
mi mail es notkcs-07@hotmail.com
Matias, no puedes ocultar entradas en Blogger...
Gracias Rosa ya lo aplique y quedo muy bien. Saludos :P
Gracias por mandarme a este post. me salio otra vez! ... jeejejeee de veras que me esta gustando tu pagina, gracias por ayudarnos a todos...
Un problemita que tengo es porque al cargar la pagina de los demas carga en la parte superior y de alli no se mueve ... pero la mia comienza en la parte superior y luego termina de cargarla/ se situa en la parte de la mitad del blog .... asi no puedo ver mi gif de cargar.... hay alguna manera de solucionar eso?? Gracias
Kasafia, yo más bien creo que el motivo es ese video o lo que sea que pone Kasafia TV, es lo que "llama" a la página cuando se abre el blog...
Muchos THANKS Rosa! a ver intentare sacandolo ... gracias!!!
Buenas! cuando pongo este codigo funciona bien, pero me deja de funcionar el otro que tengo para que se me habran los enlaces externos en una nueva ventana, me parece que era este:
script language='javascript' >
var dominio = "www.kitesurftgn.com";
var dominio1 = "kitesurftgn.com";
var script = "javascript:void(0)";
var imagenesblogger0 = "bp0.blogger.com";
var imagenesblogger1 = "bp1.blogger.com";
y sigue...
que puedo hacer? alguna idea?
Gracias x tu ayuda, x esta y x las anteriores ;) y un saludete
www.kitesurftgn.com
ketekites , suelen pasar esas cosas con algunos scripts...no se "llevan" bien. Tendrás que prescindir de uno de los dos, lo siento:(
ok, me imagino.... gracias de todas formas ;)
Hola Rosa. ¿Qué tal va todo? He insertado un "cargador" en mi espacio y es curioso. Sobre todo porque puedes personalizarlo con cualquier texto. Es una especie de página cargando y bienvenida. Un abrazo campeona.
Neru ¡Muy chulo queda! :D
Gracias rosita! Me salió a la primera( No como los emoticones :S) Jeje...
Hola.jeje.. pregunta: hay alguna forma de carga un "SWF" en vez de una "gif" ? como tu entrada de "Colocar un banner o imagen flash en el blog" ,porque la calidad cuando exporto de flash a gif animado es horrible y e bajado programas externos , como el "Magic Swf2Gif" , funciona perfecto pero lo único malo que no tiene para transparencias y los demás que e bajado con transparencia todos me piden registro para poder exportar, bueno esa era mi consulta..
saludos.
-¦-= Shadow†Sneak =-¦- Pues no tengo ni idea...
Quizás funcione sustituyendo <img src="URL_DE_LA_IMAGEN"/> por elcódigo del flash... :o
Nones ya había probado de esa forma, por eso te pregunte.XD, entonces ni idea?..
saludos.
Jeje.. buscando y buscando la pude hacer cargar usando un "SWF" pero solo con la 1era alternativa, la segunda me da error de plantilla esa me hubiese gustado mas, pero espero encontrar algo para dejarla fuera, por mientras me quedare con esta..jeje..
saludos.
Hola Rosa, hice este truco de cargando... y en el blog peliculasanta cruz, quedo muy bien, pero en http://laiglesiasantacruz.blogspot.com
casi no se ve, aun que lo ponga a la derecha aparece siempre a la izquierda. Puedo cambiar el tamaño de la letra?? María c
Rosa, algo mas en peliculasantacruz.blogspot.com el cargando esta bien, pero noto que justo después de haberlo puesto, se me fue el favicon. Que puede haber pasado? María C
c En iglesia...tienes puesto "left" eso es izquierda...
En el código metes el texto de "Cargando..." así:
<span style="font-size:12px;
">Cargando...</span>
En cuanto al favicon, tiene que ser casualidad, no influye para nada...revisa si la imagen sigue estando disponible en la url
Muchas gracias Rosa, como siempre solucionando problemas!!!!! Gracias, mARIA C
Hola rosa...como siempre entro a ver tus novedades, pero hoy tengo un problema pequeñito y no se si podrías ayudarme,tengo junto a una amiga unos blogs, y resulta que con firefox no hay problema, pero ahora me entero de que con esplorer sólo carga a la mitad y no la parte derecha , y es justamente alli q tenemos nuestros jueguitos y no quisiera quitarlos.
Me darías una mano??... mil gracias desde ya!
esta es la url
juntasytbrevueltas.blogspot.com/
Eli & Pao Si es este el blog de que hablas: http://juntasytbrevueltas2.blogspot.com/
Yo lo veo perfecto en IE, claro que uso la última versión del navegador... como deberían hacer todos creo...
Hola!,,no,, jeje, ese es nuestro blog de juegos, el q te hablo es este:
http://juntasytbrevueltas.blogspot.com/, esa es la pag q no me carga, gracias por responder y disculpa la demora..
Eli & Pao Concretamente no puedo decirte nada... deberías ir probando a retirar los gadget de la sidebar uno a uno e ir mirando, quizá en el código de alguno este el problema.
Ok rosa, gracias otra vez!!
Intentaré ver q pasa..chau!
ya está solucionado!... nose q sería , pero opte por la solucion más sana... reinstale la plantilla !!.. jeje
chau!
Publicar un comentario
Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).
Los comentarios están siendo moderados.
Comentar con el formulario antiguo