Widget para o visitante mudar a cor de fundo no novo Blogger

 

Se você usa cor em seu blog, saiba que muitas vezes há leitores que simplesmente não conseguem ler as postagens. Os motivos podem ser desde dificuldade na leitura por causa do contraste de cores, até uma certa aversão que pessoas sentem por templates/blogs coloridos. Se você não abre mão de independêcia, e daquela corzinha favorita, que tal dar então a opção para que seu leitor modifique a cor de fundo do template ? Para isso, siga as dicas. (Perceba que postei duas opções para sua escolha.)


Vá até o Modelo de seu blog, clique em Editar modelo

  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. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011

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

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/AVvXsEhUdNT7cPxuL02nF12zJ4ydRZMf6fGlDvG8JJLA6g3bfxAj1jMyg-yIHb2Ox_YV2R91OVlm6ePI6wTxGZs42eGRaJLj-tJPOnQ7lCXlG2mxyOJpZCFyd-EBT8eRFv-83E-3_BXN3muNYUA4/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/AVvXsEh17hEyNOxPIukEc4ia_gPSrEKU4ahj3XSy8zs6tTzlixe4sHuNlbRpDmuvmbFToq4wV1cnrBrgfyY-oh6-DtXL0c4EWhJiuQW8gUyaS5EqG7-GNMZsX843mE0_kbUYHx5RH1UyePozJRL5/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/AVvXsEjdYLir3y7w38fSsEOf2Y54hwnggXiwTnh1gTJOMDz1fbPCpF0o0VqX1dQCJbHav-EsspznbcHd_7t1CbllHOTDovRot7n8zuqCNqTUzG5txbdGzU3jy4vME6p5sv9n0Sbzr1V_zNJa7hKa/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/AVvXsEg_EJZ27GwH1MhuCCOrN1styuuN9y4NQuaUUgb1SX1fe3bOO3W2ub-lKf0jVdTlnhpoX3C9Wsh4ryOPLF6vKsuqK4LM0y5Y7Ha71nANo-MAl1TARrw6atFkvCrqJCJDDYY98FCRBr7Eqt5v/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/AVvXsEg-0bstYgYsgtb33sqgLTSSrkKv5s-KapgvUmFcR1Xd4VxrAgKJHOwrU2mATxygKSoOUSWOoGerdILGV9bQHExzTDkfEXzbb6n8dTpLanUjGA6jsutnwuZ1B9JCOvKHfth0oSgqh-xWtnOD/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/AVvXsEj6RNSlkuGtxezfyNGVOrwVuZitT1o3pQHHngc29jB0mNHBmqjNtPSLfAXGPVQ4altcngUsevlENiooaAqiL2x-W432n9tWDUaTGfi4iAiGkY-6Bge2uorfQyJ_31c8h5B_aX-h-ac90fEQ/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/AVvXsEjcNzIAn8S0uRUOB2ltSiNFIT9iEIkOTteuhJTwQ_gMfmtRBI34JNxEzxt3-kGDo6h9nF3BvBWQ2S5OZKMwRDBdyhyphenhyphenH1WYWTMu1KlTde1LeIZkFGfPgDwQpi9BcJSLNygy1RK7Whzn-hHPx/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/AVvXsEgJKOwUPwPzGB8woxXSuPqy1O_ez3jhUh0CgRQK7XYt2BxKKWLFbcCv2OLif0cPWFuRgua9pdSGs0qAcDzKtzs9kV6n_n9xg0x0rlwh7xzYOyXPGSYbGLFw65fQC1aCMXU7cfLZ1XlUNaPu/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 quiser que o fundo do blog fica transparente, dando mais destaque aos backgrounds, procure por:

$(content.background.color.selector) {
  background-color: $(content.background.color);
}

 E o substitua por este código abaixo:

$(content.background.color.selector) {
  background: url(http://www.blogblog.com/1kt/transparent/white80.png) repeat;
}