Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Header o cabecera del blog con fondo de imagen en movimiento

Este truco se me ocurrió al ver en una web que la cebecera destinada al título del blog tenía un fondo en movimiento, en especial, una imagen de unas bonitas flores. Se trataba de una animación en flash.

Por suerte, es posible conseguir un efecto prácticamente idéntico utilizando javascript y sin necesidad de alojar archivos en un servidor externo.

En este blog puedes ver el truco en funcionamiento.


Diseño>Edición de HTML>expandimos artilugios




Busca la etiqueta </head> y encima inserta el script:

<style type='text/css'>
#header h1 { color: #ffffff; }
#header-wrapper {
background: transparent url(URL DE TU IMAGEN) repeat left top;
margin:0 auto;
border: 4px solid #cccccc;
height: 122px;
}
</style>

<script type='text/javascript'>
//<![CDATA[
function blfondomov1(maxSize,blfondomov2) {
backgroundOffset = backgroundOffset + 1;
if (backgroundOffset > maxSize) { backgroundOffset = 0; }
if(blfondomov2==false) {
document.getElementById('header-wrapper').style.backgroundPosition = '0 ' + backgroundOffset + 'px';
} else {
document.getElementById('header-wrapper').style.backgroundPosition = backgroundOffset + '0px 0px';
}
}
var backgroundOffset = 0;
window.onload = function() {
setInterval('blfondomov1(300,true)', 100);
}
//]]>
</script>

La primera línea de CSS, #header h1 { color: #ffffff; }, aplica un color blanco al título del blog, el cual puede ser editado con ayuda de la tabla de colores.

Reemplaza URL DE TU IMAGEN por la dirección de la imagen de fondo que deseas utilizar en la cabecera de tu blog [+].

La imagen de fondo está configurada para que se mueva de forma vertical. Puedes hacer que se mueva de forma horizontal reemplazando la palabra true por false en el código.

El valor 100 representa la velocidad a la que la imagen se desplazará. Está expresado en milisegundos (1000 milisegundos equivalen a 1 segundo, 2000 milisegundos equivalen a 2 segundos...) y puedes editarlo a tu gusto.

Guarda la plantilla para terminar:




Nota:

Si en tu blog has aplicado alguno de los trucos para proteger su contenido (como el de bloquear las teclas Ctrl y C) en el que la etiqueta <body> haya sido editada, este no funcionará correctamente.

Karla dice...
Este comentario ha sido eliminado por su autor. Siento las molestias.
Karla dice...

Oye Jaime

Aki estoy otra vez, sera posible que el movimiento del fondo sea horizontal en lugar de vertical...?

Gracias!

Jaime Trujillo Escobedo dice...

¡Bienvenida, Karla!

Ahora mismo me paso por tu blog a ver esas plantillas.

En cuanto al movimiento... está explicado en la cuarta línea (empezando desde el final de la entrada) ;).

¡Abrazos!

Karla dice...

Gracias Jaime!

jaja, me aceleré en preguntar antes de leer esa parte...

Hasta luego y buen fin de semana!!

Jaime Trujillo Escobedo dice...

No te preocupes, Karla, todos podemos tener algún despiste.

¡Abrazos y buen fin de semana!

Liliana dice...

Dices que tienes aquí un ejemplo de la cabecera en movimiento, donde está el ejemplo? Gracias.

Jaime Trujillo Escobedo dice...

Liliana, si te fijas bien, la propia frase "este blog" contiene un enlace (por ello tiene un color distinto al resto del texto). En muchos de los trucos encontrarás enlaces "camuflados" de esta forma, pero siempre en color gris.

El blog para ver el resultado es este:

http://elbalcon-header.blogspot.com/

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo