10/09/2012

Cambio del color y la textura de fondo del blog por el lector


Dicen aquellos que saben, que todo blogger debe promover la participación de sus visitantes en la mayor medida posible. Además de los comentarios muchas veces se puede lograr que el lector participe adecuando la estética del blog a sus preferencias. En este sentido solo es usual encontrar adaptaciones de tamaño de letra para los mas cortos de vista. Yo quise permitir que los visitantes modifiquen el fondo del blog adaptándolo a los colores o texturas que fueran de su preferencia.
Buscando por la red encontré muchas aplicaciones para cambiar el color del fondo pero cuando uno refrescaba el navegador cambiando de página o entrando en un post, se perdía todo lo seleccionado.
Casi cuando me estaba rindiendo llegué a la página de Daniel Fernandez (http://www.danielfernandez.co) un colombiano que gentilmente pone a nuestra disposición un scrip que mediante el uso de cokies "memoriza" lo seleccionado y no se lo olvida nunca más. Así uno puede seleccionar el color que más le guste y cada vez que ingrese a esa página o blog se reproducirá lo seleccionado. 
Y puedes cambiarlo cada vez que quieras.
Realicé unas pruebas adicionales y la misma implementación sirve para cambiar imágenes de fondo o texturas. 
Mi implementación pueden verla funcionando aquí 
Pero les copio el texto de Daniel Fernandez que es mucho más detallado o si lo prefieren pueden visitarlo en su blog.
http://www.danielfernandez.co/2012/01/cambiar-el-color-de-fondo-del-blog.html

El nos decía :
He decidido dedicarle un espacio a este tema, para ello he elaborado una sencilla paleta con 8 colores y que puedes mírarlo en acción siguiendo este enlace.



A diferencia de otros que he visto en la web, el color de fondo no se quita a la hora de actualizar la página. ¿Deseas aplicarlo en tu blog?

Agrega el siguiente código antes de </head>:

<!-- Cambiar color de fondo -->
<style type='text/css'>
  #paleta {
    position: absolute;
    display: none;
    width: 120px;
    padding: 3px;
    border: 1px solid #000;
    background: #fff;
    margin: 5px;
  }


  #paleta span {
    display: block;
    float: left;
    width: 24px;
    height: 24px;
    border: 1px solid #000;
    margin: 2px;
    cursor: pointer;
  }  
</style>

<script type='text/javascript'>
//Elaborado por Daniel Fernández (www.danielfernandez.co)
//<![CDATA[
//Obtiene la cookie
function getCookie(nombre){
    var nombreCookie, valorCookie, cookie = null, cookies = document.cookie.split(';');
    for (i=0; i<cookies.length; i++){
      valorCookie = cookies[i].substr(cookies[i].indexOf('=') + 1);
      nombreCookie = cookies[i].substr(0,cookies[i].indexOf('=')).replace(/^\s+|\s+$/g, '');
      if (nombreCookie == nombre)
        cookie = unescape(valorCookie);
    }
    return cookie;
}

//Crea la cookie
function setCookie(nombre, valor, dias){
    var fecha = new Date();
    fecha.setDate(fecha.getDate() + dias);
    document.cookie = nombre + ' = ' + escape(valor) + ((dias == null) ? '' : '; expires = ' + fecha.toUTCString()) + '; path=/';
}

//Muestra u oculta la paleta de colores
function paleta() {
  document.getElementById('paleta').style.display = (document.getElementById('paleta').style.display == 'block') ? 'none' : 'block';
}

//Cambia el color de fondo
function color(color) {
  document.body.style.background = color;
  setCookie('colorFondo', color, 365);
}

if(getCookie('colorFondo') != null)
  document.write('<style>body {background: ' + getCookie('colorFondo') + ';}</style>');
//]]>
</script>
<!-- Fin: Cambiar color de fondo -->


