Lo Último

Cambio del fondo del blog por el lector




A veces la comodidad del lector a la hora de ver tu blog decide si se queda o se va. Puedes poner en un gadget varios fondos o varios colores lisos para que el lector elija con que color o fondo quiere ver tu blog, de ésta manera el visitante se sentirá más cómodo.

En Blogger In te enseñamos a cambiar la imágen de fondo o escoger un color liso para ver el blog de la manera que más nos gusta, lo bueno es que lo puedes hacer tu y todos los que visitan tu blog. Una forma eficaz de permitir a los visitantes interactuar con tu blog.




Para permitir que el visitante cambie el fondo del blog, procede de la siguiente forma:


Ve a tu "Escritorio Blogger"
Pulsa en tu "Blog"
Pulsa en "Diseño"
Pulsa en "Añadir un gadget"
Pulsa en "HTML Javascript"

Pega el siguiente código en la caja de texto del gadget:
/------------------------------------------------------------------------------------------------------\

<div style="text-align:center;">¿No te gusta el fondo del blog?
¡Cámbialo por otro!</div><br />

<center><a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(URL DE LA IMAGEN DE FONDO)'; document.body.style.backgroundRepeat='repeat'; document.body.style.backgroundColor='none';"><img style="width:40px;height:40px;" src="URL DE LA IMAGEN DE EJEMPLO PARA HACER CLIC" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(URL DE LA IMAGEN DE FONDO)'; document.body.style.backgroundRepeat='repeat'; document.body.style.backgroundColor='none';"><img style="width:40px;height:40px;" src="URL DE LA IMAGEN DE EJEMPLO PARA HACER CLIC" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(URL DE LA IMAGEN DE FONDO)'; document.body.style.backgroundRepeat='repeat'; document.body.style.backgroundColor='none';"><img style="width:40px;height:40px;" src="URL DE LA IMAGEN DE EJEMPLO PARA HACER CLIC" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(URL DE LA IMAGEN DE FONDO)'; document.body.style.backgroundRepeat='repeat'; document.body.style.backgroundColor='none';"><img style="width:40px;height:40px;" src="URL DE LA IMAGEN DE EJEMPLO PARA HACER CLIC" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(URL DE LA IMAGEN DE FONDO)'; document.body.style.backgroundRepeat='repeat'; document.body.style.backgroundColor='none';"><img style="width:40px;height:40px;" src="URL DE LA IMAGEN DE EJEMPLO PARA HACER CLIC" /></a>
</center>
\------------------------------------------------------------------------------------------------------/

Cada línea de código contiene dos URL, la primera es el fondo que se aplica al blog, la segunda es la imagen de ejemplo para que el visitante haga clic eligiendo el fondo

La segunda URL será una imágen del fondo pero en miniatura. Como siempre el consejo de tener un blog de pruebas donde colgar los fondos y las imagenes de ejemplo, para que las URL no dependan de otros.

El ejemplo perfecto lo tenéis en éste mismo blog, es el primer gadget de la barra lateral, podéis probarlo aquí.

En color rojo están los campos que podéis cambiar, arriba es el título indicando para que sirven las imágenes, como véis yo he borrado ese título que está en rojo y con eso ya no aparece. Los demás son las URL de las imágenes y ejemplos que debéis pegar.





Para permitir que el visitante cambie el color liso del fondo del blog, procede de la siguiente forma:

Ve a tu "Escritorio Blogger"
Pulsa en tu "Blog"
Pulsa en "Diseño"
Pulsa en "Añadir un gadget"
Pulsa en "HTML Javascript"

Pega el siguiente código en la caja de texto del gadget:
/------------------------------------------------------------------------------------------------------\

<div style="text-align:center;">¿No te gusta el color de fondo?
¡Cámbialo por otro!</div><br /><center>

<a href="#" onclick="javascript:document.body.style.backgroundColor='#ff0000'; document.body.style.backgroundImage='none';"><img src="URL DE LA IMAGEN DE EJEMPLO PARA HACER CLIC" /></a>

<a href="#" onclick="javascript:document.body.style.backgroundColor='#04B404'; document.body.style.backgroundImage='none';"><img src="URL DE LA IMAGEN DE EJEMPLO PARA HACER CLIC" /></a>

<a href="#" onclick="javascript:document.body.style.backgroundColor='#0080FF'; document.body.style.backgroundImage='none';"><img src="URL DE LA IMAGEN DE EJEMPLO PARA HACER CLIC" /></a>

<a href="#" onclick="javascript:document.body.style.backgroundColor='#CC00FF'; document.body.style.backgroundImage='none';"><img src="URL DE LA IMAGEN DE EJEMPLO PARA HACER CLIC" /></a>

<a href="#" onclick="javascript:document.body.style.backgroundColor='#F781BE'; document.body.style.backgroundImage='none';"><img src="URL DE LA IMAGEN DE EJEMPLO PARA HACER CLIC" /></a>

<a href="#" onclick="javascript:document.body.style.backgroundColor='#000000'; document.body.style.backgroundImage='none';"><img src="URL DE LA IMAGEN DE EJEMPLO PARA HACER CLIC" /></a>

<a href="#" onclick="javascript:document.body.style.backgroundColor='#FFFFFF'; document.body.style.backgroundImage='none';"><img src="URL DE LA IMAGEN DE EJEMPLO PARA HACER CLIC" /></a>
</center>
\------------------------------------------------------------------------------------------------------/


Cada línea de código contiene un códico de color y una URL, podéis cambiar el código de color por el que más os guste, la URL es la imagen de ejemplo que contiene el color liso para que el visitante haga clic eligiendo el color de fondo



La segunda URL será una imágen del fondo pero en miniatura. Como siempre el consejo de tener un blog de pruebas donde colgar la imagen de ejemplo que representa cada color, para que las URL no dependan de otros.


En color rojo están los campos que podéis cambiar, arriba es el título indicando para que sirven las imágenes, podéis borrar o cambiar el título. Los demás son los códigos de los colores y ejemplos que debéis pegar.



Cuando esté listo arrastra el gadget cerca de la cabecera de tu blog y pulsa en "Guardar disposición" y ya puedes ir a tu blog a jugar con los fondos!!.


Esto es todo! espero que disfrutes de la opción para cambiar los fondos o colores lisos de fondo de vuestro blog!!



Para estar actualizado en las novedades de Blogger In puedes seguir el blog, para ello ve al gadget al final de este blog y pulsa en "Participar en éste sitio" y sigue el asistente hasta el final y comprueba que apareces en el gadget. Feliz semana amigos!!