martes, 28 de diciembre de 2010

Mis consejos de Blogger: Imagen de carga.

Hoy os voy a enseñar (si me sale) como poner un bonito gráfico de espera para mientras carga el blog (o lo que sea).



Yo voy a usar mi propio gráfico:
¿A que es mono? X3

pero vosotros podeis tirar con uno sacado de internet, que salen un montón al buscar "Carga" o "Loading" en el Google imagenes XD.

Vale. al lio.

Primero le das a la pestañita de "Diseño" de la barrita de arriba del todo y vas a la pestaña de "Edición en HTML" (como en lo de la paginación, por lo que reciclaré pantallazos XD)

Una vez hecho esto, (consejo) abres un editor de texto y copias TODO lo que haya en el marco donde el codigo al editor por duplicado. Así modificas uno y tienes otro de seguridad X3

En este código, buscas la etiqueta <body> y, JUSTO DESPUES le incluyes el siguiente fragmento, modificando lo que hay en rojo por lo correspondiente.

<!-- DIV AVISO -->
<div align='ABSMIDDLE' id='aviso' style='position: absolute; overflow:auto; widht:100% heigth:100%'>
<img align='middle' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHjpPQVzfr-_Jg1VCmW2Jrt2567yD6Gti-yK1m3XG9Q6cAkA9JElAA4R8xh4U83WG70SUs5RtJeuXnIHSC8YBg5nHlu8F2n77aC0DjNH221H6BAcFwI2XAmyyAGdinKuolG3vg-8yqBpoR/s1600/Loadinggg.gif' style='width:100%; scale:100%; position:fixed; bottom:0%; left:0%; opacity:0.8;filter:alpha(opacity=80); z-index:1'/>
</div>

y luego, justo antes de </body>:
<style type='text/css'>
#aviso {
visibility:hidden;
display:none;
}
</style>
y... teoricamente ya está. tu imagen de carga X3

Ala. A disfrutar XD

3 comentarios:

  1. Hola Osukaru, no encuentro la etiqueta body en mi codigo...

    ResponderEliminar
  2. tetiolo. perdona por la LARGA espera al responder XP.

    pues DEBES tener las etiquetas BODY y su consecuente /BODY ya que son basicas en el lenguaje HTML. Si no los tienes, no podria funcionarte... nada Sigue buscando.

    ResponderEliminar
  3. actualizado. he añadido un z-index:1 en la parte de la imagen para que aparezca encima del todo PASE LO QUE PASE X3 (que es un problema que tenia en esta plantilla en concreto)

    ResponderEliminar