Paleta de Colores para cambiar fondo del Blog

Tener una Paleta de Colores con la utilidad de que al hacer click en algún color este automáticamente cambie el fondo de tu Blog o Sitio,  seria de mucha utilidad ya que a tus usuarios le darías la opción de personalizar la vista que deseen tener sobre tu pagina. Anteriormente vimos como podíamos cambiar el fondo de nuestro Blog automáticamente, así que ahora aremos algo mas complejo como dije tendremos una Paleta con diversos colores, que al dar click el fondo de nuestro Blog cambiara según el color seleccionado, así que si te interesa la idea esta entrada no te defraudara.

En este ejemplo necesariamente tenemos que tener añadido la Librería Jquery en nuestro Blog o Sitio Web, así que si aun no lo tienes te recomiendo ver la siguiente entrada Jquery en Blogger, ademas para este ejemplo usare los estilos de Blogger para el diseño de los botones, de esta forma me ahorrare tiempo en crear estos botones, si también quieres tener a disposición los estilos de Bootstrap te recomiendo leer Bootstrap  en Blogger.

El código que usaremos sera el siguiente:

<div class="col-md-4">
      <button class="paletacolor btn btn-block" style="background-color:#5bc0de" valcolor="#5bc0de">     
      Color1
    </button>
</div>
<div class="col-md-4">
    <button class="paletacolor btn btn-block" style="background-color:#449d44" valcolor="#449d44">   
      Color2
    </button>
</div>
<div class="col-md-4">
     <button class="paletacolor btn btn-block" style="background-color:#ec971f" valcolor="#ec971f">    
      Color3
    </button>
</div>

<script>
       $(".paletacolor").on("click",function(){
         var color=$(this).attr("valcolor");  
         $("body").css("background-color",color);
       });
</script>

Ustedes pueden añadir mas Bloques si es que desean tener mas colores en su paleta, y siempre poner el código del color en al atributo valcolor que se indica en el ejemplo, el ejemplo nos adra el siguiente resultado:

Ahora si dan click en algún color de la paleta el fondo del Blog se cambiara automáticamente, si que es muy interesante no?, podemos añadir los colore que deseemos puse solo estos a manera de ejemplo, así que ya queda a criterio de cada uno poner los colores que mejor quedan con nuestro sitio.

Ahora solo nos queda probar esto en nuestro Blog, recomiendo ponerlo como Gadget para no complicarnos la vida entrando al Código principal de nuestro Blog, así que nos vamos al Menú principal de Blogger y seleccionamos la opción Diseño y luego en Añadir Gadget Html/Javascript: 

Diseño->Añadir Gadget->HTML/Javascript :

Una ves hecho esto ya tendríamos nuestro Gadget que cambia de color el fondo de nuestro Blog, espero den utilidad a este código y sean creativos con su implementacion, si tienen alguna idea que desean hacerla y no saben como, pueden compartirla y quizás tengamos una solución a lo que piensas, recuerda estamos para compartir la información.

Si tienes alguna duda, solo déjala en los comentarios e inmediatamente contestaremos a ella, espero que este Post les sea de mucha utilidad, Gracias.