Widget para o visitante mudar as cores do blog

Cores contrastantes podem dificultar a leitutra. Se insiste, dê ao menos a seus visitantes essa posssibilidade.

DEMO

Uma maneira de ter o blog sempre diferente é deixar um widget para que seus visitantes troquem as cores do blog. Para isso é necessário que se modifique alguns itens no blog. Se vc quer que somente a cor de fundo modifique, vá até o HTML de seu blog e procure pelo seguinte trecho:

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.

body {
	background: $bgcolor;
	margin:0;
	color:#660000;
	font:x-small Georgia Serif;
	font-size/* */:/**/small;
	font-size: /**/small;
	text-align: center;
	}

Note que deixei uma parte do código na cor vermelha, não é a toa. Pode ser que em seu blog esteja diferente se ele foi modificado ou se possui uma imagem de fundo, mas o que interessa é que vc terá que apagar todo o código que está na cor vermelha, entende ? Mesmo que o seu esteja diferente, vc terá que apagar.

Salve e vá até "Elementos de página". Clique em "Adicionar um widget" e em HTML/Javascript, cole o seguinte código:

<form>
<input type="button" value="branco" onclick="document.
bgColor=&#39;#ffffff&#39;" />
<input type="button" value="preto" onclick="document.
bgColor=&#39;#000000&#39;" />
<input type="button" value="cinza" onclick="document.
bgColor=&#39;#808080&#39;" />
<input type="button" value="verde" onclick="document.
bgColor=&#39;#008080&#39;" />
<input type="button" value="azul" onclick="document.
bgColor=&#39;#B0E0E6&#39;" />
<input type="button" value="vermelho" onclick="document.
bgColor=&#39;#AD0F22&#39;" />
<input type="button" value="amarelo" onclick="document.
bgColor=&#39;#F8D328&#39;" />
<input type="button" value="rosa" onclick="document.
bgColor=&#39;#E4DBE9&#39;" />
<input type="button" value="laranja" onclick="document.
bgColor=&#39;#FC9B54&#39;" />
<input type="button" value="lilás" onclick="document.
bgColor=&#39;#C5C6E7&#39;" />
<input type="button" value="marrom" onclick="document.
bgColor=&#39;#775237&#39;" />

</form>

<script>
function initArray() {this.length = initArray.arguments.lengthfor (var i = 0; i < this.length; i++)this[i+1] = initArray.arguments[i]}
var hexChars = "0123456789ABCDEF";
function Dec2Hex (Dec) {var a = Dec % 16;var b = (Dec - a)/16;hex = "" + hexChars.charAt(b) + hexChars.charAt(a);return hex;
}
function bgChanger (begin, end, steps) {steps = steps -1 ;redA     = begin.charAt(0) + begin.charAt(1);
  red_valA = parseInt(redA,'16');
  redB     = end.charAt(0) + end.charAt(1);
  red_valB = parseInt(redB,'16');
  red_int  = ((red_valB - red_valA) / steps) * -1;
  grnA     = begin.charAt(2) + begin.charAt(3);
  grn_valA = parseInt(grnA,'16');
  grnB     = end.charAt(2) + end.charAt(3);
  grn_valB = parseInt(grnB,'16');
  grn_int  = ((grn_valB - grn_valA) / steps) * -1;
  bluA     = begin.charAt(4) + begin.charAt(5);
  blu_valA = parseInt(bluA,'16');
  bluB     = end.charAt(4) + end.charAt(5);
  blu_valB = parseInt(bluB,'16');
  blu_int  = ((blu_valB - blu_valA) / steps) * -1;
step = 2;
red = red_valA;grn = grn_valA;blu = blu_valA;
document.bgColor = begin;
while ( steps >= step ) {red -= white_int;red_round = Math.round(white);red_hex = Dec2Hex(white);
grn -= grn_int;grn_round = Math.round(grn);grn_hex = Dec2Hex(grn);
 blu -= blu_int;blu_round = Math.round(blu);blu_hex = Dec2Hex(blu);
document.bgColor = red_hex + grn_hex + blu_hex;
//    document.write("<br>bgcolor = " + red_hex + grn_hex + blu_hex);step++;}
document.bgColor = end;}
</script>