Guarda los cambios y listo.
Luego añade lo siguiente en donde deseas que aparezca la paleta de colores, lo más aconsejable sería en un gadget HTML/Javascript (TuBlog > Diseño > Añadir un gadget > HTML/Javascript):

<!-- Paleta de colores -->
<div style='position: relative;'>
  <a href='#backgroundColor' onClick='paleta();'>Cambiar</a>
  <div id='paleta'>
    <span onClick="color(this.style.background)" style="background: #e0aab4;"></span>
    <span onClick="color(this.style.background)" style="background: #7d68e8;"></span>
    <span onClick="color(this.style.background)" style="background: #679ae8;"></span>
    <span onClick="color(this.style.background)" style="background: #68e892;"></span>
    <span onClick="color(this.style.background)" style="background: #feffd3;"></span>
    <span onClick="color(this.style.background)" style="background: #aaaaaa;"></span>
    <span onClick="color(this.style.background)" style="background: #fed1b2;"></span>
    <span onClick="color(this.style.background)" style="background: #ffffff;"></span>
  </div>
</div>
<!-- Fin: Paleta de colores -->


Si deseas cambiar el enlace por algún icono, reemplaza el texto Cambiar por la imagen:

<img src='URL_ICONO' border='0' />

Puedes añadir la cantidad de colores que desees, basta con seguir agregando líneas como estas al código anterior:

<span onClick="color(this.style.background)" style="background: COLOR;"></span>

Reemplaza la palabra COLOR por el deseado, recuerda que debe estar en hexadecimal.

Para colocar una imagen de textura en lugar del color deberás cambiar por la siguiente línea donde el código de color debe ser el correspondiente a la base de la imagen para que en caso de perderla quede con dicho color base.

 <span onclick="color(this.style.background)" style="background: #161616 url(http://dirección de la imagen);"></span>


Suerte y no olvides hacer un salvado de tu plantilla antes de realizar alguna modificación.

7 comentarios:

  1. hola, muchas gracias ante todo.
    existe la posibilidad de combinar este codigo con entradas en lugar un segmento fijo en la pagina.
    quiero decir, si moviendome entre entradas puedo ir cambiando de fondos.

    ResponderEliminar
    Respuestas
    1. Lo que cuentas lo he visto en algunos blogs, así que sí, es posible. Te recomiendo esta entrada de Ciudad Blogger
      http://ciudadblogger.com/2009/08/imagenes-de-fondo-del-blog-al-azar.html
      Cada vez que cambies de post cambiará el fondo en forma aleatoria. Cuando encuentre algo mejor te aviso.

      Eliminar
  2. gracias por responder.
    a lo que me referia era a poder cambiar el fondo no de manera aleatoria, sino que cada vez que se entra a determinada entrada se cambie al mismo fondo

    ResponderEliminar
    Respuestas
    1. Seguramente es posible, pero deebrías tener muy pocas entradas en tu blog ya que si tienes 500 o 1000 deberías contar con esa misma cantidad de imágenes en buena calidad disponibles y almacenadas. De lo contrario el resultado será seguramente muy poco recomendable.
      Espero que encuentres lo que buscas.

      Eliminar
  3. Hola que tal oiie me gustaria mostrar este elemento en mi pagina pero solo la caja me eexplico, sin tener que presionar el boton de mostrar y ocultar la caja de colores, que la caja sea fija. gracias por tu tiempo, y muy buena pagina saludos ... (o)

    ResponderEliminar
  4. Hola como puedo dejar solo la caja estatico sin tener que presionar el boton de mostrarla y ocultarla gracias y excelente pagina saludos ...

    ResponderEliminar
    Respuestas
    1. Como verás en esta implementación todos los eventos son onClick, así que lo que pides es algo completamente diferente.

      Lo que necesitas es mucho más parecido a esta entrada de Ciudad Blogger:

      http://ciudadblogger.com/2010/02/cambiar-imagen-de-fondo-del-blog.html

      Espero te sirva.

      Suerte

      Eliminar

Nota: solo los miembros de este blog pueden publicar comentarios.