TUTORIAL- Deixar o visitante mudar a cor do fundo

Para ver como fica carrega aqui
O visitante pode não ter o mesmo gosto que nós, faz de conta que a minha cor preferida é verde e o visitante odeia verde. Estar num blog só assim não devia ser divertido. Então este tutorial permite deixar o visitante escolher a cor. Vamos começar:
Procure por:

body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
  padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
  $(body.background.override)
} 

 E apague a parte em vermelho                                                                                                               Ler mais -> -> ->



Procure agora por:

 .body-fauxcolumn-outer .fauxcolumn-inner {
  background: transparent $(body.background.gradient.tile) repeat scroll top left;
  _background-image: none;
}

E apague novamente a parte em vermelho

Procure por:

.body-fauxcolumn-outer .cap-top {
  position: absolute;
  z-index: 1;
  height: 400px;
  width: 100%;
  background: $(body.background);
  $(body.background.override)
}


Apague a parte em vermelho

Procure então por:

.body-fauxcolumn-outer .cap-top .cap-left {
  width: 100%;
  background: transparent $(body.background.gradient.cap) repeat-x scroll top left;
  _background-image: none;
}

Apague a parte em vermelho e salve.





Agora clique em Layout

Clique em Adicionar um Gadegt

Ao abrir, clique em  HTML/Javascript

DEMO

Cole então o próximo código

<div style="text-align:center;">Troque a cor do blog</div><br /><center>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#ff0000'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVprYFAzfF8MOXPPRMs_if2T3MqhR3hhWejr1qYyrXpYHXbzpsizER1NhGgvtKseJLeKF5hCo7vLO2YXgGfztOeaBO2qi8yvC_c4NUW7ocsjZUc0sZtBR0Jz9mbVm9YuOtKtbc-p_cTkYP/s200/body-rojo.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#fff000'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_U_NwXz-DA8SOcEIXeP6Ui9G8Q8SWbwIo9aEPmXlzjgX9cZZ6bXmXs-ZeAYzS44Eaivw19itZ_xYyrWGI30xOJsyqFd1RHko3lIuJEv8Sy-S6LBNLC6giLW6elfv6KU_9sh4EqfpSjDKp/s200/body-amarillo.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#04B404'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinnacN9zbu_Y1fkPYEiJbzsJkJTzb1SHUkllu0HmU29yJFMWSHMjLy0cpvfSLPIxg1ZrMiiSmf80oBPW7YkfpcTxOR9AmewnxCx62RPUXsSydbDMChd57HYoUax4cUlnyRIBCanAloLmbL/s200/body-verde.png" /></a>

<a href="#" onclick="javascript:document.body.style.backgroundColor='#0080FF'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU_PTS5bkAa0BJZ5Z-xigSfOj5tiFyJVVQx5bAZhCwETC3vKv9GMuzQlsng1jV3y-9x-_wclk1L8tUF6MATlWnSVwkZE6urYV0RdeL1URJOAY0tBc8zrwb4-EaguEk-p6LrVcakP7bVsOd/s200/body-azul.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#CC00FF'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJjid4a0aFt3f59mkzAzQgTfnB59ghreFnuPsF4x0cf3KqpK1IGQqIKoh7o0mjQFUvl8c1QOFNOSOxbvM55S_c-CFcDSJtIGtE2CvVbBlkhYACBBrmVJ9xnh7m25TyyqkhGuO5gwdBGBOt/s200/body-morado.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#F781BE'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHGLjjIM3mBDeLnM_y94UwdqVHrspJT8rryGDZEBTb9nabnNoLwLhh2KnOu5b9YE7YI-aOKfGxiz-aBHEVX7ctfXyWPC5D_lpDHXmaQ1OUPx7ui6713PUdmxOBtHSut9li9wpAEk0JhBCN/s200/body-rosa.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#000000'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZfmSqCX6j0uf2XTX1d8dm1xlLQV1TI4braZf6_FBZg0MYszimaCke3FYZAEHVqaBiQqiVY_8qjM1_g_ohqzxVACalLVWabX5qGWhE6nvZH3Y9B5-p9K1RZeo5nr9DGksvZWoibHM7UzHM/s200/body-negro.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#FFFFFF'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqO5oXntLDAwtSY18qSk2OrcrWTdKaPeYahBmSez2XCKdAUOmH_C7i1IkJr9WZBJGNCKEtFkmGCUYrIJQ42NZIEaIn5tVCFdjPJ2unIzexueXLrf3r_PBN8jNR1tbK7B3DebbQ7MvVuDgR/s200/body-blanco.png" /></a>
</center>

DEMO

Se prefere este modelo, o código será esta abaixo:

<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>

Se tentou, comente o resultado ;)