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.

Cambiar la imagen de fondo en el blog a opción del lector

Con anterioridad vimos cómo cambiar el color de fondo del blog usando un menú, que permitía cambiar el color de fondo con un click.

Modificando un par de atributos al código conseguimos que el fondo del blog pueda reemplazarse por una u otra imagen.

Además de hacer que el lector se sienta más unido al blog, el truco es también útil para blogs que ofrecen contenido visual dado que con un clic, el visitante podrá ver el resultado.

Este es un ejemplo del truco (ten en cuenta que aquí, el fondo sólo ocupa el recuadro destinado a probar el artilugio):



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



Busca la etiqueta </head> y añade antes lo siguiente:
<link href='https://sites.google.com/site/editoriosus/fds/bljteIMGselec.css' rel='stylesheet' type='text/css'/>

Guarda la plantilla.

Diseño>añadir gadget (elemento de página)>html-javascript




Pega este código en su interior:
<div style="text-align:center;">¿Prefieres otro fondo en el blog?
¡Escoge tu favorito!</div><br />
<div id="bljjImgFond">
<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(http://2.bp.blogspot.com/-avmHUfoYzFo/TXO-PAPoLtI/AAAAAAAABHQ/raqvH6OSOM8/s320/bljjfondoimg4.gif)'; document.body.style.backgroundColor='none';"><img src="http://2.bp.blogspot.com/-avmHUfoYzFo/TXO-PAPoLtI/AAAAAAAABHQ/raqvH6OSOM8/s320/bljjfondoimg4.gif" /></a>
<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(http://3.bp.blogspot.com/-Gsrt1MqDlmE/TXO-PQasFnI/AAAAAAAABHY/hKsMy37ceqA/s320/bljjfondoimg5.png)'; document.body.style.backgroundColor='none';"><img src="http://3.bp.blogspot.com/-Gsrt1MqDlmE/TXO-PQasFnI/AAAAAAAABHY/hKsMy37ceqA/s320/bljjfondoimg5.png" /></a>
<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(http://4.bp.blogspot.com/--HquhO6KgMA/TXO-P4RvLAI/AAAAAAAABHg/P2d0FIdshGE/s320/bljjfondoimg6.png)'; document.body.style.backgroundColor='none';"><img src="http://4.bp.blogspot.com/--HquhO6KgMA/TXO-P4RvLAI/AAAAAAAABHg/P2d0FIdshGE/s320/bljjfondoimg6.png" /></a>
<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(http://1.bp.blogspot.com/-PUUdFicJjEs/TXO-P248loI/AAAAAAAABHo/fUeIa-A2PVc/s320/bljjfondoimg7.png)'; document.body.style.backgroundColor='none';"><img src="http://1.bp.blogspot.com/-PUUdFicJjEs/TXO-P248loI/AAAAAAAABHo/fUeIa-A2PVc/s320/bljjfondoimg7.png" /></a>
<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(http://3.bp.blogspot.com/-4tZNspkiDLI/TXO-QBolA1I/AAAAAAAABHw/se359Wu7BPI/s320/bljjfondoimg8.png)'; document.body.style.backgroundColor='none';"><img src="http://3.bp.blogspot.com/-4tZNspkiDLI/TXO-QBolA1I/AAAAAAAABHw/se359Wu7BPI/s320/bljjfondoimg8.png" /></a>
<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(http://1.bp.blogspot.com/-LCcIh28GScs/TXO2dMo_wpI/AAAAAAAABGw/2XRz59_UtW4/s320/bljjfondoimg2.png)'; document.body.style.backgroundColor='none';"><img src="http://1.bp.blogspot.com/-LCcIh28GScs/TXO2dMo_wpI/AAAAAAAABGw/2XRz59_UtW4/s320/bljjfondoimg2.png" /></a>
<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(http://1.bp.blogspot.com/-lyNz8ZvhNIE/TXO441VA9pI/AAAAAAAABHA/5j-w0XRT7ic/s320/bljjfondoimg1.png)'; document.body.style.backgroundColor='none';"><img src="http://1.bp.blogspot.com/-lyNz8ZvhNIE/TXO441VA9pI/AAAAAAAABHA/5j-w0XRT7ic/s320/bljjfondoimg1.png" /></a>
<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(http://2.bp.blogspot.com/-enmiSlOoqQg/TXO5f_0p_dI/AAAAAAAABHI/Kx91fCBKiMw/s320/bljjfondoimg3.gif)'; document.body.style.backgroundColor='none';"><img src="http://2.bp.blogspot.com/-enmiSlOoqQg/TXO5f_0p_dI/AAAAAAAABHI/Kx91fCBKiMw/s320/bljjfondoimg3.gif" /></a>
</div>

Puedes aumentar la cantidad de imágenes de fondo así como modificar las del ejemplo. Reemplaza la dirección o URL de la imagen (se presenta dos veces) por la del fondo escogido.

Para incluir más imágenes utiliza bloques como este:
<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(URL IMAGEN)'; document.body.style.backgroundColor='none';"><img src="URL IMAGEN" /></a>

Inserta en URL IMAGEN la dirección de la imagen. La primera posición pertenece a la URL de la imagen que actuará como fondo del blog, mientras que la segunda es la de ejemplo, de forma que el usuario pueda seleccionarlo.

Viena dice...

Hola Jaime, haber si lo consigo!
Un saludo.

Nico dice...

Graaacias por compartir cosas como esta con personas como yo que somos más que principiantes en estas cosillas... Un abrazo!

Perséfoneluz dice...

¡Buenísimo! Muchas gracias, voy a probarlo. Saludos.

Driwrgy dice...

Genial esta aplicación para ambliopes! Retrasaría mucho la carga del blog?

Jaime Trujillo Escobedo dice...

¡Seguro que sí, Viena!

Jaime Trujillo Escobedo dice...

Muy amable por tu parte Nico. Espero que esto sea de agrado para los lectores de tu blog.

Jaime Trujillo Escobedo dice...

¡Ya me contarás Perséfoneluz! Abrazos.

Jaime Trujillo Escobedo dice...

Buenas noticias Driwrgy; el código no retrasará la carga del blog dado que, al usar la propiedad onclick conseguimos que cada fondo cargue sólo cuando el lector lo selecciona.

Por poner un ejemplo, sería como incluir un enlace de texto hacia un vídeo de YouTube (lo que no retrasaría la carga de contenido puesto que no instalamos reproductor alguno).

Ori♥ dice...

Hola,estuve visitando tu blog,de hecho te sigo porque esta muy interesante,te queria pedir ayuda,osea,un codigo,porque en tu blog y muchos sucede lo siguiente:
por ejemplo,vos mira como es el color de tus seguidores,y si le pasas el cursos se aclara
Cual es el codigo?
Bue,espero tu respuesta

:) :P

manos de chicureo dice...

Esto me gustó. gracias,
Yasmin

Jaime Trujillo Escobedo dice...

Ori, lo que buscas fue explicado en el comentario número 14 de esta entrada. Desde que necesites algo más avísame.

Jaime Trujillo Escobedo dice...

Estoy seguro de que en tu blog quedará bien, Yasmin. El fondo color canela conjunta muy bien con las imágenes que publicas.

Pilar dice...

Hola,
¿me podrías decir cómo colocas la flechita que hay abajo, a la derecha, para volver arriba?
Gracias, me harías un gran favor.

Jaime Trujillo Escobedo dice...

Pilar, si me indicas la dirección de tu blog te ayudaré a trasladar dicho elemento.

Fisiomónica dice...

Muchas gracias!!!! fue de gran ayuda, porque sinceramente agradar a los ojos de todos es difícil, pues entre gustos y colores no han escrito los autores; al menos con este recurso cada visitante puede personalizar aunque sea un poco la visual que quiere del blog!!!!...excelente aporte.

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