1
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):
Busca la etiqueta </head> y añade antes lo siguiente:
Guarda la plantilla.
Pega este código en su interior:
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:
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.
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/AVvXsEgs8ss2LP5JWTepsckeLXpMjFWLiV3LEyLRiyN-V0PJXVNhj3pUTBxBcPI9pS4DLEKJIfN36O6tu682cSp-iOGmbivL2uN0RXwntdLfbCERriJtO5AMLmZ4UbGS7pvxZmpXLkTWwoAeWc0D/s320/bljjfondoimg4.gif)'; document.body.style.backgroundColor='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs8ss2LP5JWTepsckeLXpMjFWLiV3LEyLRiyN-V0PJXVNhj3pUTBxBcPI9pS4DLEKJIfN36O6tu682cSp-iOGmbivL2uN0RXwntdLfbCERriJtO5AMLmZ4UbGS7pvxZmpXLkTWwoAeWc0D/s320/bljjfondoimg4.gif" /></a>
<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH-tWkCrZir1hLtotusfWzRd12_E6JeeYaKbth3ApbgXRay3IL0KuBA2IUIe5N4kWCLJA3KVlFw20Q-YPluEg-prSAsAlVtA0obssEQWo0ZU8pQ5jDxF2ILVfMGaS8tLSxMzhSaXB61TVI/s320/bljjfondoimg5.png)'; document.body.style.backgroundColor='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH-tWkCrZir1hLtotusfWzRd12_E6JeeYaKbth3ApbgXRay3IL0KuBA2IUIe5N4kWCLJA3KVlFw20Q-YPluEg-prSAsAlVtA0obssEQWo0ZU8pQ5jDxF2ILVfMGaS8tLSxMzhSaXB61TVI/s320/bljjfondoimg5.png" /></a>
<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0PDFgrUetue7Gu5ZdoMCVgzZgALG7mMEURxrHgj-ver0xl1eZfY5MT8kxIgSNInOhulr1lxjUe1dGo93a_3GcW3_WofblYpEfWubHGOC1MsRO8U1iDbqVvDDKBbKThaJ1q59Q1z_U859-/s320/bljjfondoimg6.png)'; document.body.style.backgroundColor='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0PDFgrUetue7Gu5ZdoMCVgzZgALG7mMEURxrHgj-ver0xl1eZfY5MT8kxIgSNInOhulr1lxjUe1dGo93a_3GcW3_WofblYpEfWubHGOC1MsRO8U1iDbqVvDDKBbKThaJ1q59Q1z_U859-/s320/bljjfondoimg6.png" /></a>
<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRZVwJVVPtA2ZOh4NVbK0nM02MRTZZpjAJFWNCvq6jue0M-ijBSJ1UOZja-2cKbMj5AxqvgVjTpRX6Dq69g17rkd_kLkIWdMwo7-3i99kAAq6mnshMdC1EraC2xuyZINgb3Ja5njedCHzw/s320/bljjfondoimg7.png)'; document.body.style.backgroundColor='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRZVwJVVPtA2ZOh4NVbK0nM02MRTZZpjAJFWNCvq6jue0M-ijBSJ1UOZja-2cKbMj5AxqvgVjTpRX6Dq69g17rkd_kLkIWdMwo7-3i99kAAq6mnshMdC1EraC2xuyZINgb3Ja5njedCHzw/s320/bljjfondoimg7.png" /></a>
<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9DcF7B8uPetk3hEM9yZe5XbLcLjcFMuAmuMAF8FsbpVvdaAM62k6eEtMKKf13oZ-MYArdrNWY5Gu9nxbMRXaeMrjTH-x9W8tfkq7I59KvtPDLGxlsdci-gFwNPu2Hi_ju9g75znnGVU6v/s320/bljjfondoimg8.png)'; document.body.style.backgroundColor='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9DcF7B8uPetk3hEM9yZe5XbLcLjcFMuAmuMAF8FsbpVvdaAM62k6eEtMKKf13oZ-MYArdrNWY5Gu9nxbMRXaeMrjTH-x9W8tfkq7I59KvtPDLGxlsdci-gFwNPu2Hi_ju9g75znnGVU6v/s320/bljjfondoimg8.png" /></a>
<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcYCywUn1vaLp3X6fa6i9XsPzC9p5Qr5gEJLaaRmXg_tqdg-6UwROuoZppf1_x4MEgRv8m3UD7HhDt1CakytGqp7YRwtp_dKotGMylBeh8iq_XmrKioypVEoMs8oSjgl1sc37W2gRK9aLA/s320/bljjfondoimg2.png)'; document.body.style.backgroundColor='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcYCywUn1vaLp3X6fa6i9XsPzC9p5Qr5gEJLaaRmXg_tqdg-6UwROuoZppf1_x4MEgRv8m3UD7HhDt1CakytGqp7YRwtp_dKotGMylBeh8iq_XmrKioypVEoMs8oSjgl1sc37W2gRK9aLA/s320/bljjfondoimg2.png" /></a>
<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcsq8tyN44p1IQ4y7rYDA-2dBxChi2bBGLpykZQFCsmr8IyZr42o6qP6S_0kbn8biLMPd06MEFJMbBGZusv4UUI6utJrsusE7kGSDX5U4yevf5jsryYmLIyiy49CtMcz7G5RWItgUTWQqA/s320/bljjfondoimg1.png)'; document.body.style.backgroundColor='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcsq8tyN44p1IQ4y7rYDA-2dBxChi2bBGLpykZQFCsmr8IyZr42o6qP6S_0kbn8biLMPd06MEFJMbBGZusv4UUI6utJrsusE7kGSDX5U4yevf5jsryYmLIyiy49CtMcz7G5RWItgUTWQqA/s320/bljjfondoimg1.png" /></a>
<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibzjvTL4xqrRwEcJoXBMBF8o2-lE6I1pT1o2nOQRIaVSwcuIbL_D5urGeKsptLQXrxyWgEh0tQRv80i-PvkXRO6GQ1xiRonR0hANAq6E2xI7CNAYQTWk85Oou9UKBbF0zuue-V3xhV6CaY/s320/bljjfondoimg3.gif)'; document.body.style.backgroundColor='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibzjvTL4xqrRwEcJoXBMBF8o2-lE6I1pT1o2nOQRIaVSwcuIbL_D5urGeKsptLQXrxyWgEh0tQRv80i-PvkXRO6GQ1xiRonR0hANAq6E2xI7CNAYQTWk85Oou9UKBbF0zuue-V3xhV6CaY/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.
1 comentarios:
No me funciona, al pulsar alguna de las imagenes el fondo del blog se pone de color naranja (color del tema) y a menos que recargues la pagina no cambia aunque pulses otro.
P.D: He pegado antes de >/head> lo que pone con los artilugios expandidos.
Gracias de antemano.