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/AVvXsEgYSs0Xwca0UoY4I9SlR9iyjcW6ECrpOHvq3HuRAclt2bYqmJm8bv1HPCJl9sz50zclM19FUpIJ7EReZsskVu2e-0iaEQID5BoTevbNJC5ROybKt7fXl3-cwXDXFZAigusxx7jQ6FpeBZVe/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/AVvXsEivwJfKL_d7J6Z2VFglwAS9xN_Vax2kvmRkQx9aKCuhIUHdX4WJfV1zpPWeQVef_u1H2TQ5femYlDq6NGLYzsfS9aQLVYoPsh0xc0g6gE-NUSTQwhjHY7cpUC1XU_Fz_OyFMBuyur8xcqxj/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/AVvXsEghkPtnhUYCvrxpKmGrHwmeAHmBQEEXSuruwS6DyazBYnVX7MajWQDtSJsRPqJEDuQQtqIph75_GLxyA__HxPE1-OjWd0DReI7F-OCl4W-eLzRMNa0feT_ov17BZufiwaDFoNh5J0gN_K-S/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/AVvXsEhy3r2QMKCfyWgmL9ykDs_euNPhrymG1GNTrnzj-zaqlIjEwzboRlNlrG6DVHv5c33msn-Ni9DOkx4OtkWgmous6HDejAWq6o9kgGULIqAtFEgbd_6cZo5NAtnDxJGEpIqInkK8_t77UpkB/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/AVvXsEhl09xiNK5qprG4t05SYq4nSX0HUrsOPdjqVgHJ96CD0hmETyZQPGvQbjZFWH67umzYxjdJrfvW_AcVe_mDc1vwF8bw7oc_s9tsIeGD-rUQiQH4Bu0fDIfTOjRuy7qNOGSqRVgFoOlGdzOT/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/AVvXsEjVxlJP6T5GrTIA1_RMmfvWd90sCuzUTNyqerD75GLPIi_xK-X9Rr0bJbgPBvuSnP1EWEL552M2zqg1Qv8FVEzdhWnXd0PtC1bQVSZMyzTdRgtwffx8mAcX49PmstL8LsebhjIrbrBBRgnP/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/AVvXsEjZtcUgWHNmhlNmYvsWqzaNPqI8Mj-6KTyxXDRbAJYpjBv66mS8deIGRFx6d6wBcwfyoGpo_yURFljNA3MB57I4JsKw41wDlDmQdRcbzCsHR9ao3xvjq7Uy3XCE7IH2lisEjpEAZBa4mW-7/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/AVvXsEjJkUaEOhTRuQ7mThUJ3WdSm4b6sd6KSIf17Q53R47PiegUDfMGkKzlV-WVq6xTsFw-aM_Q7009_XoA2n7eiPkhVgQBC_ZfsyZllHZiGuqVx_qIgP6EJMxuNIFAJdDT5FiOPZnYfcbLwIut/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 ;)