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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcsz9gtSt0KyydZgqx8xrOaY4_8T-z-EYlxE52hzKsg-ZHn88iqTdsJLRYbrwHkHSahlyv8L_HWcl3QI4ATCWY7pwpmJ2Ug6SDCAOQmdZ-afMkmM4dBHidWiQ5qGR05sfEDoog3SDma2ae/s320/bljjfondoimg4.gif)'; document.body.style.backgroundColor='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcsz9gtSt0KyydZgqx8xrOaY4_8T-z-EYlxE52hzKsg-ZHn88iqTdsJLRYbrwHkHSahlyv8L_HWcl3QI4ATCWY7pwpmJ2Ug6SDCAOQmdZ-afMkmM4dBHidWiQ5qGR05sfEDoog3SDma2ae/s320/bljjfondoimg4.gif" /></a>
<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0RbuTC4kpP43hJXfd_L_N44jCEmeT07llvscFAH9IHAcn5bDC-ixGjSNz0vTJjpqFRuk1GNhDW9C1Pg2TCU3o93xCQkYzepc7AFcZgltC3w-_V4uTUUJs9PkzuyEpek67JJrZPKvnINOV/s320/bljjfondoimg5.png)'; document.body.style.backgroundColor='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0RbuTC4kpP43hJXfd_L_N44jCEmeT07llvscFAH9IHAcn5bDC-ixGjSNz0vTJjpqFRuk1GNhDW9C1Pg2TCU3o93xCQkYzepc7AFcZgltC3w-_V4uTUUJs9PkzuyEpek67JJrZPKvnINOV/s320/bljjfondoimg5.png" /></a>
<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnyBwHXqRbTJi11wlskPX__DiciLpzx9ZkSVBLp9Q7AH1eKq_kLQ2cJxMKdWSKj2xqShbZUlgSCVfv7A_ONak9fRoXM8mxKvWFX_X6qUaX9BDJ8YhP4vPHZhqGJ0Kun8E8VV1IOMX4En9b/s320/bljjfondoimg6.png)'; document.body.style.backgroundColor='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnyBwHXqRbTJi11wlskPX__DiciLpzx9ZkSVBLp9Q7AH1eKq_kLQ2cJxMKdWSKj2xqShbZUlgSCVfv7A_ONak9fRoXM8mxKvWFX_X6qUaX9BDJ8YhP4vPHZhqGJ0Kun8E8VV1IOMX4En9b/s320/bljjfondoimg6.png" /></a>
<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5d29OOjrABmrrrxDYBxpE7wJnXAiSU2YLpovDZn7XmDl120_lC1fpv4ZtNRJM7r1SP6dPMerisw8HZIYtSPsJu2x6sesNfQlh7-8jnh4fYZusFnAZ4EQ4gIOKzuVjkeLbYj1VFHJNbFwV/s320/bljjfondoimg7.png)'; document.body.style.backgroundColor='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5d29OOjrABmrrrxDYBxpE7wJnXAiSU2YLpovDZn7XmDl120_lC1fpv4ZtNRJM7r1SP6dPMerisw8HZIYtSPsJu2x6sesNfQlh7-8jnh4fYZusFnAZ4EQ4gIOKzuVjkeLbYj1VFHJNbFwV/s320/bljjfondoimg7.png" /></a>
<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2q2HUevmak1SNQ5NPiuohqBgmA4LssOfXwjiD2t00LWeXuc1Tf_LSLfPm_w26yJrgXvcNYtzu1CxTi-zN9RHZdcjfIC8asWkg2K2TuGMBlBJJ85lKwlYQSTxn47ESqqXN59FgA0NfM_Ie/s320/bljjfondoimg8.png)'; document.body.style.backgroundColor='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2q2HUevmak1SNQ5NPiuohqBgmA4LssOfXwjiD2t00LWeXuc1Tf_LSLfPm_w26yJrgXvcNYtzu1CxTi-zN9RHZdcjfIC8asWkg2K2TuGMBlBJJ85lKwlYQSTxn47ESqqXN59FgA0NfM_Ie/s320/bljjfondoimg8.png" /></a>
<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSae_qvhSC9VKIp8lzvIk8eu7w4eBz30fgDeL9010rRqnlPmR-cByA3GtD4t6VeH7ChnCTOT6x9PGdkxCgHcQK78hkuSQQU4fLoXvEcn4kfg62nTpBvCD4TZ_CEw2IFeTBNkU1Emh4IqFh/s320/bljjfondoimg2.png)'; document.body.style.backgroundColor='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSae_qvhSC9VKIp8lzvIk8eu7w4eBz30fgDeL9010rRqnlPmR-cByA3GtD4t6VeH7ChnCTOT6x9PGdkxCgHcQK78hkuSQQU4fLoXvEcn4kfg62nTpBvCD4TZ_CEw2IFeTBNkU1Emh4IqFh/s320/bljjfondoimg2.png" /></a>
<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy7Ghyphenhypheny2xuPs8sf2P-Ekj1CTeRQhzpYTWR4fuRO4t6MrRgXCADo9TLIE1luQoL4DxrU4GnnfcYm3crFtnPkVnpflFs74lIUXV293c74e0pI4PxOQqZPUmG4_aaMjWAUKOJpPUpA6kuEp9D/s320/bljjfondoimg1.png)'; document.body.style.backgroundColor='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy7Ghyphenhypheny2xuPs8sf2P-Ekj1CTeRQhzpYTWR4fuRO4t6MrRgXCADo9TLIE1luQoL4DxrU4GnnfcYm3crFtnPkVnpflFs74lIUXV293c74e0pI4PxOQqZPUmG4_aaMjWAUKOJpPUpA6kuEp9D/s320/bljjfondoimg1.png" /></a>
<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9A26kYAT0mJnvCI_TVmagETShJuCyyc6vscEAmCwiyHlfVjIL0NPvyOZMQ6fclkKSZ7FEa1JxhLVXGg0Hv5bDOH6IwE2jwwBBJg0ZBv8QWF6uQyd1E3Q3vZMeG3g0exQjfpiYh_JP3PnJ/s320/bljjfondoimg3.gif)'; document.body.style.backgroundColor='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9A26kYAT0mJnvCI_TVmagETShJuCyyc6vscEAmCwiyHlfVjIL0NPvyOZMQ6fclkKSZ7FEa1JxhLVXGg0Hv5bDOH6IwE2jwwBBJg0ZBv8QWF6uQyd1E3Q3vZMeG3g0exQjfpiYh_JP3PnJ/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.
¿Problemas al comentar? Utiliza 
Hola Jaime, haber si lo consigo!
Un saludo.
Graaacias por compartir cosas como esta con personas como yo que somos más que principiantes en estas cosillas... Un abrazo!
¡Buenísimo! Muchas gracias, voy a probarlo. Saludos.
Genial esta aplicación para ambliopes! Retrasaría mucho la carga del blog?
¡Seguro que sí, Viena!
Muy amable por tu parte Nico. Espero que esto sea de agrado para los lectores de tu blog.
¡Ya me contarás Perséfoneluz! Abrazos.
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).
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
Esto me gustó. gracias,
Yasmin
Ori, lo que buscas fue explicado en el comentario número 14 de esta entrada. Desde que necesites algo más avísame.
Estoy seguro de que en tu blog quedará bien, Yasmin. El fondo color canela conjunta muy bien con las imágenes que publicas.
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.
Pilar, si me indicas la dirección de tu blog te ayudaré a trasladar dicho elemento.
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.